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+marginRigh

所占屏幕空间的高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变大，这时候内容会变小。

盒子模型注意点

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

原因

        子元素和父元素上边框重合在一起。 ​

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