怪异盒模型

box-sizing属性用于控制元素的盒模型如何计算宽度和高度。它有两个可选的值：content-box和border-box。

content-box（默认值）：元素的宽度和高度只包括内容区域，不包括边框和内边距。这意味着如果您设置元素的宽度为100px，那么元素的实际宽度将会是100px + 内边距 + 边框。
border-box：元素的宽度和高度包括内容区域、内边距和边框。这意味着如果您设置元素的宽度为100px，那么元素的实际宽度将会是100px，包括内边距和边框在内。

示例：

/* 使用 content-box */
.element {
  width: 100px;
  padding: 10px;
  border: 1px solid black;
  box-sizing: content-box;
}

/* 使用 border-box */
.element {
  width: 100px;
  padding: 10px;
  border: 1px solid black;
  box-sizing: border-box;
}

当您设置box-sizing: border-box;时，元素的总宽度和高度将包括边框和内边距，从而更容易控制元素的大小和布局。这对于开发响应式设计和布局时特别有用，因为您可以更方便地控制元素的盒模型行为。

总结

要注意，如果我们的盒子模型是border-box 当你设置padding 和 margin 的时候，你要意识到这也是盒子模型的一部分，当你增大p和m的时候，盒子会变大的。

我更喜欢border-box 这个更符合直觉

总结​

总结