Appearance
盒模型：content-box、border-box 与尺寸计算
主题边界
- 盒模型定义了一个元素的 content、padding、border、margin 如何参与尺寸计算与布局占位。
- 讨论它时要区分声明尺寸、可见绘制区域和实际参与布局的外部尺寸。
机制与流程
- 默认
box-sizing: content-box下，width和height只作用于 content box，padding 与 border 会叠加到最终占位尺寸之外。 box-sizing: border-box把 padding 与 border 收进声明宽高，内容区会相应缩小，因此更适合组件化布局。- margin 不属于盒子内部，而是相邻盒子之间的外部间距；垂直普通流中的 margin 还可能发生折叠。
关键差异
- 标准盒模型与
box-sizing的差异在于尺寸声明落在哪一层，不是浏览器兼容性意义上的“怪异模式”和“标准模式”复述。 - Flex item、grid item、绝对定位元素虽然都遵守盒模型，但可用空间分配规则不同。
边界条件
- 只把
width: 100%看成最终占位宽度容易出错，因为 padding、border 与滚动条都会影响可见结果。 - 替换元素、表格布局和
min-content/max-content约束下，尺寸计算不会只看声明的width。
工程落点
- 组件库通常全局启用
border-box，目的是让尺寸心智模型更稳定，降低嵌套布局的意外溢出。 - 排查横向滚动条和卡片对不齐问题时，先确认尺寸是 content 在长，还是 padding/border 被额外叠加。