盒子模型（Box Model）

一、概述

• 所有的HTML元素都可以看作是盒子，而网页布局的本质：利用CSS摆盒子，装内容。
• 盒子模型由：内容（content）、边框（border）、内边距（padding）、外边距（margin）构成。
• 盒子模型实际大小=内容的宽度与高度+边框+内边距

1、边框（border属性）

语法：border:border-width||border-style||border-color
注意：

• border为复合属性，这是边框的复合写法，没有固定的顺序，但习惯这样。
• 边框的大小会影响实际盒子的大小
• 也可以分开写，如border-top上边框、border-bottom下边框、border-right右边框、border-left左边框。

（1）边框宽度（border-width)

值	描述
medium	默认宽度
thin	小于默认宽度
thick	大于默认宽度
指定大小	由浮点数字和单位标识符组成的长度值，不可为负值如10px等

（2）边框样式（border-style）

值	描述
none	默认无边框。与任何指定的border-width值无关
solid	实线边框
double	双线边框。两条单线与其间隔的和等于指定的border-width值
hidden	隐藏边框。IE不支持
dotted	点线
dashed	虚线
groove	根据border-color的值画3D凹槽
ridge	根据border-color的值画菱形边框
inset	根据border-color的值画3D凹边
outset	根据border-color的值画3D凸边

2、内边距（padding属性）

• 定义元素边框与元素内容之间的距离，即上（padding-top）下（padding-bottom）左（padding-left）右（padding-right）的内边距。
• 内边距会影响盒子的实际大小，即会撑大盒子
• 如果没有给一个盒子指定宽度，而给它指定了padding值，则这种情况下padding不会撑大盒子

写法	表示
padding：10px;	1个值表示上下左右内边距都为10px
padding：10px 5px;	2个值表示上下内边距为10px左右内边距都为5px
padding：10px 4px 5px;	3个值表示上内边距为10px,左右内边距都为4px,下内边距为5px
padding：10px 4px 5px 7px;	4个值表示上内边距为10px,右内边距都为4px,下内边距为5px，左内边距为7px.即顺时针的顺序

注意：（内边距、外边距都适用）

• 只提供一个参数，将用于全部的四边。
• 提供两个参数，第一个用于上－下，第二个用于左－右。
• 提供三个参数，第一个用于上，第二个用于左－右，第三个用于下。
• 提供全部四个参数值，将按上－右－下－左顺时针的顺序作用于四边。
• 其参数值可以是百分比

3、外边距（margin属性）

控制盒子与盒子之间的距离。即上（margin-top）下（margin-bottom）左（margin-left）右（margin-right）的外边距。

外边距可以让块级盒子水平居中，但必须满足：

（1）盒子必须自动宽度
（2）盒子的左右外边距设为auto
如：margin：0 auto；或margin：auto；或margin-right：auto；margin-left：auto；
注意：对行内元素无效，但可以给其父级的元素添加：text-align：center;(使文字水平居中）也可以使其达到水平居中

清除默认的内外边距

*{padding:0;
margin:0;}

在写css代码时，第一句先写此代码。
注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距

垂直外边距合并（塌陷）

使用margin定义块级元素垂直外边距时，可能会出现外边距合并

（1）相邻块元素垂直外边距合并（塌陷）

• 当上下相邻块元素相遇时，下面元素有margin-top，上面元素有margin-bottom，则它们两者之间的垂直间距不是margin-top与margin-bottom之和
• 而是取这两个值中较大的那一个这种现象称为相邻块元素垂直外边距合并（也称为外边距塌陷）
• **解决方案：**尽量只给一个盒子添加margin值

（2）嵌套块元素垂直外边距合并（塌陷）

• 对于两个嵌套关系（父子关系）的块元素，如果父元素没有上内边距及边框
• 父元素的上外边距会与子元素的上外边距发生合并，合并之后外边距为两个中的较大者。
• 解决方案：可以为父元素定义上边框、或者可以为元素定义上内边距、或者可以为父元素添加overflow：hidden;