2.2.4 CSS 3的盒模型
盒模型（Box Model）是CSS 3用于指定网页元素应该如何呈现的一个重要概念。所有CSS 3的样式规定都与盒模型相关。
1.盒模型的概念
在网页设计中，每个元素都可以理解成一个由元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）组成的矩形框。它们之间的关系如图2-10所示。
图2-10 W3C标准中CSS 3盒模型的示意图
从图2-10中可以看出下列关系。
包围content、padding、border和margin区域的外部矩形分别被称为content-box、padding-box、border-box和margin-box。
2.内外边距和盒大小
在实际应用中，使用最多的是外边距（margin）和内边距（padding）的设置。此外，还可以通过设置盒尺寸box-sizing来控制元素内容的宽和高。
（1）外边距（margin）
margin属性用于设置元素4个方向的外边距（margin-left、margin-right、margin-top和margin-bottom），它控制着环绕元素的矩形区域与相邻元素之间的距离。
需要注意以下两点。
1）margin-left和margin-right对所有元素都起作用，而margin-top和margin-bottom仅对块级元素（如p、h1～h6、div、table、tr和td等）起作用。
2）margin属性通常使用像素（px）作为尺寸单位，也可以设置为auto或百分比值，甚至可以设置成负值。
margin属性的常见用法如下。
（2）内边距（padding）
padding属性用于设置元素内部与元素边框之间4个方向的距离（padding-left、padding-right、padding-top和padding-bottom）。padding属性可以使用px、auto或百分比作为单位，但不能使用负值。padding属性的常见使用方法与margin十分相似，这里不再赘述。
（3）盒大小（box-sizing）
box-sizing属性主要用于设置元素的边界盒宽度和高度，以便使其以适当的大小适应某个区域的内容。box-sizing常用的取值有content-box（默认）和border-box。
content-box表示元素的宽度和高度为content的宽度和高度，padding和border不包含在内。例如，下列代码表示应用样式类class1的元素内容盒的宽度为200px，内边距为10px，使用蓝色实线边框。
代码表示元素的实际总宽度为：左右内边距20px（10+10）+左右边框10px（5+5）+内容宽度200px=230px。
下列语句省略了box-sizing属性，则默认box-sizing为content-box，故与上面的语句等效。
border-box表示content、padding和border都包含于元素的width和height中。下列代码表示元素的实际总宽度就是200px。
3.盒区域显示特效
在CSS 3中可以使用border-radius属性设置边框的圆角效果，使用border-image属性设置区域的图像边框效果，使用box-shadow属性设置区域的阴影效果。
（1）border-radius属性
CSS 3中提供了关于圆角边框的4个单独属性：border-top-left-radius（左上角）、border-top-right-radius（右上角）、border-bottom-right-radius（右下角）和border-bottom-left-radius（左下角）。每一个角都由水平半径和垂直半径两个值来表示，水平半径不等于垂直半径时为一个椭圆角，如图2-11所示。若属性值只有1个，则表示水平和垂直半径相等（圆角）。
图2-11 椭圆角示意
（2）border-image属性
CSS 3的border-image属性可以使用图像文件作为区域的边框，并自动将该图像分割为9部分进行处理，无须额外编写代码。其语法格式如下。
其中，val1～val4分别表示对图像进行分割时的上、右、下、左边距的大小。
（3）box-shadow属性
在CSS 3中使用box-shadow属性可为区域添加阴影效果。其语法格式如下。
其中，length1～length3表示阴影离开区域的横向距离、纵向距离和阴影的模糊半径；color表示阴影的颜色值。
【演练2-2】盒区域显示特效示例。
启动Visual Studio，选择“文件”→“新建”→“网站”命令，以“ex2-2”为名称新建一个ASP.NET空网站。在解决方案资源管理器中右击网站名称，在弹出的快捷菜单中选择“添加”→“HTML页”命令，以Default为文件名向网站中添加一个静态网页文件。
按照如下所示编辑HTML代码，运行后得到如图2-12所示的结果。
图2-12 盒区域的圆角和阴影效果
