Digging Into The Display Propert

转自《Digging Into The Display Property: The Two Values Of Display)》

本人翻译

写在前面：本人想开始准备翻译一些专业文章(2019flag之一，每月至少翻译3篇英文文档)，来锻炼自己的专业英文能力，so，今天开始会不定期翻译一些文章，才疏学浅，欢迎大神指教其中不足之处，也欢迎大家观看和我一块学习呀。

第一篇，翻译的老壳痛（哭丧脸）

Digging Into The Display Property: The Two Values Of Display (深度挖掘display的两个属性值)

quick summary：We talk a lot about Flexbox and CSS Grid Layout, but these layout methods are essentially values of the CSS display property, a workhorse of a property that doesn’t get a lot of attention. Rachel Andrew takes a better look in a short series.

快速摘要：我们经常谈论弹性盒模型和css网格布局，但是这些布局方法根本上都是因为display的属性值，一个不怎么受关注的属性，Rachel Andrew将从简短的几点来更好的了解他们。

A flex or grid layout starts out with you declaring

display: flex or display: grid. These layout methods are values of the CSS display property. We tend not to talk about this property on its own very much, instead concentrating on the values of flex or grid, however, there are some interesting things to understand about display and how it is defined that will make your life much easier as you use CSS for layout.

flex布局还是网格布局，从你的声明开始

display: flex or display: grid.这些布局方法是display属性的值，我们倾向于不过多谈论这个属性本身，而更多关心它的值是 flex 还是 grid，无论怎样，理解display和它的定义是一件有趣的事，当你会用css布局会让你的生活更加容易。

In this article, the first in a short series, I’m going to take a look at the way that the values of display are defined in the Level 3 specification. This is a change to how we defined display in earlier versions of CSS. While it may seem unusual at first for those of us who have been doing CSS for many years, I think these changes really help to explain what is going on when we change the value of display on an element.

这篇文章里，第一步，我先来看看display在3级规范中的定义方式，了解在早期的css版本中display的定义时如何改变的，对于我们这样用css很多年的人来说，这似乎很平常，我相信这些改变也能实际的帮助解释当我们改变元素的display值的时候回发生什么。

Block And Inline Elements

One of the first things we teach people who are new to CSS are the concepts of block and inline elements. We will explain that some elements on the page are display: block and they have certain features because of this. They stretch out in the inline direction, taking up as much space as is available to them. They break onto a new line; we can give them width, height, margin as well as padding, and these properties will push other elements on the page away from them.

块和内联元素

我们教新人css的第一件事，就是块和内联元素的概念，我们解释页面中一些元素因为设置了dispaly：block，会具有某些特征，它们沿直线方向伸展，占据尽可能多的空间,他们会折行。我们可以给他们设置宽，高，外边距和内边距，这些属性会将页面上的其他元素从它们中推开。

We also know that some elements are display: inline. Inline elements are like words in a sentence; they don’t break onto a new line, but instead reserve a character of white space between them. If you add margins and padding, this will display but it won’t push other elements away.

我们也知道，有些元素是display: inline，内联元素就像句子中的单词，他们不会自动折行，但在它们之间保留一个空白字符，如果你设置了，外边距和内边距，他们不会生效。

The behavior of block and inline elements is fundamental to CSS and the fact that a properly marked up HTML document will be readable by default. This layout is referred to as “Block and Inline Layout” or “Normal Flow” because this is the way that elements lay themselves out if we don’t do anything else to them.

块和内联元素的行为是CSS的基础，并且正确标记的HTML文档在默认情况下是可读的。这个布局被称为“块和内联布局”或“正常流”，因为如果我们不对元素做任何其他的事情，元素就是这样布局的

Inner And Outer Values Of display

We understand block and inline elements, but what happens if we make an item display: grid? Is this something completely different? If we look at a component on which we have specified display: grid, in terms of the parent element in the layout it behaves like a block level element. The element will stretch out and take up as much space in the inline dimension as is available, it will start on a new line. It behaves just like a block element in terms of how it behaves alongside the rest of the layout. We haven’t said display: block though, or have we?

显示的内部和外部值

我们理解了块和内联元素，但是如果我们给元素设置 display: grid，会发生什么？会是完全不同的东西吗？我们看一个组件，在这个组件上我们指定了display:grid，就布局中的父元素而言，它的行为类似于块级元素，元素将展开并占用内联维度中可用的空间，它将从新行开始，它的行为就像一个块元素，与布局的其余部分一起工作，尽管我们还没有说display：block，还是我们已经说了？

It turns out that we have. In Level 3 of the Display specification, the value of display is defined as two keywords. These keywords define the outer value of display, which will be inline or block and therefore define how the element behaves in the layout alongside other elements. They also define the inner value of the element — or how the direct children of that element behave.

结果是我们已经说了，在3级显示规范中，display的值被定义成2个关键词，那就是块和内联元素，

This means that when you say display: grid, what you are really saying is display: block grid. You are asking for a block level grid container. An element that will have all of the block attributes — you can give it height and width, margin and padding, and it will stretch to fill the container. The children of that container, however, have been given the inner value of grid so they become grid items. How those grid items behave is defined in the CSS Grid Specification: the display spec gives us a way to tell the browser that this is the layout method we want to use.

这意味着，当你说display: grid，实际上你是在说display: block grid，你再庆祝一个块级网格容器，一个有所有块级元素属性的元素，你可以给他设置高和宽，外边距和内边距，他会在容器上生效。然而，容器内的子集，已经被赋予了网格的内部值，因此它们成为网格项。在CSS网格规范中定义他们是这样定义的，display提供了一种方法告诉浏览器我们想要哪种布局方式。

I think that this way of thinking about display is incredibly helpful; it directly explains what we are doing with various layout methods. If you were to specify display: inline flex, what would you expect? Hopefully, a box that behaves as an inline element, with children that are flex items.

我认为这种展示方式非常有用，它解释了我们使用的各种布局方式，如果 你指定了display: inline flex，你期望什么？希望，一个内联元素，其中包含灵活项的子项。

There are a few other things neatly explained by thinking about display in this new way, and I’ll take a look at some of these in the rest of this article.

通过这种新的方式去思考display，还有几件事情可以清楚的解释，我在文章的剩余部分说说其中的一部分。

We Are Always Going Back To Normal Flow

When thinking about these inner and outer display properties, it can be helpful to consider what happens if we don’t mess around with the value of display at all. If you write some HTML and view it in a browser, what you get is Block and Inline Layout, or Normal Flow. The elements display as block or inline elements.

我们总是回到正常布局

在考虑这些内部和外部display属性时，如果我们不把display的值搞得一团糟，对于思考会很有帮助，如果你写了一些html并且在浏览器中显示，你得到的是块元素，和内联布局 还是正常流，元素作为块或内联元素显示。

The example below contains some markup that I have turned into a media object, by making the div display: flex (the two direct children) now become flex items, so the image is now in a row with the content. If you see in the content, however, there is a heading and a paragraph which are displaying in normal flow again. The direct children of the media object became flex items; their children return to normal flow unless we change the value of display on the flex item. The flex container itself is a block box, as you can see by the fact the border extends to the edge of its parent.

下面的示例包含一些标记 ，这些标记已转换为媒体对象，通过设置 display: flex（两个直接子节点），他们现在已经变成flex元素，因此图像现在与内容成一行，然而，如果你看内容，标题和段落还是正常流显示的，媒体对象的直接子对象变成了flex项，除非我们设置了display的值为flex，否则他的子集还是显示为正常流的，这个flex容器本身就是一个块级盒子，就像你看他的盒子边缘延伸到父元素的边界。

If you work with this process, the fact that elements on your page will lay themselves out with this nice readable normal flow layout, rather than fighting against it and trying to place everything, CSS is much easier. You are also less likely to fall into accessibility issues, as you are working with the document order, which is exactly what a screen reader or a person tabbing through the document is doing.

如果您使用这个过程，那么页面上的元素将使用这个可读性很好的正常流布局进行布局，而不是与反对它并尝试放置所有内容，那么CSS就容易得多，您也不太可能陷入可访问性问题，这正是屏幕阅读器或人员通过文档进行操作的过程。

EXPLAINING flow-root AND inline-block

The value of inline-block is also likely to be familiar to many of us who have been doing CSS for a while. This value is a way to get some of the block behavior on an inline element. For example, an inline-block element can have a width and a height. An element with display: inline-blockalso behaves in an interesting way in that it creates a Block Formatting Content (BFC).

解释flow-root和inline-block

对于很久以来一直在做CSS的人来说，inline-block这个值可能也很熟悉，此值是获取内联元素上某些块行为的一种方法，例如，一个内联块元素也能有宽和高，display: inline-block元素也后一个有趣的方式，因为他创建了一个BFC

A BFC does some useful things in terms of layout, for example, it contains floats. To read about Block Formatting Contexts in more detail see my previous article “Understanding CSS Layout And The Block Formatting Context.” Therefore saying display: inline-block gives you an inline box which also establishes a BFC.

在布局中，BFC做了很有用的事，例如，他包含浮动，要了解有关块格式上下文的详细信息，请参阅上一篇文章了解css布局和块级上下文所以说display:inline块会给您一个内联盒子，也建立一个BFC。

As you will discover (if you read the above-mentioned article about the Block Formatting Context), there is a newer value of display which also explicitly creates a BFC. This is the value of flow-root. This value creates a BFC on a block, rather than an inline element.

正如您将发现的那样（如果你已经阅读了上面关于块级上下文的文章），还有一个更新的display属性值，它还明确地创建了一个BFC
，这个值就是flow-root，相比内联元素，它创建了一个块级BFC

display: inline-block gives you a BFC on an inline box.（内联框中创建了一个BFC）

display: flow-root gives you a BFC on a block box.（块级元素中创建BFC）

You are now probably thinking that is all a bit confusing: why do we have two completely different keywords here, and what happened to the two-value syntax we were talking about before? This leads neatly into the next thing I need to explain about display, i.e. the fact that CSS has a history we need to deal with in terms of the display property.

你现在可能在认为这有点困惑，为什么我们在这里有两个完全不同的关键词，以及我们之前讨论的2个值 发生了什么，这引出来关于display我要解释的下一件事，即CSS有一个我们需要在display属性方面处理的历史。

Legacy Values Of Display

The CSS2 Specification detailed the following values for the display

Display的遗留值

CSS2规范详细说明了该display属性的以下值：

property:
inline
block
inline-block
list-item
none
table
inline-table

Also defined were the various table internal properties such as table-cell which we are not dealing with in this article.

还定义了各种表内部属性，例如table-cell我们在本文中没有涉及的属性。

We then added to these some values for display, to support flex and grid layout:

然后我们添加了一些显示值，以支持flex和grid layout：

grid
inline-grid
flex
inline-flex

Note: *The specification also defines ruby and inline-ruby to support Ruby Text which you can read about in the Ruby specification.

注意：这个规范还定义了 ruby and inline-ruby用来支持Ruby Text，你可以阅读Ruby规范

These are all single values for the display property, defined before the specification was updated to explain CSS Layout in this way. Something very important about CSS is the fact that we don’t go around breaking the web; we can’t simply change things. We can’t suddenly decide that everyone should use this new two-value syntax and therefore every website ever built that used the single value syntax will break unless a developer goes back and fixes it!

这些都是display属性的单个值，在更新规范之前定义，以这种方式解释CSS布局，关于CSS的一个非常重要的事实是我们不会破坏网络，我们不能简单的改变一切，我们不能突然决定让所有人都应该使用新双值语法，因为以前每个使用单值语法构建的网站都会破坏，除非开发人员回过头来修复它。

While thinking about this problem, you may enjoy this list of mistakes in the design of CSS which are less mistakes in many cases as things that were designed without a crystal ball to see into the future! However, the fact is that we can’t break the web, which is why we have this situation where right now browsers support a set of single values for display, and the specification is moving to two values for display.

在考虑这个问题的同时，你可能会喜欢CSS设计中的这个错误列表，这些错误在很多情况下都是错误的，因为没有水晶球的可以看到未来！然而，事实上我们无法打破网络，这就是为什么我们遇到这种情况，现在浏览器支持一组单个值进行显示，并且规范正在转移到两个值进行显示。

The way we get around this is to specify legacy and short values for display, which includes all of these single values. This means that a mapping can be defined between single values and new two keyword values. Which gives us the following table of values:

我们解决这个问题的方法是指定显示的遗留值和短值，其中包括所有这些单个值。这意味着可以在单个值和新的两个关键字值之间定义映射。这给了我们下面的值表：

image.png

To explain how this works, we can think about a grid container. In the two-value world, we would create a block level grid container with:

为了解释这是怎么工作的，我们可以想一下网格容器，在双值世界中，我们将创建一个块级网格容器，其中包含：

.container {
    display: block grid;
}

However, the legacy keyword means that the following does the same thing:

但是，遗留关键字意味着以下内容执行相同的操作：

.container {
    display: grid;
}

If, instead, we wanted an inline grid container, in the two-value world we would use:
相反，如果我们想要一个内联网格容器，那么在双值世界中我们将使用：

.container {
    display: inline grid;
}

And if using the legacy values:
如果使用遗留值：

.container {
    display: inline-grid;
}

We can now go back to where this conversation began and look at display: inline-block. Looking at the table, you can see that this is defined in the two-value world as display: inline flow-root. It now matches display: flow-root which in a two-value world would be display: block flow-root. A little bit of tidying up and clarification of how these things are defined. A refactoring of CSS, if you like.

我们现在可以回到这个对话开始和看的地方display: inline-block。看这个表格，您可以看到这是在双值世界中定义的display: inline flow-root，它现在匹配display: flow-root，后者在双值世界中是display:block flow-root，一点点整理和澄清如何定义这些东西。如果你愿意，可以重构CSS。

Browser Support For The Two-Value Syntax

As yet, browsers do not support the two-value syntax for the displayproperty. The implementation bug for Firefox can be found here. Implementation — when it happens — would essentially involve aliasing the legacy values to the two-value versions. It’s likely to be a good while, therefore, before you can actually use these two-value versions in your code. However, that really isn’t the point of this article. Instead, I think that looking at the values of display in the light of the two-value model helps explain much of what is going on.

浏览器支持双值语法

到目前为止，浏览器不支持该display属性的双值语法Firefox的实现错误可以在这里找到，当它发生时 - 实质上涉及将遗留值别名化为双值版本，因此，在您的代码中实际使用这些双值版本之前，这可能是一段很好的时间。但是，这真的不是本文的重点，相反，我认为根据双值模型查看display有助于解释正在发生的事情。

When you define layout on a box in CSS, you are defining what happens to this box in terms of how it behaves in relation to all of the other boxes in the layout. You are also defining how the children of that box behave. You can think in this way long before you can explicitly declare the values as two separate things, as the legacy keywords map to those values, and it will help you understand what happens when you change the value of display.

当您在CSS中的框上定义布局时，您可以根据布局中与布局中其他元素相关的行为来定义此框的内容。您还定义了该框的子项的行为方式。在您可以将值明确地声明为两个单独的事物之前，您可以这么想，因为遗留关键字映射到这些值，它将帮助您了解display值更改时会发生的情况。