box-sizing常用的属性有哪些？分别有什么作用？

box-sizing 属性用于控制元素的盒子模型如何计算总宽度和总高度。它有两个主要值：

• content-box (默认值): 这是标准的盒子模型。元素的宽度和高度只包括内容区域。 padding, border 和 margin 会被添加到这个宽度和高度之外，使元素的总尺寸变大。

  width = content width
  height = content height
  total width = width + padding-left + padding-right + border-left + border-right
  total height = height + padding-top + padding-bottom + border-top + border-bottom
  

• border-box: 在这个模型中，元素的宽度和高度包括内容区域、padding 和 border。 margin 仍然在宽度和高度之外。 这意味着，即使你添加 padding 和 border，元素的总大小也不会改变，而是会压缩内容区域来容纳 padding 和 border。

  width = content width + padding-left + padding-right + border-left + border-right
  height = content height + padding-top + padding-bottom + border-top + border-bottom
  total width = width
  total height = height
  

哪个更好用？

border-box 通常被认为更直观和易于使用，尤其是在布局方面。原因如下：

• 更易于计算尺寸: 你设定的宽度就是元素最终的宽度，无需考虑 padding 和 border 的影响。
• 简化布局: 更容易创建具有固定宽度和高度的布局，因为你不必不断地计算 padding 和 border 的影响。
• 响应式设计更友好: 在响应式设计中，使用 border-box 可以更容易地控制元素的尺寸，因为它们不会随着 padding 和 border 的变化而改变。

许多 CSS 框架和重置样式表（例如 Normalize.css）都会将 box-sizing 设置为 border-box，以便于开发。 你可以在你的 CSS 中添加以下代码，将其应用于所有元素：

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

这行代码会将 box-sizing: border-box; 应用于所有元素，包括伪元素 ::before 和 ::after，确保所有元素都使用相同的盒子模型。

除了 content-box 和 border-box 之外，还有一个不太常用的值：

• inherit: 该值会继承父元素的 box-sizing 属性值。

总而言之，虽然 content-box 是默认值，但 border-box 在现代 Web 开发中更为常用，因为它更易于使用和维护。