第2-3章CSS框模型与定位.pptVIP

第5章 CSS框模型与定位 本章要点 CSS框模型的概念 CSS绝对定位与相对定位 CSS浮动效果 CSS定位实例 5.1 CSS 框模型 框模型是CSS控制页面时一个重要的概念。只有很好地掌握了框模型以及其中的每个元素的用法，才能真正地控制页面中各个元素的位置。本章主要介绍框模型的基本概念，并讲解CSS定位的基本方法。 5.1.1 CSS 框模型的概述 所有页面中的元素都可以看成是一个框，占据着一定的页面空间。一般来说，这些被占据的空间往往都比单纯的内容要大。换句话说，可以通过调整框的边距好距离等参数，来调节框的位置。 CSS 框模型 (Box Model) 规定了元素框处理元素内容（element）、内边距（padding）、边框（border）和外边距（margin）的方式。如图5-1所示。 元素框的最内部分是实际的内容（element），直接包围内容的是内边距（height和width）。内边距呈现了元素的背景。内边距（padding）的边缘是边框（border）。边框以外是外边距（margin），外边距默认是透明的，因此不会遮挡其后的任何元素。 内边距、边框和外边距都是可选的，默认值是零。在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的尺寸。一个框的实际宽度（高度）是由 width（height）+padding+border+margin组成。 假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素 。 5.1.2 CSS 内边距 CSS元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。CSS padding 属性定义元素边框与元素内容之间的空白区域。padding 属性值可以是长度值或百分比值，但不允许使用负值。 例如，将所有 h1 元素的各边都有 10 像素的内边距，只需要这样： h1 {padding: 10px;} 还可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值： h1 {padding: 10px 0.25em 2ex 20%;} 值复制原理 我们在定义内边距的时候可以采用值复制到原理，即： 内边距设置一个值：4个内边距均使用同一个设置值。 内边距设置两个值：上下内边距用第一个值，左右内边距用第二个值。 内边距设置三个值：上内边距用第一个值，左右内边距用第二个值，下内边距用第三个值。 内边距设置四个值：四个值分别对应上、右、下、左四个内边距。 5.1.3 CSS 边框 元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。CSS border 属性允许你规定元素边框的样式、宽度和颜色。 1.边框的样式（style） CSS 的 border-style 属性定义了 10 个不同的非 inherit 样式，包括 none。 none ：定义无边框。该项为缺省值。 hidden：与 none 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。 dotted：定义点状边框。在大多数浏览器中呈现为实线。 dashed：定义虚线。在大多数浏览器中呈现为实线。 solid：定义实线。 double：定义双线。双线的宽度等于 border-width 的值。 groove：定义 3D 凹槽边框。其效果取决于 border-color 的值。 ridge：定义 3D 垄状边框。其效果取决于 border-color 的值。 inset ：定义 3D inset 边框。其效果取决于 border-color 的值。 outset：定义 3D outset 边框。其效果取决于 border-color 的值。 inherit：规定应该从父元素继承边框样式。 2.边框的宽度（width） 边框的宽度是指边框的粗细程度。可以通过 border-width 属性为边框指定宽度。border-width属性共有4种设置方法。 设置一个值：4条边框宽度均使用同一个设置值。 设置两个值：上下边框用第一个值，左右边框用第二个值。 设置三个值：上边框用第一个值，左右边框用第二个值，下边框用第三个值。 设置四个值：四个值分别对应上、右、下、左四条边框。 为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em；或者使用 3 个关键字之一，它们分别是 thin 、medium（默认值） 和 thick。 3.边框的颜色（color） 设置边框颜色非常简单。CSS 使用一个简单的 border-color 属性，它一次可以接受最多 4 个颜色值。在设置时跟b