一、盒子模型
1、盒子模型概述
CSS 盒子模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式。
2、边框（border）
| 属性 |
值 |
描述 |
| border-color |
transparent:默认，透明 |
边框颜色 |
| border-style |
none:无边框 dotted：点线 dashed：虚线 double：双实线 solid：实线 |
边框样式 |
| border-width |
thin：细边框 medium：默认，中等边框 thick：粗边框 length(px,em)：自定义长度 |
边框宽度 |
| border-collapse |
separate：默认值。边框会被分开。 collapse：细线表格 |
表格边框 |
| border-radius |
length，% |
圆角边框 |
| border |
none |
取消边框 |
常用写法 border: 1px solid #ccc;
3、内边距（padding）
padding的取值可以是1-4个 h1 {padding: 10px 0.25em 2ex 20%;} 一个值：上下左右 两个值：上下、左右 三个值：上、左右、下 四个值：上、右、下、左（顺时针）
注意：行内元素里面不要写上下padding，左右可以
4、外边距（margin）
外边距不会对盒子本身的大小造成影响，一般是移动盒子本身或者影响其他的盒子
margin-top、margin-left 移动盒子本身
margin-right、margin-bottom 影响的是右边和下边的盒子
- margin的取值方式和padding一样
- margin的大小只会移动盒子的位置，并不会对盒子的大小造成影响（特殊情况例外）
- 行内元素也不要给上下的margin
- 特殊值：auto margin:0 auto; 可以让一个块级元素水平居中
前提条件：必须是块级元素 同时必须有固定的width
text-align是控制盒子内部的文字或者内部的行内块水平居中
margin:0 auto控制的是盒子本身的水平居中
5、清除内外边距
很多标签天生自带边距，而且不同的浏览器对应的边距有所不同。
(1) body 标签: 自带 margin: 8px; 的属性
(2) p 标签: 默认带有 margin: font-size 0; 的值
(3) h 标签: 也默认带有 margin-top 和 margin-bottom
(4) ul标签: ul 标签默认带有上下的 margin, 和 padding-left
为了在不同的浏览器中显示的结果都是一样的，所以需要将所有的标签身上自带的边距设置为0
* { padding: 0; margin: 0; }
6、外边距的BUG
1、相邻块元素垂直外边距的合并
当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom， 下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和 而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。
解决方案： 避免
2、嵌套块元素垂直外边距的合并
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框， 则父元素的上外边距会与子元素的上外边距发生合并， 合并后的外边距为两者中的较大者， 即使父元素的上外边距为0，也会发生合并
解决方案
1. 可以为父元素定义1像素的上边框或上内边距。 2. 可以为父元素添加overflow:hidden。
7、盒子模型的计算
（1）内减
我们在实际工作中量到的都是盒子的实际大小，我们会把这个实际大小直接给到盒子的width和height
在后续如果需要添加border或者padding，需要在width和height的基础上减去border和padding的大小
（2）CSS3的盒子模型
box-sizing: border-box;
自动内减：不需要我们在手动去计算多出来的border和padding值
（3）不需要手动减去padding和border的情况
①当盒子的宽度是继承过来的时候 添加padding和border不需要内减
②当用text-indent控制文字的缩进的时候 也不需要内减
③直接使用box-sizing：border-box去实现盒子的内减