CSS边框盒子和内容（默认）盒子的区别

一、内容盒子（默认盒子）

     内容盒子也称为普通盒子也可以称为w3c盒子，也是默认使用的盒子。其特点为：当我们为一个盒子指定width属性的时候，实际上width仅为内容content的宽度，当padding和border变大的时候，内容宽度不变，盒子所占的总体宽度要变大。内容盒子他的box-sizing的值为content-box。可以通过box-sizing来改变一个元素的盒子类型

 

 

内容盒子：

内容区域宽：  width；   

内容区域高：height

盒子的宽：paddingLift+borderLift+width+borderRight+paddingRight

盒子的高：paddingTop+borderTop+height+borderBottom+paddingBottom

所占屏幕空间的宽  : marginLeft+盒子的宽+marginRight

所占屏幕空间的高：marginTop+盒子的高+marginBottom

二、边框盒子（IE盒子）

     边框盒子也称为怪异盒子，其特点为：当我们为一个盒子指定width属性的时候，实际上width包含了border和padding的宽度，如果border不变，padding变大，这时候内容会变小。 IE盒子使用box-sizing属性可以改变盒子模型，取值“border-box”的盒子为边框盒子模型。

 

内容区域宽：  width-(paddingLift+borderLift+borderRight+paddingRight)；   

内容区域高：height-(paddingTop+borderTop+borderBottom+paddingBottom)

盒子的宽：width

盒子的高：height

所占屏幕空间的宽  : marginLeft+width+marginRight

所占屏幕空间的高：marginTop+height+marginBottom

三、盒子模型注意点

在使用盒子模型中，有一个需要注意的地方，就是margin（外边距）。

            在嵌套关系中的盒子会出现一种情况：

            设置了里面一个盒子(子元素)顶部的外边距, 外面一个盒子(父元素)也会被 顶下来。如图：

造成原因：

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

解决方法：

•       给父元素设置边框（border）或者设置内边距（padding）.
•      不使用margin使得子元素距离父元素顶部有一定距离，父元素使用padding使子元素距离父元素顶部有一定距离。
•    使用display ，float ，position，改变元素使它不处于文档流或不为block(块级元素)，只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

   在兄弟关系中的盒子会出现一种情况：

           设置了一个盒子(前一个元素)底部的外边距(margin-bottom), 后一个盒子也设置了一个顶部的外边距（margin-top）他们之间的距离不会是他们相加，而是谁的外边距大，他们之间的距离就是多少，简而言之就是 ，兄弟元素之间的上下边距，取两者之间边距大的。如图：

     解决方法：只给一个盒子设外边距。