CSS Box-Sizing属性如何控制元素的大小

The CSS box-sizing property is used to adjust or control the size of any element that accepts a width or height. It specifies how to calculate the total width and height of that element.

CSS box-sizing属性用于调整或控制任何接受width或height元素的大小。 它指定如何计算该元素的总width和height 。

In this article, I will explain how the CSS box-sizing property can be used to control the size of elements.

在本文中，我将解释如何使用CSS box-sizing属性来控制元素的大小。

先决条件 (Prerequisites)

• Basic CSS knowledge.
  基本CSS知识。
• Code editor.
  代码编辑器。
• Web browser.
  网页浏览器。

没有CSS框大小调整属性 (Without the CSS box-sizing property)

If you look at the code snippet below, you will notice that there are two div elements with the same width and height – but the first div appears to be bigger than the second div.

如果查看下面的代码片段，您会注意到有两个div元素具有相同的width和height -但是第一个div似乎大于第二个div 。

That's pretty strange, right? Because why would anyone assign the same width and height to two div elements unless they ideally wanted those elements to be the same?

那很奇怪，对不对？ 因为为什么除非有人理想地希望这些元素相同，否则为什么有人会为两个div元素分配相同的宽度和高度？

Keep reading to find out why the two div elements are different👨🏾‍💻👩🏽‍💻.

继续阅读以找出两个div元素为何不同的原因。

By default, the CSS box model calculates any element that accepts a width or height in this format:

默认情况下， CSS框模型以这种格式计算任何接受宽度或高度的元素：

• width + padding + border = rendered or displayed width of the element's box.
  width + padding + border =渲染或显示的元素框的宽度。
• height + padding + border = rendered or displayed height of the element's box.
  height + padding + border =渲染或显示的元素框的高度。

This means that whenever you add padding or border to the element, the size of an element will appear bigger than the size originally assigned to it. This is because the content of that element includes the width and height properties but does not include the padding or border property.

这意味着，每当您向元素添加padding或border时，元素的大小就会显得大于最初为其分配的大小。 这是因为该元素的内容包括width和height属性，但不包括padding或border属性。

Still don't get it yet? Look at the code snippet below to see the actual calculation.

还是不明白吗？ 查看下面的代码片段以查看实际计算。

.first-box {
  width: 200px;
  height: 100px;
  border: 8px solid blue;
  padding: 20px;
  background: yellow;
  /* Total width: 200px + (2 * 20px) + (2 * 8px) = 256px
     Total height: 100px + (2 * 20px) + (2 * 8px) = 156px */
}

.second-box {
  width: 200px;
  height: 100px;
  border: 8px solid blue;
  background: yellow;
  /* Total width: 200px + (2 * 8px) = 216px
     Total height: 100px +  (2 * 8px) = 116px */
}

As seen in the code snippet, CSS adds the padding and border to the width and height already specified. It displays the total value as the size of the element, thereby ignoring the actual size you assigned to the div.

如代码片段所示，CSS将padding和border添加到已指定的width和height 。 它将总值显示为元素的大小，从而忽略您分配给div的实际大小。

使用CSS box-sizing属性 (With the CSS box-sizing Property)

With the box-sizing property, the default behaviour explained above can be changed.  

使用box-sizing属性，可以更改上述默认行为。

Using the same code, let's add the box-sizing property and set it to border-box and see if we can actually control the size.

使用相同的代码，让我们添加box-sizing属性并将其设置为border-box ，看看是否可以实际控制大小。

You must have noticed that the two div elements now have the same size.

您必须已经注意到，两个div元素现在具有相同的大小。

句法 (Syntax)

box-sizing:content-box;
box-sizing:border-box;

内容框 (content-box)

This is the default behaviour of the box-sizing property. content-box doesn't take into account the width and height specified for an element.

这是box-sizing属性的默认行为。 content-box不考虑为元素指定的width和height 。

That is, if you set an element's width to 200 pixels, then set the border to 8 pixels and the padding to 20 pixels, the size of the border and padding will be added to the final rendered width. This makes the element wider than 200 pixels.

也就是说，如果将元素的width设置为200像素 ，然后将边框设置为8像素 ，将填充设置为20像素 ，则border和padding的大小将添加到最终渲染的宽度中。 这使元素的宽度超过200像素 。

div{
  box-sizing:content-box;
  width: 200px;
  border: 8px solid blue;
  padding: 20px;
  background: yellow;
  /* Total width: 200px + (2 * 20px) + (2 * 8px) = 256px*/
}

As seen in the code snippet above, the size of this div element has automatically increased to 256px even when it was originally set to 200px.

如上面的代码片段所示，即使最初将div元素设置为200px，它的大小也已自动增加到256px。

边框 (border-box)

When you set the box-sizing property to border-box, it tells the browser to account for any border and padding assigned to the element's width and height.

将box-sizing属性设置为border-box ，它告诉浏览器考虑分配给元素宽度和高度的任何border和padding 。

That is, if you set an element's width to 200 pixels, that 200 pixels will include any border or padding you add, and the content box will shrink to absorb that extra width.

也就是说，如果将元素的width设置为200像素 ，则该200像素将包括您添加的任何边框或填充，内容框将缩小以吸收该额外宽度。

div{
  box-sizing:border-box;
  width: 200px;
  border: 8px solid blue;
  padding: 20px;
  background: yellow;
  /* Total width: 200px - (2 * 20px) - (2 * 8px) = 144px*/
}

As seen in the code snippet above, the size of this div element has automatically reduced to 144px even when it was originally set to 200px.

如上面的代码片段所示，即使最初将div元素设置为200px，它的大小也已自动减小为144px。

Let's merge both code snippets and see exactly how the box will look with content-box and border-box.

让我们合并两个代码片段，并确切地看到content-box和border-box外观。

结论 (Conclusion)

With the CSS box-sizing property, you have the ability to set how the size of elements in your code are calculated.

使用CSS box-sizing属性，您可以设置如何计算代码中元素的大小。

According to the MDN, it is often useful to set box-sizing to border-box when you're laying out elements. This makes dealing with the sizes of elements much easier, and generally eliminates a number of pitfalls you can stumble on while laying out your content.  

根据MDN ，在布置元素时，将box-sizing设置为border-box通常很有用。 这使得处理元素的大小变得更加容易，并且通常消除了在布局内容时可能会遇到的许多陷阱。

On the other hand, when you're using position: relative or position: absolute, using box-sizing: content-box allows the positioning values to be relative to the content, and independent of changes to border and padding sizes. Sometimes you might want this.

另一方面，当您使用position: relative或position: absolute ，使用box-sizing: content-box允许定位值相对于内容，并且与边框和填充大小的更改无关。 有时您可能想要这个。

That's all folks! I hope this was helpful. If so, please share this article and follow me on Twitter.

那就是所有人！ 我希望这可以帮到你。 如果是这样，请分享这篇文章，并在Twitter上关注我。

翻译自: https://www.freecodecamp.org/news/how-to-use-the-css-box-sizing-property/