CSS盒模型

​ CSS盒子模型仅仅是一个形象的比喻，每一个可见的HTML元素都是一个盒子，一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）以及content（内容）。

​ 我们可以发现margin、padding和border都是CSS属性，它们三是用来控制盒子的边距边框，而content就是描述HTML元素的内容，通过width/height属性设置content的宽度和高度。

- 内容盒子(W3C盒子)

默认盒子模型 W3C盒子

​ 使用box-sizing属性可以改变盒子模型，取值“content-box”的盒子为默认盒子模型。

​ width 属性仅表示盒子内容所占的宽度

​ height 属性仅表示盒子内容所占的高度

W3C盒子

内容区的宽

​ width

内容区的高

​ height

盒子的宽

​ width+paddingLeft+paddingRight+borderLeft+borderRight

盒子的高

​ height+paddingTop+paddingBottom+borderTop+borderBottom

所占屏幕空间的宽

​ width+paddingLeft+paddingRight+borderLeft+borderRight +marginLeft+marginRight

所占屏幕空间的高

​ height+paddingTop+paddingBottom+borderTop+borderBottom+marginTop+marginBottom

​ 内容盒子也称为普通盒子，其特点为：当我们为一个盒子指定width属性的时候，实际上width仅为内容的宽度，当padding和border变大的时候，内容宽度不变，盒子所占的总体宽度要变大。

- 边框盒子(IE盒子模型)

​ 边框盒子模型

​ IE盒子使用box-sizing属性可以改变盒子模型，取值“border-box”的盒子为边框盒子模型。

IE盒子

内容区的宽

​ width-paddingLeft-paddingRight-borderLeft-borderRight

内容区的高

​ height-paddingTop-paddingBottom-borderTop-borderBottom

盒子的宽

​ width

盒子的高

​ height

所占屏幕空间的宽

​ width+marginLeft+marginRight

所占屏幕空间的高

​ height+marginTop+marginBottom

​ 边框盒子也称为怪异盒子，其特点为：当我们为一个盒子指定width属性的时候，实际上width包含了border和padding的宽度，如果border不变，padding变大，这时候内容会变小。

- 盒子模型注意点

​ 1.如果两个盒子是嵌套关系, 那么设置了里面一个盒子(子元素)顶部的外边距, 外面一个盒子(父元素)也会被 顶下来。

原因

​ 子元素和父元素上边框重合在一起。
​ 因为父元素的第一个子元素的顶部外边距margin-top如果碰不到有效的border或者padding，就会不断 一层一层的找自己父元素的麻烦。只要给父元素设置一个有效的border或padding就可以有效的管制这个 margin-top，防止它越级，把自己的margin-top当成父元素的margin-top执行。

​ 2.如果外面的盒子不想被一起顶下来,那么可以给外面的盒子添加一个边框属性。

​ 3.在企业开发中, 一般情况下如果需要控制嵌套关系盒子之间的距离, 应该首先考虑padding, 其次再考虑 margin，margin本质上是用于控制兄弟关系之间的间隙的。

​ 4.只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不 会合并。

​ 5.在嵌套关系的盒子中, 我们可以利用margin: 0 auto;的方式来让里面的盒子在外面的盒子中水平居中
​ margin:0 auto = margin:0 auto 0 auto，表示上下为0，左右为auto；
​ 6.margin: 0 auto; 只对水平方向有效, 对垂直方向无效