CSS Box大小

The default behavior of browsers when calculating the width of an element is to apply the calculated width and height to the content area, without taking any of the padding, border and margin in consideration.

浏览器在计算元素宽度时的默认行为是将计算出的宽度和高度应用于内容区域 ，而不考虑任何填充，边框和边距。

This approach has proven to be quite complicated to work with.

实践证明，这种方法非常复杂。

You can change this behavior by setting the box-sizing property.

您可以通过设置box-sizing属性来更改此行为。

The box-sizing property is a great help. It has 2 values:

box-sizing属性非常有帮助。 它具有2个值：

• border-box

  border-box

• content-box

  content-box

content-box is the default, the one we had for ages before box-sizing became a thing.

content-box是默认选项，在box-sizing成为一种东西之前，我们已经使用了很长时间。

border-box is the new and great thing we are looking for. If you set that on an element:

border-box是我们正在寻找的新奇事物。 如果在元素上进行设置：

.my-div {
  box-sizing: border-box;
}

width and height calculation include the padding and the border. Only the margin is left out, which is reasonable since in our mind we also typically see that as a separate thing: margin is outside of the box.

宽度和高度的计算包括填充和边框。 仅保留了边距，这是合理的，因为在我们看来，我们通常也将其视为单独的内容：边距不在框内。

This property is a small change but has a big impact. CSS Tricks even declared an international box-sizing awareness day, just saying, and it’s recommended to apply it to every element on the page, out of the box, with this:

此属性变化不大，但影响很大。 CSS Tricks甚至宣布了国际包装大小意识日 ，并建议将其应用到页面上的每个元素中，即开即用：

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

翻译自: https://flaviocopes.com/css-box-sizing/