9.2 CSS盒模型
CSS处理网页时，认为每个元素都包含在一个不可见的盒子里。盒子有内容区域、内容区域周围的空间（内边距padding）、内容边距的外边缘（边框border）和边框外面将元素与相邻元素隔开的不可见区域（外边距margin）。这类似于挂在墙上的带框架的画，其中衬边是内边距，框架是边框，而该画框与相邻画框之间的距离则是外边距，如图9-8所示。
图9-8 CSS盒模型
每个元素盒子都有4个决定其大小的属性：内容区域、内边距、边框和外边距。可以单独控制每一个属性。同时，可以控制盒子的外观，包括background、padding、border、margin、width、height、alignment、color等。
每个元素盒子可以是块级的（block），也可以是行内的（inline）。在CSS中，使用display属性来定义盒的类型。
block类型：这种盒模型的元素默认占据一行，允许通过CSS设置宽度、高度，例如div、p元素。
inline类型：这种盒模型的元素不会占据一行（默认允许在一行放置多个元素），即使通过CSS设置宽度、高度也不会起作用，例如span、a元素。
在默认情况下，元素按照它们在HTML中自上而下出现顺序显示（这称为文档流，document flow），并在每个块级元素的开头和结尾处换行。
对于元素盒子进行定位有4种基本方法：
（1）可以让盒子处于文档流中（这是默认的方式，也称为静态方法，这是用得最多的方法）；
（2）可以让盒子脱离文档流，并制定该元素相对父元素（绝对方法，需慎用）或浏览器窗口（固定方法，实践中用得更少）的精确坐标；
（3）可以相对于盒子在文档流中的默认位置对其进行移动（相对方法，使用频率介于静态方法和另外两种方法之间）。
（4）此外，如果盒子相互重叠，还可以指定它们的叠放次序（z-index）。
CSS提供了如下布局相关属性：
（1）float：该属性控制目标HTML元素是否浮动以及如何浮动。当通过该属性设置某个对象浮动后，该对象将被当作块（block-level）元素处理，即相当于display属性被设置为block。也就是说，即使为浮动元素的display设置了其他属性值，该属性值依然是block。浮动HTML元素将会仅跟随它的前一个元素漂浮，直到遇到边框、内边距（padding）、外边距（margin）或另一个块（block-level）元素为止。该属性支持left、right两个属性值，分别指定对象向左、向右浮动。
（2）clear：该属性用于设置HTML元素的左、右是否允许出现浮动对象。该属性支持如下属性值：
①none：默认值。两边都不允许出现浮动元素。
②left：不允许左边出现浮动元素。
③right：不允许右边出现浮动元素。
④both：两边都不允许出现浮动元素。
（3）clip：该属性控制对HTML元素进行裁剪。该属性值可指定为auto（不裁剪）或rect（number number number number），其中rect（）用于在目标元素上定义一个矩形，目标元素只有位于该矩形内的区域才会显示出来。
（4）overflow：设置当HTML元素不够容纳内容时的显示方式。该属性支持如下几个属性值：
①visible：该属性值指定HTML元素既不剪切内容也不添加滚动条，是默认值。
②auto：该属性指定HTML元素不够容纳内容时将自动添加滚动条，允许用户通过拖动滚动条来查看内容。
③hidden：该属性指定HTML元素自动裁剪那些不够空间显示的内容。
④scroll：该属性指定HTML元素总是显示滚动条。
（5）overflow-x：该属性的作用与overflow相似，只是该属性只控制水平方向的显示方式。
（6）overflow-y：该属性的作用与overflow相似，只是该属性只控制垂直方向的显示方式。
（7）visibility：适用于CSS2，用于设置目标对象是否显示。与display属性不同，当通过该属性隐藏某个XHTML元素后，该元素占用的页面空间依然会被保留。该属性的两个常用值为visible和hidden，分别用于控制目标对象的显示和隐藏。
（8）display：用于设置目标对象是否及如何显示。该属性支持的属性值很多，该属性主要用于控制CSS盒模型。