前言
在网页布局中，万物皆“盒子”。理解盒子模型的构造及其不同模式的差异，是实现精准布局的前提。本文将从基础构成到进阶属性，带你全方位梳理 CSS 盒子模型。
一、 盒子的基本构成
一个完整的 CSS 盒子由内到外由以下四个部分组成：
- Content（内容） ：存放文本或图片的区域。
- Padding（内边距） ：内容与边框之间的透明区域。
- Border（边框） ：包裹在内边距和内容外的线。
- Margin（外边距） ：盒子与其他元素之间的距离。
1. Margin 的简写规则（顺时针原则）
- 1 个值：
all(四周) - 2 个值：
top/bottom,left/right - 3 个值：
top,left/right,bottom - 4 个值：
top,right,bottom,left（上右下左，顺时针）
2. Border 的复合属性
语法：border: width style color; 例如：border: 2px solid #333;
二、 两大盒模型：标准 vs IE
通过 box-sizing 属性，我们可以切换盒子的计算方式。这是开发中处理“明明设置了宽度，盒子却被撑大”问题的关键。
1. 标准盒模型 (content-box)
- 默认值。
- 计算公式：
实际宽度 = width。
2. IE 盒模型 / 怪异盒模型 (border-box)
- 推荐使用。
- 计算公式：
实际宽度 = width + padding + border - 优势：设定好的宽度不会被
padding撑开，更符合人的直觉。
/* 全局推荐方案 */
* {
box-sizing: border-box;
}
三、 外边距合并与合并高度
在普通文档流中，两个垂直相邻的块级元素，其 margin-top 和 margin-bottom 会发生折叠（Collapse）。
1. 合并规则
- 同号：取两者中的较大值。
- 异号：取两者相加之和。
2. 经典面试：如何防止外边距合并？
这通常涉及触发 BFC（块级格式化上下文） ：
- 为元素设置
display: inline-block。 - 设置
overflow不为visible（如hidden）。 - 使用
flex或grid布局（它们内部的子元素不会发生 margin 合并）。
四、 现代布局新特性
1. aspect-ratio（宽高比）
现在只需要一个属性即可设置元素宽高比：
.video-card {
width: 100%;
aspect-ratio: 16 / 9; /* 自动根据宽度计算高度 */
background: #000;
}
五、 面试模拟题
Q1：为什么设置 width: 100% 后再加 padding 页面会出现滚动条？如何解决？
参考回答： 因为默认是标准盒模型 (content-box)，100% 宽度加上 padding 后的总宽度超过了父容器。 解决方案：将该元素的 box-sizing 设置为 border-box。
Q2：什么是 BFC？它与盒模型有什么关系？
参考回答： BFC 是页面上的一个独立渲染区域。在 BFC 内部，盒子的布局不会影响到外部。利用 BFC 可以：
- 防止垂直外边距合并。
- 清除内部浮动（父元素高度塌陷问题）。
- 防止元素被浮动元素遮盖。
Q3：margin: auto 为什么能实现水平居中？
参考回答： 在块级元素设定了固定 width 的情况下，将左右 margin 设置为 auto，浏览器会自动平分剩余的可用空间，从而使元素居中。注意：垂直方向的 margin: auto 只有在 Flex 布局或绝对定位下才有效。
