# 盒模型 **CSS盒模型分成W3C标准盒模型和IE模型** - W3C标准盒模型(默认)：`box-sizing: content-box` - `padding`和`border`都会撑开盒子，改变盒子的宽度高度 - 总宽度：`width` + 左右`border`宽度 + 左右`padding`宽度 + 左右`margin`宽度 - 内盒宽度：`width` + 左右`border`宽度 + 左右`padding`宽度 - IE盒模型：`box-sizing: border-box` - `padding`和`border`都不会撑开盒子，不会改变盒子的宽度，盒子的内容会相应缩小 - 总宽度：`width` + 左右`margin`宽度 - 内盒宽度： `width` **盒子模型布局稳定性** 我们根据稳定性来分，建议如下： 按照 优先使用宽度，其次使用内边距，再次外边距。 即：`width > padding > margin` 原因： （1）`margin` 会有外边距合并 （2）`padding ` 会影响盒子大小，需要进行加减计算（麻烦） 其次使用 （3）`width` 没有问题我们经常使用宽度剩余法来做 # padding margin 百分比 当`margin`和`padding`的值设置为百分比时，是**相对于最近的块级或内联块父元素`width`（非总宽度）**的相应百分比的值。 即使是`margin-top`、`margin-bottom`、`padding-top`、`padding-bottom`，设置为百分比时也是以最近块级父元素的`width`（非总宽度）为基准，而非`height`。 # margin塌陷问题 - 相邻块元素垂直外边距的合并 当上下相邻的两个块元素相遇时，如果上面的元素有下外边距`margin-bottom`，下面的元素有上外边距`margin-top`，则他们之间的垂直间距不是`margin-bottom`与`margin-top`之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。 解决方法： - 将其放在不同的 BFC 父容器中 ```html
.container { overflow: hidden; } .child { width: 100px; height: 1
absolute`、`fixed` BFC作用： 1. BFC解决`margin`塌陷问题 2. BFC解决浮动元素引起父元素高度塌陷问题 在通常情况下父元素的高度会被子元素撑开，而如果父元素没有设置高度，其子元素均为浮动元素，此时父元素会发生了高度坍塌，上下边界重合，即浮动元素无法撑起父元素。这时就可以用BFC来清除浮动了，将父元素整体设置为BFC环境 3. BFC解决元素被浮动元素覆盖问题 如果有两个相邻元素，第一个元素左浮动，第二个元素不设置浮动，这时候第二个元素会有部分被浮动元素所覆盖(但是文本信息不会被浮动元素所覆盖)。 如果想避免元素被覆盖，可触发第二个元素的 BFC 特性，在第二个元素中加入 `overflow: hidden`即可 # 参考文档 [10 分钟理解 BFC 原理]