Skip to content

盒尺寸计算方式

标准盒模型

width 只算内容区,paddingborder 会往外扩,总宽度容易心算错。

border-box

box-sizing: border-box 时,width 包含 paddingborder,布局更直观。

小结

很多项目全局设为 border-box,减少宽度计算负担。

css
*,
*::before,
*::after {
  box-sizing: border-box;
}