CSS盒子模型

外边距margin的合并现象：在垂直方向上，如果有两个相邻的外边距，就会发生外边距合并现象。

在默认布局的水平方向，margin会累加左右两边标签的外边距宽度。在垂直方向上，margin会合并上下两边标签的外边距高度，谁大就显示谁的外边距高度，只选择一个，不累加。

CSS盒子模型：HTML中所有的标签，都是一个盒子。
在HTML中所有的标签都可以设置：宽度/高度、边框、内/外边距

宽度/高度：指定可以存放内容的区域
-内容宽高：width/height
就是通过标签的width/height属性设置的宽度和高度。

-元素宽高：2border+2padding+width/height
宽度 = 左边框+左内边距+内容宽度+右内边距+右边框
高度同理。

-元素空间宽高：2margin+2border+2*padding+width/height
宽度 = 左外边距+左边框+左内边距+内容宽度+右内边距+右边框+右外边距
高度同理。

盒子的 box-sizing 属性：CSS3中新增的属性。
box-sizing属性可以保证给盒子新增了border和padding之后，元素的宽高不变，保证了内部元素不溢出。

Paste_Image.png

在开发中，如果有需求到嵌套(父子)关系盒子之间的距离的时候，应该使用内边距padding属性来控制，不要使用外边距margin属性，margin属性一般用于控制同级(兄弟)关系的盒子
.b {margin:0 auto;} 可以设置嵌套关系盒子的水平居中，不能控制垂直居中。

Paste_Image.png

div中 text-align:center; 和 margin:0 auto; 的区别：

• text-align:center 只是用于 div 中文字和图片的水平居中
• margin:0 auto 只是让盒子自己水平居中