CSS查缺补漏

box-sizing

默认值是content-box，width/height 只算content区域，padding 和 border 向外叠加。

div {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
}
/* 实际占宽 = 200 + 20*2 + 5*2 = 250px */

写宽200，实际元素宽度250。布局容易算错。

box-sizing: border-box，width/height 算到 border 层，padding 和 border 往内挤。

div {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid black;
}
/* content 实际宽度 = 200 - 20*2 - 5*2 = 150px */

因为border-box更符合直觉，所以几乎成为行业标准。几乎所有 CSS 框架（Bootstrap、Tailwind）和重置样式表都会写

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