盒模型

[!info] related notes

• 相关概念: CSS MOC, CSS 0.5px 边框, [[css-sizing]]

在网页中，几乎所有的东西都是盒子。无论是标题、图片、视频，还是段落和按钮，在 CSS 类眼中，它们都是一个个矩形的盒子。

现在其实有，除了有很多一个矩形的盒子，然后这些矩形的盒子也是有不同类别的。常见的有快集盒子，然后还有行内盒子。 它们在页面布局中表现出来的特性也都是不一样的。然后之所以有这么多盒子，本质上是为了让各个元素能够—— 在页面中更优雅的布局，然后实现不同，或者说实现符合要求的布局吧。比如在最原始中， HTML 就是这些 CSS 和模型就- 设计是为了能够完美地表现出文字的排版。对于文字来说，或者说对一个纸张来说，它的宽度是固定的，但是它的高度可以—— 无穷高，它可以翻页，可以换一张纸写。所以的话，它的高度是不确定的。但是它的宽度是设置为根据内容的宽度来决定。

标准盒模型（content-box）

• 宽度（width）和高度（height） 仅包含 内容（content），不包括 padding、border、margin。
• 计算方式：

实际宽度 = width + padding-left + padding-right + border-left + border-right
实际高度 = height + padding-top + padding-bottom + border-top + border-bottom

• 示例：

.box {
width: 100px;
padding: 10px;
border: 5px solid black;
}

• 实际宽度 = 100px + 10px*2 + 5px*2 = 130px
• 实际高度 = 100px + 10px*2 + 5px*2 = 130px（假设 height: 100px）

2. IE盒模型（border-box）

• 宽度（width）和高度（height） 包含 内容（content）+ padding + border，但不包括 margin。
• 计算方式：

实际宽度 = width（已经包含 padding 和 border）
实际高度 = height（已经包含 padding 和 border）

• 示例：

.box {
box-sizing: border-box;
width: 100px;
padding: 10px;
border: 5px solid black;
}

• 实际宽度 = 100px（padding 和 border 不会额外增加宽度）
• 实际高度 = 100px（padding 和 border 不会额外增加高度）

---

如何切换盒模型？

通过 box-sizing 属性修改：

.box {
box-sizing: content-box; /* 标准盒模型（默认） */
box-sizing: border-box;/* IE盒模型 */
}

---

什么场景下选用哪种盒模型？

盒模型	适用场景	优点	缺点
标准盒模型（content-box）	需要精确控制内容尺寸的场景（如文本、图片）	计算直观，width 仅代表内容宽度	计算布局时需要考虑 padding 和 border，容易导致布局错乱
IE盒模型（border-box）	需要固定尺寸布局（如栅格系统、响应式设计）	width 直接包含 padding 和 border，布局计算更简单	可能影响某些需要精确内容尺寸的场景

推荐使用 border-box 的情况：

1. 响应式布局：更容易计算 width，避免 padding 和 border 撑大布局。
2. 栅格系统：如 Bootstrap、Tailwind CSS 默认使用 border-box。
3. 固定尺寸设计：如卡片、按钮等，希望 width 包含 padding 和 border。

推荐使用 content-box 的情况：

1. 精确控制内容尺寸：如文本排版、图片尺寸。
2. 旧版浏览器兼容（极少情况）。

---

最佳实践

大多数现代 CSS 框架（如 Bootstrap、Tailwind）默认使用 border-box，推荐全局设置：

* {
box-sizing: border-box;
}

这样可以让布局计算更直观，减少 padding 和 border 带来的额外宽度问题。

面试要点

来自 bfc-interview-question 的面试视角整理。

一句话回答

BFC 全称 Block Formatting Context，可以理解成一个相对独立的块级格式化上下文，内部布局不会直接影响外部，常用来处理浮动包裹、外边距塌陷和布局隔离问题。

面试时最常见的回答点

它有什么作用

• 清除或包裹内部浮动
• 阻止外边距塌陷
• 形成相对独立的布局区域

常见触发方式

• overflow: hidden/auto/scroll
• display: flow-root
• 绝对定位元素
• 浮动元素

最常见的使用场景

让父元素包住浮动子元素

这是最典型的场景之一。

避免相邻块级元素的 margin 合并

通过建立新的 BFC，可以把布局边界隔开。

面试里的常见误区

把 BFC 当成某个单独属性

BFC 不是属性，而是一种布局上下文。

只会背 overflow: hidden

更重要的是知道为什么要这么做，以及它解决什么问题。

最短记忆方式

BFC = 一块独立的块级布局区域。