CSS边框盒⼦和内容（默认）盒⼦的区别
⼀、内容盒⼦（默认盒⼦）
padding是外边距还是内边距
内容盒⼦也称为普通盒⼦也可以称为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）他们之间的距离不会是他们相加，⽽是谁的外边距⼤，他们之间的距离就是多少，简⽽⾔之就是 ，兄弟元素之间的上下边距，取两者之间边距⼤的。
如图：
解决⽅法：只给⼀个盒⼦设外边距。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。