css中的 box-sizing: border-box

box-sizing: border-box 是 CSS 中的一个盒子模型属性，用于指定元素的盒子模型的计算方式。默认的盒子模型是 content-box，而使用 border-box 则表示元素的宽度和高度包括了元素的边框和内边距，而不仅仅是内容的宽度和高度。

在默认的 content-box 盒子模型中，宽度和高度仅包括内容区域，而边框和内边距会额外增加到元素的宽度和高度之外。这可能会导致布局计算变得更为复杂，特别是在设计响应式布局时。

使用 box-sizing: border-box 可以使盒子模型更加直观和便于布局。例如，如果你设置一个元素的宽度为 100px，那么无论你添加了多少边框和内边距，这个元素的总宽度都会保持为 100px。

/* 默认的盒子模型：content-box */
.element {
  width: 100px;
  padding: 10px;
  border: 5px solid black;
  /* 实际宽度为 100px（width）+ 20px（padding）+ 10px（border）= 130px */
}

/* 使用 border-box 盒子模型 */
.element {
  box-sizing: border-box;
  width: 100px;
  padding: 10px;
  border: 5px solid black;
  /* 实际宽度始终为 100px，边框和内边距会占用部分空间 */
}

总体而言，box-sizing: border-box 的使用可以简化布局计算，使得样式设置更加直观和方便。