CSS 盒模型(Box Model)

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用的。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model)：

不同部分的说明：

• Margin(外边距) - 清除边框外的区域，外边距是透明的。
• Border(边框) - 围绕在内边距和内容外的边框。
• Padding(内边距) - 清除内容周围的区域，内边距是透明的。
• Content(内容) - 盒子里的内容，显示文本和图像。

盒模型类型

盒模型有两种类型：内容盒content-box和边框盒border-box。

1.两种模型的区别

• 内容盒(content-box)：内容就是盒子的边界。
• 内容盒(content-box)： width=内容宽度
• 边框盒(border-box)：边框才是盒子的边界。
• 边框盒(border-box)： width=内容宽度+padding+border

2.如何设置两种模型

在不设置box-sizing的情况下，box-sizing默认是content-box。

/* 内容盒 */
box-sizing:content-box;

 /*边框盒*/
box-sizing:border-box;

3.margin合并

margin合并：如果两个box都设置了外边距，那么在垂直方向上，两个box的外边距会发生重叠，以绝对值大的那个为最终结果显示在页面上。

哪些情况会发生margin合并

• 父子margin合并

如果子元素设置了外边距，父元素也会产生外边距，给父元素添加 overflow：hidden 这样父元素就变为 BFC，不会随子元素产生外边距，但是父元素的高会变化。

• 兄弟margin合并

同级（兄弟）元素在垂直方向上外边距会出现重叠情况，最后外边距的大小取两者绝对值最大的那个

注意：行内元素没有margin-top或margin-bottom，也就是说，在行内元素上设置margin-top或margin-bottom是不起作用的。

如何阻止margin合并

• 父子margin合并

给父元素添加 overflow：hidden；display:flex; padding，border，这样就能阻止合并。

• 兄弟margin合并

兄弟合并可以用display:inlin-block;消除。

4.解决浮动高度塌陷问题（在父元素添加overflow：hidden）

当我们不给父元素设置高度，子元素设置了浮动的时候，会发生高度塌陷，代码和效果图如下。

效果图：

CSS代码
.father {
    border: 5px solid rgb(91, 243, 30);
    width: 460px;
    
}
.child{
    width: 200px;
    height: 200px;
    border:5px solid orange;
    float: left;
}

html代码
<div class="father">
    <div class="child"></div>
    <div class="child"></div>
</div>

当我们在父元素的样式中加入overflow：hidden，就能解决float高度塌陷问题。

CSS代码
.father {
    border: 5px solid rgb(91, 243, 30);
    width: 460px;
    overflow: hidden;
}
.child{
    width: 200px;
    height: 200px;
    border:5px solid orange;
    float: left;
}
?
html代码
<div class="father">
    <div class="child"></div>
    <div class="child"></div>
</div>

效果图就会发生变化