box-sizing: border-box: 它是什么，它的用途是什么？

CSS 中 box-sizing 属性的border-box 值将永远改变前端的生命。在我们的设计中使用填充是一件麻烦事。为什么？根据盒子的型号。什么型号的盒子？CSS 之一。但那是什么？好吧，如果你有时间想看视频，我会告诉你的。

box-sizing 属性有什么作用？

CSS 属性box-sizing指示应如何计算元素的测量值。这看起来微不足道，但并非如此，因为默认情况下CSS 认为框的宽度和高度来自widthandheight属性。这是什么意思？好吧，如果你添加一个padding或一个border框的渲染大小将是：宽度+填充+边框。

在下面的示例中，我们将有一个 290px 宽的框，因为： 250px 宽度 + (10px * 2) 填充 + (10px * 2) 边框

div {
  width: 250px;
  border: 10px;
  padding: 10px;
}

虽然我们在那里看不到它，但该物业box-sizing负责说明应该如何计算。在这种情况下，它使用 value content-box，因为它是它的默认值。

padding现在这是非常有问题的，因为如果元素有或，则很难预测地计算元素的宽度或高度border。为了解决这个问题，我们有 value border-box。

box-sizing:border-box 的值是什么？

为了简化盒子的计算，我们可以使用border-box今天的浏览器完全支持的值（我们必须回到 Internet Explorer 8 看看哪里不支持）。

border-box中的值box-sizing使padding和border成为框宽度计算的一部分，之后它们不会相加。

在下面的示例中，我们将有一个 250px 宽的框，并且padding和border已经是width元素计算的一部分：

div {
  box-sizing: border-box;
  width: 250px;
  border: 10px;
  padding: 10px;
}

有了这个，我们大大简化了我们的生活，因为如果我们想要一个250px以这种方式测量的盒子，我们将确保无论我们使用边框还是填充，它都会是我们指定的尺寸。布局给我们带来了多大的麻烦！😆

如何使用 box-sizing:border-box?

许多 CSS 重置或规范化器已经包含了您的页面使用这种类型的 CSS 框模型计算所必需的 CSS，但是如果出于某种原因，您需要手动将其添加到您的项目中，最好按如下形式使用它：

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

这样做是让您html使用它border-box，并且元素继承此值，但如果需要，可以将其更改为另一个值（尽管您不太可能使用它，谁知道您是否加载了某些第三方组件）。