项目十六 盒子模型
项目展示
盒模型综合案例如图16.1、16.2所示。
图16.1 盒模型综合案例1
图16.2 盒模型综合案例2
教学内容
1. 认识盒模型
行内元素类似牛奶，需要用一个盒子装起来，前面学过的双标签就是一个盒子，有了盒子。我们就可以装载内容并随意运送摆放位置了，如图16.3所示。
盒模型的组成
图16.3 牛奶的摆放
网页布局的本质： 把网页元素（文字图片等等），放入盒子里面，然后利用CSS摆放盒子的过程。
盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成，如图16.4所示。
图16.4 网页中盒子的摆放
2. 盒子模型的组成
盒子模型由边框、外边距、内边距和实际内容组成，如图16.5所示。
图16.5 盒模型的组成
3. 盒子边框（border）
边框由边框粗细、边框线样式、边框颜色三部分构成。
（1）语法：border：border-width || border-style || border-color，如图16.6所示。
（2）边框线样式。
边框线样式如图16.6所示。
盒子边框
图16.6 边框线样式
（3）边框样式连写。案例如下：
① 上下左右边线为1像素红色实线：
border：1px solid red；
② 上边线为1像素红色实线：
border-top：1px solid red；/*上边框*/
③ 下边线为2像素绿色虚线：
border-bottom：2px dashed green；/*下边框*/
④ 左边线为1像素蓝色实线：
border-left：1px solid blue；
⑤ 右边线为5像素粉红色实线：
border-right：5px solid pink；
（4）三角形的制作。案例如图16.7所示。
图16.7 三角形的制作案例
（5）边框合并。
以前学过的html表格相邻边框变得很粗，运用
表示相邻边框合并在一起。
（6）边框会影响盒子的实际大小，如图16.8所示。
图16.8 盒子模型
解决方法：
① 测量盒子大小时不去量边框。
② 如果测量时已经包含边框，则需要width/height减去边框的宽度。
4. 内边距（padding）
（1）内边距的属性用法。padding属性（见表16.1）用于设置内边距，内边距是边框与内容之间的距离。
内边距语法
表16.1 内边距属性
padding后面跟不同数值表示的意思是不一样的。其说明如图16.9所示。
图16.9 内边距不同数值值说明
（2）内边距会影响盒子的实际大小。
给盒子指定内边距后：
① 内容和边框有了距离。
② padding撑大了盒子。
解决方法：
为保证盒子和效果图大小一致，则需要width/height减去多出来的内边距即可。
小技巧：padding不会撑开没有指定width/height的盒子。
（3）导航案例中内边距的运用，如图16.10所示，对应代码如下：
内边距应用
图16.10 导航案例
外边距
5. 外边距（margin）
（1）外边距的属性用法。
margin属性（见表16.2）用于设置外边距。设置外边距会在元素之间创建“空白区域”，这段空白区域通常不能放置其他内容。其语法同内边距padding。
表16.2 外边距属性
让一个盒子实现水平居中，需要满足一下两个条件：
① 盒子必须是块级元素（行内/行内块元素水平居中，只需给父元素添加text-align：
center）。
② 盒子必须指定宽度（width）。
给左右的外边距都设置为auto，可使块级元素水平居中。实际工作中常用这种方式进行网页布局，示例代码如下：
（2）外边距合并问题。
① 相邻块元素垂直外边距的合并，如图16.11所示。
图16.11 相邻块元素垂直外边距合并
当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则它们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。
解决方案：尽量避免。
② 嵌套块元素垂直外边距的合并（即外边距塌陷），如图16.12所示。
图16.12 嵌套块元素垂直外边距合并
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。
解决方案：
·可以为父元素定义1像素的上边框或上内边距。
·可以给父元素定义一个上内边距。
·可以为父元素添加overflow：hidden。
6. box-sizing属性
box-sizing：content-box/border-box；
content-box：定义宽度和高度时不包括border和padding值（默认）。
border-box：定义宽度和高度时，border和padding包含在width和height之内。
以上代码效果如图16.13所示。
图16.13 案例效果
7. 重置样式之清除内外边距
网页元素很多都带有默认内外边距，不同浏览器默认值不同。因此在布局之前，首先要清除网页元素自带内外边距，并设置盒模型从边框开始计算。
注意：行内元素为了照顾兼容性，只设置左右边距，尽量不要设置上下内外边距（避免没有效果），但是转换为块级元素或行内块后就可以了。
8. 圆角边框（border-radius）
圆角边框和盒子阴影
语法：border-radius：1-4 length | %；（参数1参数2空格隔开时）
一个参数，表示四个角的圆角一样。
两个参数，第一个表示左上角和右下角，第二个表示右上角和左下角。
三个参数，第一个左上角，第二个表示右上角和左下角，第三个表示右下角。
四个参数，四个值的顺序是：左上角，右上角，右下角，左下角。
也可以分开写成：border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius。
圆角原理如图16.14所示。
图16.14 圆角原理
如果是正方形盒子，把数字修改为宽高的一半，或者写50%，就可以得到一个圆形盒子，如：border-radius：50%；
如果是矩形设置高度一半，可得如图16.15所示效果。
图16.15 圆角设置
9. 盒子阴影（box-shadow）
语法：box-shadow：像素值1 像素值2 像素值3 像素值4 颜色值 阴影类
其属性说明如表16.3所示。
表16.3 盒子阴影属性说明
10. 文字阴影（text-shadow）
语法：text-shadow：h-shadow v-shadow blur color；
其属性说明如表16.4所示。
表16.4 文字阴影属性说明
项目训练