标准盒子模型
- 盒子模型有元素的内容、边框（border）、内边距（padding）、外边距（margin）组成
- 盒子里面的文字和图片等元素是盒子的内容区域
- 盒子的厚度即是盒子的边框
- 盒子内容与盒子内容的距离是内边距
-
盒子与盒子之间的距离是外边距
盒子模型.png
border: 1px solid pink
内边距：边框与内容之间的距离，
- 当内容和边框之间有了距离，即内边距，会使盒子变大
- 特殊情况： 如果没有给一个盒子指定的宽度，此时如果给这个盒子指定padding，则不会撑开盒子
盒子的实际大小 = 内容的宽度/高度 + 内边距 + 边框
外边距：
- 让块级盒子水平居中对齐，必须有宽度，左右外边距设置为auto即可
margin: auto;
margin: 0, auto;
text-align:center //可以让盒子里面的文字、行内元素、行内块元素居中水平对齐
外边距合并
1.相邻元素垂直外边距的合并
当上下相邻的两个块元素相遇时，则他们之间的的垂直间距不是两者的margin-bottom与margin-top之和，而是去两者中较大的
2.嵌套的块元素垂直外边距的合并（塌陷）
- 对于两个嵌套关系的块元素，如果父元素没有上内边距或边框
- 父元素的上外边距会与子元素的上外边距发生合并
- 合并后的外边距为两者中较大的
解决方案 - 为父元素定义上边框
- 为父元素定义上内边距
- 为父元素添加 overflow:hidden
- 其他浮动，固定，绝对定位
内外边距大部分情况下是可以混用的，为了稳定性，可以优先使用宽度，内边距，外边距
原因：外边距会有外边距合并的问题，padding会改变盒子的大小，需要进行计算，宽度没有问题
