css的box模型_管理CSS Box模型

客官°小女子只卖身不卖艺 2022-12-03 09:47 187阅读 0赞

css的box模型

*The following is an extract from our book, [CSS Master][], written by Tiffany Brown. Copies are sold in stores worldwide, or you can buy it in ebook form [here][CSS Master].*

*以下是蒂芙尼·布朗(Tiffany Brown)所著《 [CSS Master》][CSS Master]一书的摘录。* *副本在世界各地的商店中都有出售，您也可以在[这里][CSS Master]以电子书的形式购买。*

Perhaps the most important point to understand about CSS is this: **Everything is a box**. More specifically, every element in a document generates a box. This box may be a block-level box, or it may be an inline-level box. The box type determines how the element affects page layout.

理解CSS的最重要一点可能是： **一切都是一个盒子** 。 更具体地说，文档中的每个元素都会生成一个框。 此框可以是块级框，也可以是内联级框。 框类型确定元素如何影响页面布局。

Whether or not an element creates a box and which type of box it creates will depend on the markup language. CSS developed as a way to style HTML documents so, as a result, much of the CSS visual rendering model is rooted in HTML’s distinction between block-level and inline elements. By default, elements such as `p` and `section` create block-level boxes but `a`, `span`, and `em` create inline boxes. SVG, on the other hand, does not use the box model, so most layout-related CSS properties fail to work with SVG.

一个元素是否创建一个盒子以及它创建哪种盒子取决于标记语言。 CSS作为一种样式化HTML文档的方式而开发，因此，许多CSS视觉呈现模型都植根于HTML在块级元素和内联元素之间的区别。 默认情况下，元件，例如`p`和`section`创建块级框，但`a` ， `span` ，和`em`创建行内框。 另一方面，SVG不使用盒模型，因此大多数与布局相关CSS属性都无法与SVG一起使用。

**Block-level** boxes create new blocks of content as can be seen in Figure 4.1. Block-level boxes are rendered vertically according to their source order and (except for tables) expand to fill the available width of their containing element. This is known as **normal flow**display value of `block`, `list-item`, `table`, or any of the `table-*` values (for example, `table-cell`).

**块级**框创建新的内容块，如图4.1所示。 块级框根据其源顺序垂直呈现，并且(表除外)扩展以填充其包含元素的可用宽度。 这称为`block` ， `list-item` ， `table`或任何`table-*`值的**正常流**显示值(例如`table-cell` )。

![alt][]

Figure 4.1. Block-level boxes featuring h1, p, ul, and table elements within a containing element (gray area)

图4.1。 具有包含元素(灰色区域)中的h1，p，ul和table元素的块级框

**Inline-level** boxes, by contrast, do not form new blocks of content. Instead, these boxes make up the lines inside a block box. They’re displayed horizontally and fill the width of the containing box, wrapping across lines if necessary, as shown in Figure 4.2. Inline-level boxes have a `display` value of `inline`, `inline-block`, `inline-table`, or `ruby`.

相比之下， **内联级别的**框不会形成新的内容块。 而是，这些框组成了块框内的行。 它们将水平显示并填充包含框的宽度，并在必要时跨行环绕，如图4.2所示。 内联级别的框的`display`值为`inline` ， `inline-block` ， `inline-table`或`ruby` 。

![alt][alt 1]

Figure 4.2. An example of an inline box with margin: 1em and padding: 5px applied

图4.2。 内联框的示例，其边距为：1em，填充为：5px

But how are the dimensions of the box calculated? Here is where it becomes more complicated. As seen in Figure 4.3, box dimensions are the sum of the box’s content area, plus its padding width, and border width [as defined in CSS2.][] The margin width creates a margin box for the element, and affects other elements in the document; however, the margin width has no effect on the dimensions of the box itself.

但是盒子的尺寸如何计算？ 这是变得更加复杂的地方。 如图4.3所示，框的尺寸是框的内容区域之和，加上其填充宽度和[CSS2中定义的][as defined in CSS2.]边框宽度之[和。][as defined in CSS2.] 边距宽度为元素创建一个边距框，并影响文档中的其他元素； 但是，边距宽度对盒子本身的尺寸没有影响。

![alt][alt 2]

Figure 4.3. The CSS 2.1 box model

图4.3。 CSS 2.1盒子模型

For instance, a `p` element with `width: 300px`, `padding: 20px`, and `border: 10px` has a calculated width of 360 pixels. That’s the sum of its width, left and right padding, and left and right `border-width` properties. To create an element that is 300 pixels wide with 20 pixels of padding and a 10 pixel border, the `width` needs to be `240px`. Most leading browsers calculated the width in just this way. Internet Explorer 5.5, however, did not.

例如， `width: 300px` ， `padding: 20px` ， `border: 10px`的`p`元素的计算宽度为360像素。 这是它的宽度，左右填充以及左右`border-width`属性的总和。 要创建一个宽度为300像素，填充为20像素，边框为10像素的元素，其`width`必须为`240px` 。 大多数领先的浏览器都是通过这种方式计算宽度的。 但是，Internet Explorer 5.5没有。

Instead, IE5.5 used the `width` property as the final arbiter of box dimensions, with padding and border drawn inside the box as seen in Figure 4.4. Both values were, in effect, subtracted from `width`, decreasing the size of the content area. Though it’s the exact opposite of the behavior defined in the specification, many web developers thought it was the more sensible approach.[\[10\]][10]

而是，IE5.5使用`width`属性作为框尺寸的最终仲裁者，在框内绘制填充和边框，如图4.4所示。 实际上，两个值都从`width`减去，从而减小了内容区域的大小。 尽管这与规范中定义的行为完全相反，但是许多Web开发人员认为这是更明智的方法。  [\[10\]][10]

![alt][alt 3]

Figure 4.4. The CSS 2.1 box model versus the old Internet 5.5 “quirks mode” box model

图4.4。 CSS 2.1框模型与旧版Internet 5.5“怪癖模式”框模型

Partly as a way to resolve these competing models, the CSS working group introduced the `boxâ€“sizing` property. It lets us choose the box model implementation that we prefer, and greatly simplifies calculations when working with responsive designs.

作为解决这些竞争模型的一种方法，CSS工作组介绍了`boxâ€“sizing`属性。 它使我们能够选择自己喜欢的盒模型实现，并在使用响应式设计时大大简化了计算。

###  选择具有`box-sizing`的盒子模型 **(**Choosing a Box Model with `box-sizing`**)** ###

The `box-sizing` property is defined in the [CSS Basic User Interface Module Level 3 specification.][] It has two possible values: `content-box` and `border-box`.

`box-sizing`属性在[CSS Basic User Interface Module Level 3规范中定义。][CSS Basic User Interface Module Level 3 specification.] 它有两个可能的值： `content-box`和`border-box` 。

Initially, the value of `box-sizing` is `content-box`. With this value, setting the `width` and `height` properties of an element affect the size of its content area. This matches the behavior defined by the CSS 2.1 specification, and it’s the default behavior in modern browsers (as presented in Figure 4.4).

最初， `box-sizing`的值是`content-box` 。 使用此值，设置元素的`width`和`height`属性会影响其内容区域的大小。 这符合CSS 2.1规范定义的行为，并且是现代浏览器中的默认行为(如图4.4所示)。

Setting the value of `box-sizing` to `border-box` creates a little bit of magic. Now, the values of `width` and `height` will be applied to the outer border edge instead of the content area. Borders and padding are drawn inside the element box, matching the old Internet Explorer 5.5 behavior. Let’s look at an example that mixes percentage widths and `px` units for padding and borders:

将`box-sizing`的值设置为`border-box`会产生一点魔力。 现在， `width`和`height`的值将应用于外边界边缘，而不是内容区域。 在元素框中绘制边框和填充，与旧的Internet Explorer 5.5行为匹配。 让我们看一个示例，该示例将百分比宽度和`px`单位混合用于填充和边框：

<div class="wrapper">
        <article>
        <h2>This is a headline</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing ... </p>
        </article>
        <aside>
        <h2>This is a secondary headline</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing ... </p>
        </aside>
    </div>

Both our `article` and `aside` elements have the following CSS applied, which gives us the layout shown in Figure 4.5 where the first element has a width of 60% while the second has a width of 40%:

我们的`article`和`aside`元素都应用了以下CSS，从而为我们提供了图4.5所示的布局，其中第一个元素的宽度为60％，第二个元素的宽度为40％：

article, aside {
        background: #FFEB3B;
        border: 10px solid #9C27B0;
        float: left; 
        padding: 10px;
    }   
    article {
        width: 60%;
    }
    aside {
        width: 40%;
    }

![alt][alt 4]

Figure 4.5. Elements with box-sizing: content-box

图4.5。 具有框大小的元素：内容框

By default, both `aside` and `article` have a `box-sizing` value of `content-box`. The `border-width` and `padding` values add 40 pixels to the width of each element, which throws off the 60%/40% split considerably. Now let’s add `box-sizing: border-box` to the `article` and `aside` elements:

默认情况下， `aside`和`article`的`box-sizing`值都是`content-box` 。 `border-width`和`padding`值为每个元素的宽度增加了40个像素，这大大降低了60％/ 40％的分割率。 现在让我们在`article` `box-sizing: border-box`添加`box-sizing: border-box`并`aside`元素：

article, aside {
        box-sizing: border-box;
    }

You can see the change in Figure 4.6: the elements have the same width, but the `box-sizing: border-box` means that the width includes the border and padding. Because the `width` property applies to the border edge instead of the content area, our elements now fit side by side.

您可以在图4.6中看到更改：元素具有相同的宽度，但是`box-sizing: border-box`表示宽度包括边框和填充。 由于`width`属性应用于边框边缘而不是内容区域，因此我们的元素现在可以并排放置。

![alt][alt 5]

Figure 4.6. Elements with box-sizing: border-box.

图4.6。 具有框大小的元素：边框。

I’d suggest that you use `box-sizing: border-box` in your projects. It makes life easier, as there’s no need to calculate the `width` value to account for the values of `padding` and `border`, and boxes behave more predictably.

我建议您在项目`box-sizing: border-box`使用`box-sizing: border-box` 。 由于不需要计算`width`值来考虑`padding`和`border`的值，因此它使生活更轻松，并且框的行为更加可预测。

The best way to apply `box-sizing: border-box` is with reset rules. The following example is from Chris Coyier’s CSS-Tricks post, [â€œInheriting `box-sizing` Probably Slightly Better Best-Practice][Inheriting _box-sizing_ Probably Slightly Better Best-Practice]:

最好应用`box-sizing: border-box`具有重置规则。 以下示例来自克里斯·科耶尔(Chris Coyier)CSS-Tricks帖子，“ [继承`box-sizing`可能略微更好的最佳实践”][Inheriting _box-sizing_ Probably Slightly Better Best-Practice] ：

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

This applies `border-box` sizing to every element by default, without affecting the box-sizing behavior of existing parts of your project. If you *know* that there will be no third-party or legacy components that rely on `content-box` behavior, you can simplify these rules:

默认情况下，这会将`border-box`大小应用于每个元素，而不会影响项目现有部分的框大小行为。 如果您*知道*不存在任何依赖于`content-box`行为的第三方或旧组件，则可以简化以下规则：

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

Table 4.1 shows curent bowser support for `box-size: border-box`

表4.1显示了当前boxser对`box-size: border-box`

<table>         
 <thead> 
  <tr> 
   <th>Internet Explorer</th> 
   <th>Firefox</th> 
   <th>Safari</th> 
   <th>Chrome</th> 
   <th>Opera</th> 
   <th>Android</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>8+</td> 
   <td>2+ (versions &lt; 29 require <code>-moz-</code> prefix)</td> 
   <td>3.1+ (versions &lt; 5.1 require <code>-webkit-</code> prefix)</td> 
   <td>4+ (versions &lt; 9 require <code>-webkit-</code> prefix)</td> 
   <td>10.1+</td> 
   <td>2.1+ (versions &lt; 4 require <code>-webkit-</code> prefix)</td> 
  </tr> 
 </tbody> 
</table>

<table>         
 <thead> 
  <tr> 
   <th> IE浏览器 </th> 
   <th> 火狐浏览器 </th> 
   <th> 苹果浏览器 </th> 
   <th> Chrome </th> 
   <th> 歌剧 </th> 
   <th> 安卓系统 </th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td> 8+ </td> 
   <td> 2+(低于29的版本需要<code>-moz-</code>前缀) </td> 
   <td> 3.1+(低于5.1的版本需要<code>-webkit-</code>前缀) </td> 
   <td> 4+(版本&lt;9需要<code>-webkit-</code>前缀) </td> 
   <td> 10.1+ </td> 
   <td> 2.1+(版本&lt;4需要<code>-webkit-</code>前缀) </td> 
  </tr> 
 </tbody> 
</table>

Managing the box model is just one ingredient in understanding how to create complex layouts. Let’s dig into layering elements in the next section.

管理盒子模型只是了解如何创建复杂布局的一种要素。 让我们在下一部分中深入研究分层元素。

> 翻译自: [https://www.sitepoint.com/managing-the-css-box-model/][https_www.sitepoint.com_managing-the-css-box-model]

css的box模型

[CSS Master]: https://www.sitepoint.com/premium/books/css-master
[alt]: /images/20221123/75a21cc864ac47299f670293e17f4021.png
[alt 1]: /images/20221123/ed59dcb2d5834d4891d0fc0c35c60707.png
[as defined in CSS2.]: http://dev.w3.org/csswg/css2/box.html
[alt 2]: /images/20221123/95b5bad66eae408f9e445da23f193552.png
[10]: https://www.sitepoint.com/managing-the-css-box-model/#ftn.d5e2734
[alt 3]: /images/20221123/baf0bb4e15b04925998d2b728a919792.png
[CSS Basic User Interface Module Level 3 specification.]: https://www.w3.org/TR/css3-ui/#box-sizing
[alt 4]: /images/20221123/a551e8ba57344cc680e5e184bb68d263.png
[alt 5]: /images/20221123/7413679eab914563b63457902700c4c5.png
[Inheriting _box-sizing_ Probably Slightly Better Best-Practice]: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
[https_www.sitepoint.com_managing-the-css-box-model]: https://www.sitepoint.com/managing-the-css-box-model/