1 盒子模型的概念
所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都
由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。
盒模型.png
盒模型调试器讲解.png
结论：
•网页就是多个盒子嵌套排列的结果。
•内边距出现在内容区域的周围，当给元素添加背景色或背景图像时，该元素的背景色或背景图像也将出现
在内边距中。
•外边距是该元素与相邻元素之间的距离。
•如果给元素定义边框属性，边框将出现在内边距和外边距之间。
注意：虽然盒子模型拥有内边距、边框、外边距、宽和高这些基本属性，但是并不要求每个元素都必须定义
这些属性
2.边框属性
边框属性.png
3.边框属性—设置边框样式（border-style）
• 边框样式用于定义页面中边框的风格，常用属性值如下：
none：没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线
dashed：边框为虚线
dotted：边框为点线
double：边框为双实线
4.边框属性—设置边框样式（border-style）
• 既可以对盒子的单边进行设置，也可以综合设置四条边的样式：
border-top-style:上边框样式
border-right-style:右边框样式
border-bottom-style:下边框样式
border-left-style:左边框样式
border-style:上边框样式 右边框样式 下边框样式 左边框样式
border-style:上边框样式 左右边框样式 下边框样式
border-style:上下边框样式 左右边框样式
border-style:上下左右边框样式
使用border-style属性综合设置四边样式时，必须按上右下左的顺时针顺序。
• 省略时采用值复制的原则，即一个值为四边，两个值为上下/左右，三个值为上/左右/下。
例如<p>只有上边为虚线dashed，其他三边为单实线solid，可以使用border-style综合属性分别设置各
边样式：
p{ borer-style:dashed solid solid solid;}
或综合设置四条边，然后采用上边覆盖：
p{ border-style:solid;} /*综合设置四边样式*/
p{ border-top-style:dashed;} /*上边样式覆盖*/
5.边框属性—设置边框宽度（border-width）
border-top-width：上边框宽度
border-right-width：右边框宽度
border-bottom-width：下边框宽度
border-left-width：左边框宽度
border- width：上边框宽度 [右边框宽度 下边框宽度 左边框宽度]
综合设置四边宽度必须按上右下左的顺时针顺序采用值复制，即一个值为四边，两个值为上下/左右，三
个值为上/左右/下。
6. 边框属性—设置边框颜色（border-color）
– 边框颜色的单边与综合设置如下：
border-top-color:上边框颜色
border-right-color:右边框颜色
border-bottom-color:下边框颜色
border-left-color:左边框颜色
border-color:上边框颜色 [右边框颜色 下边框颜色 左边框颜色]
顺时针顺序，即一个值为四边，两个值为上下/左右，三个值为上/左右/下。
• 其取值可为预定义的颜色值、十六进制#RRGGBB或RGB代码rgb(r,g,b)，最常用的是十六进制#RRGGBB。
注意：
设置边框颜色时同样必须设置边框样式，如果未设置样式或设置为none，则其他的边框属性无效。
7.边框属性—综合设置边框
• 像border、border-top等这样，能够一个属性定义元素的多种样式，在CSS中称之为复合属性。
• 常用的复合属性有font、border、margin、padding和background等。
• 复合属性可以简化代码，提高页面的运行速度，但是如果只有一项值，最好不要应用复合属性，以免样式
不被兼容。
多学几招
1.表单的边框通常改为 0；
border:0 none;//兼容所有浏览器
2.表格的细线边框
table { border-collapse:collapse; }
3. 轮廓 （链接有虚线 和 文本框 有 蓝色边框）
outline-style:none;
8.内边距属性
– padding属性用于设置内边距，也是复合属性，相关设置如下：
padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距
padding:上内边距[右内边距 下内边距 左内边距]
内边距是享有 背景色的。
9.外边距属性
margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:上外边距
margin:上外边距 [右外边距 下外边距 左外边距]
margin相关属性的值，以及复合属性margin取1~4个值的情况与padding相同。
• 外边距可以使用负值，使相邻元素重叠。
10.外边距属性
– 对块元素应用宽度属性width，并将左右的外边距都设置为auto，可使块级元素水平居中，实际工作中常
用这种方式进行网页布局，示例代码如下：
.header{ width:960px; margin:0 auto;}
– 为了更方便地控制网页中的元素，制作网页时，可使用如下代码清除元素的默认内外边距：
*{
padding:0; /*清除内边距*/
margin:0; /*清除外边距*/
}
注意：
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
11.行内元素 关于padding 和margin 问题
注意：
行内元素不要给上下的margin 和padding
上下margin和padding会被忽略。
左右margin和padding会起作用。
12.盒子的宽与高
– 使用宽度属性width和高度属性height可以对盒子的大小进行控制。
– width和height的属性值可以为不同单位的数值或相对于父元素的百分比%，实际工作中最常用的是像素
值。
– 大多数浏览器，如Firefox、IE6及以上版本都采用了W3C规范，符合CSS规范的盒子模型的总宽度和总高度的计算原则是：
盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边距之和
盒子的总高度= height+上下内边距之和+上下边框宽度之和+上下外边距之和
注意：
1、宽度属性width和高度属性height仅适用 于块级元素，对行内元素无效（img标记和<input />除外）。
2、计算盒子模型的总高度时，还应考虑上 下两个盒子垂直外边距合并的情况。
13.相邻块元素垂直外边距的合并
当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距
margin-top，则他们之间的垂直间距不是marginbottom与margin-top之和，而是两者中的较大者。这种
现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。
14.相邻块元素垂直外边距的合并
相邻块元素垂直外边距的合并.png
15.嵌套块元素垂直外边距的合并
– 对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边
距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。
– 如果希望外边距不合并，可以为父元素定义1像素的上边框或上内边距。
网友评论