盒模型
盒模型类型
盒模型分为两种，如下图所示： 一是标准盒模型：box-sizing: content-box，width height + padding + margin + border = 盒子大小
二是IE盒模型：box-sizing: border-box width 和 height 决定了整个盒子的大小，后续的操作都是在width和height的范围以内
行内与块级
读者可以观察下图：
这里我们让div成为行内元素，span成为块级元素，由于inline元素的宽度和高度属性不会生效div元素的实际高度由内边距和其内容决定，所以span会突破了div的border
浮动
- 这段代码将
.flex元素设置为一个 Flex 容器，使其子元素（即.box元素）按照 Flexbox 布局模型排列。
网格GFC
display: grid;：将.grid-container设置为网格容器。grid-template-columns: auto auto auto;：定义了三列等宽的网格布局。gap: 10px;：设置网格单元格之间的间隔为 10px。padding: 10px;：设置网格容器的内边距为 10px
BFC Block Formating Context
BFC 的作用
BFC（块级格式化上下文）是一个独立的渲染区域，具有以下特性：
- 内部的盒子会在垂直方向，一个接一个地放置。
- BFC 内部的盒子垂直方向的距离由
margin决定。 - BFC 的区域不会与浮动元素的盒子重叠。
- BFC 是一个独立的容器，外面的元素不会影响里面的元素，反之亦然。
- 计算 BFC 的高度时，浮动元素也会参与计算。
外边距重叠（Margin Collapsing）
在没有 BFC 的情况下，相邻块级元素的垂直外边距会发生重叠，重叠后的外边距等于其中较大的一个。例如，如果没有 BFC，.box1 的 margin-bottom: 50px 和 .box2 的 margin-top: 30px 会重叠，结果是两个盒子之间的距离为 50px。
结果
由于设置了 overflow: hidden; 触发了 BFC，.box2 的父元素成为一个新的 BFC，这样 .box1 和 .box2 的外边距不会重叠。因此，两个盒子之间的距离是 .box1 的 margin-bottom: 50px。
