CSS 盒模型 - 掘金

CSS盒模型

CSS 盒模型本质上是一个盒子，从内到外分别是 content内容、padding内边距、border边框和margin外边距。

CSS 盒模型分类有两种： content-box 和 border-box 。

两种盒模型的区别是：

content-box： width 和 height 只包括内容content 的 width 和 height。
border-box：width 和 height 不仅包括内容content的width和height，还包括 border、padding的。

如何在CSS设置这两个模型？

.box{
    box-sizing: border-box;
}

.box{
    box-sizing: content-box;
}

margin外边距合并

虽然盒模型有 margin外边距，但是会出现margin合并的情况，具体情形如下：

<div class="parent">     
    <div class="child1">child1</div> 
    <div class="child2">child2</div>             
    <div class="child3">child3</div> 
</div>

.parent{
    background-color: green;
    margin: 10px;
}
.parent .child1{
    background-color: grey;
    margin: 10px;
}
.parent .child2{
    background-color: grey;
    margin: 10px;
}
.parent .child3{
    background-color: grey;
    margin: 10px;
}

按照设想，child1顶端应该距离页面顶端20px，但是由于发生margin合并（父子合并），child1顶端距离页面仅10px；

同样按照设想，子元素之间的间距应该有20px，但因为margin合并（兄弟合并），子元素之间的间距仅10px。

兄弟合并：相邻元素的外边距发生重叠合并。
父子合并：最上方的子元素和最下方的子元素与父元素的 margin 重叠，这种情况是上下margin 重叠，不是左右 margin 重叠。

如何阻止margin合并？

对于父子合并，可以采取以下三种方式阻止：

对父元素设置 border 。
对父元素设置 padding 。
对父元素设置 overflow: hidden; 对于兄弟合并，可以设置 display: inline-block; 来阻止 margin 兄弟合并。

阻止后的页面效果应如下所示：