This screencast is a part of our AtoZ CSS Series. You can find other entries to the series .

该截屏视频是我们的AtoZ CSS系列的一部分。 您可以在找到该系列的其他条目。

成绩单 (Transcript)

Every element on a web page is a box.

网页上的每个元素都是一个框。

We can describe the characteristics of these boxes using the CSS Box Model.

我们可以使用CSS Box Model描述这些盒子的特征。

Understanding this model and how different types of boxes lay out, is key when converting designs into a working website.

将设计转换为可正常使用的网站时，了解此模型以及不同类型的盒子的布局是关键。

例 (Example)

If I add a 1px solid red border to everything on my website using the * selector, you can see how each element or module is made up of many, nested boxes.

如果使用*选择器在网站上的所有内容上添加一个1px solid red线边框，您将看到每个元素或模块是如何由许多嵌套框组成的。

* {  border: 1px solid red;}

盒子模型属性 (Box Model Properties)

The key characteristics of a box can be defined with the properties: width, height, margin, padding and border. These are often referred to as the Box Model properties.

可以通过以下属性定义盒子的关键特征： width ， height ， margin ， padding和border 。 这些通常称为Box Model属性。

.box {  width: 400px;  height: 200px;  margin: 20px;  padding: 20px;  border: 10px solid #000;}

Sometimes background is included in this list but as background doesn’t change the shape or layout of a box, I’ve left it out in this case.

有时，此列表中包含background ，但是由于background不会更改框的形状或布局，因此在这种情况下将其省略。

We can model the behavior of these properties by drawing any element on the page as a diagram. This allows us to see how these box-model properties combine to give the element its form – and in turn how much space it takes up on the page.

我们可以通过在页面上绘制任何元素作为图表来对这些属性的行为进行建模。 这使我们可以看到这些框模型属性如何组合以赋予元素其形式-进而占用页面多少空间。

计算尺寸 (Calculating Dimensions)

By default, the computed width of a box is calculated from the sum of its width, horizontal padding and horizontal border. The computed height is the sum of the height and vertical padding and borders. The margin applies spacing around the outside of the box but doesn’t add to the computed width or height.

默认情况下，盒子的计算宽度是根据其宽度，水平填充和水平边框之和计算得出的。 计算的高度是高度与垂直填充和边框之和。 边距在框的外部应用间距，但不增加所计算的宽度或高度。

So, given a box that has a width of 400px and a height of 200px, padding of 20px on all sides and a border of 5px all round – the width of the box is actually 400 + 5 + 20 + 20 + 5 = 450px and the height is 250px not 200.

因此，给定一个宽度为400像素，高度为200像素的框，所有边距均为20像素，边框为5像素，框的宽度实际上为400 + 5 + 20 + 20 + 5 = 450px，并且高度是250px而不是200。

This is a trivial calculation with nice round numbers but it can get much more complex when dealing with multiple units and different values on each side.

这是一个简单的计算，具有很好的舍入数字，但是当处理多个单位和每侧不同的值时，它会变得更加复杂。

How wide is this box, for example?

例如，这个盒子有多宽？

.box {  width: 960px;  margin: 20px auto;  padding: 0 1em 2em 3em;  border: 5px solid #000;}

Sorry, I’m lazy – that requires far too much thinking and takes far too long. Fortunately, there’s a simpler way…

抱歉，我很懒-需要太多思考，并且花费太长时间。 幸运的是，有一种更简单的方法……

装箱尺寸 (Box-sizing)

We can make the value of width – the width property – equal the computed width by using a different sizing model for our boxes.

通过为框使用不同的尺寸模型，我们可以使width的值( width属性)等于计算出的宽度。

* {  -moz-box-sizing: border-box;       box-sizing: border-box;}

Using the box-sizing property with the value of border-box gives us a much more intuitive box model. This property is still prefixed in recent versions of Firefox so needs the -moz vendor prefix.

通过将box-sizing属性与border-box的值一起使用，可以为我们提供更加直观的盒子模型。 该属性在Firefox的最新版本中仍然是前缀，因此需要-moz供应商前缀。

Now, when we create a box with a certain width, the padding and borders are added to the inside, meaning no more fiddly calculations are needed.

现在，当我们创建一个具有一定宽度的盒子时，将填充和边框添加到内部，这意味着不再需要繁琐的计算。

Before the box-sizing property was added to CSS, this sizing model was actually used by old versions of IE when it entered “quirks mode”. Now we can use this sizing model intentionally in all modern browsers and IE8 and up.

在将box-sizing属性添加到CSS之前，旧版本的IE在进入“快速模式”时实际上已使用此大小调整模型。 现在，我们可以在所有现代浏览器和IE8及更高版本中有意使用此大小调整模型。

演示版 (Demo)

For an interactive demo of the box-model, check out this site I made.

有关盒模型的交互式演示，请查看我制作的此站点。

It allows you to see the effect of changing box model properties like width and height, margin, padding, border, etc. and also the difference in computed dimensions between the default sizing model content-box and the more intuitive border-box model.

它使您可以看到更改框模型属性(如width和height ， margin ， padding ， border等)的效果，以及默认大小调整模型content-box和更直观的border-box模型之间的计算尺寸差异。

It also generates the code necessary to make an element with these characteristics, including the most efficient shorthand for margin and padding.

它还生成使元素具有这些特征所需的代码，包括最有效的边距和填充速记。

Go take a look at: .

去看看： : 。

Watch out for our Quick Tip article coming soon!

请留意即将发布的“快速提示”文章！

翻译自: