Appearance
盒模型：content-box、border-box 与尺寸计算
主题定位
盒模型不是背四层结构，而是理解宽高声明如何映射到布局尺寸。
- 盒模型不是背四层结构，而是理解宽高声明如何映射到布局尺寸
- 盒模型定义了一个元素的 content、padding、border、margin 如何参与尺寸计算与布局占位
- 讨论它时要区分声明尺寸、可见绘制区域和实际参与布局的外部尺寸
- 只把 width: 100% 看成最终占位宽度容易出错，因为 padding、border 与滚动条都会影响可见结果
关键概念拆分
对象一
对象一 先看职责边界，再看生命周期、数据形态和与其他对象的协作关系。 对象一 的差异最终会体现在 布局系统、渲染代价、样式覆盖 这几个维度。 对象一 讲清适用边界、失效条件和代价结构，结论才有技术含量。
对象二
对象二 先看职责边界，再看生命周期、数据形态和与其他对象的协作关系。 对象二 的差异最终会体现在 布局系统、渲染代价、样式覆盖 这几个维度。 对象二 讲清适用边界、失效条件和代价结构，结论才有技术含量。
差异对照与适用场景
- 盒模型不是背四层结构，而是理解宽高声明如何映射到布局尺寸
- 盒模型定义了一个元素的 content、padding、border、margin 如何参与尺寸计算与布局占位
- 讨论它时要区分声明尺寸、可见绘制区域和实际参与布局的外部尺寸
- 只把 width: 100% 看成最终占位宽度容易出错，因为 padding、border 与滚动条都会影响可见结果
- 默认 box-sizing: content-box 下，width 和 height 只作用于 content box，padding 与 border 会叠加到最终占位尺寸之外
- box-sizing: border-box 把 padding 与 border 收进声明宽高，内容区会相应缩小，因此更适合组件化布局
工程建议与边界
- 盒模型不是背四层结构，而是理解宽高声明如何映射到布局尺寸
- 盒模型定义了一个元素的 content、padding、border、margin 如何参与尺寸计算与布局占位
- 讨论它时要区分声明尺寸、可见绘制区域和实际参与布局的外部尺寸
- 只把 width: 100% 看成最终占位宽度容易出错，因为 padding、border 与滚动条都会影响可见结果
- 默认 box-sizing: content-box 下，width 和 height 只作用于 content box，padding 与 border 会叠加到最终占位尺寸之外
问答设计及延伸
标准回答
回答 盒模型：content-box、border-box 与尺寸计算 时，先定义 对象一、对象二 各自解决的问题，再比较它们在 布局系统、渲染代价、样式覆盖 上的差异，最后给出选型边界和工程代价。
追问拆解
- 盒模型：content-box、border-box 与尺寸计算 与“BFC：块级格式化上下文与普通流隔离”的边界关系
- 盒模型：content-box、border-box 与尺寸计算 与“重排、重绘与合成：渲染成本落在什么阶段”的边界关系
- 跨标签页、跨域、多端协作场景下的结论变化
- 维护成本上升后的优先级调整
容易失分的点
- 只给“哪个好”的结论，不先拆对象
- 只报 API 或术语，不解释运行时行为和代价
- 缺少真实场景，导致结论过度绝对
项目映射
- 结合真实系统说明 对象一 到 对象二 分别落在哪段链路
- 补充未选方案的放弃原因和约束差异
- 补充线上问题、治理动作和验证结果