AtoZ CSS截屏视频：CSS Display属性

浅浅的花香味﹌ 2022-12-03 01:51 166阅读 0赞

Loading the player…

正在加载播放器…

This article is a part of our AtoZ CSS Series. You can find other entries to the series [here][].

本文是我们的AtoZ CSS系列的一部分。 您可以在[此处][here]找到该系列的其他条目。

## 成绩单 **(**Transcript**)** ##

How elements take up space on the page is controlled by their `display`.

元素如何占据页面上的空间取决于它们的`display` 。

There used to be two broad display types in CSS: elements were `inline` or `block-level`.

CSS过去有两种广泛的显示类型：元素为`inline`或`block-level` 。

### 封锁与内联 **(**Block vs. Inline**)** ###

Block elements start on a new line and fill the width of their parent container. We saw this behavior in *“Episode 1: `auto`*” when we looked at `auto` dimensions.

块元素从新行开始，并填充其父容器的宽度。 当我们查看`auto`尺寸时，我们在*“第1集： `auto`* ”中看到了这种行为。

`inline` elements remain in a line and only take up the width of their contents.

`inline`元素保留在一行中，仅占用其内容的宽度。

### HTML5 **(**HTML5**)** ###

In HTML5, elements are categorized differently, the broadest categories being “flow content” and “phrasing content”. There are further categories for embedded content, interactive content and form associated content but there’s a lot of cross-overs between these different categories.

在HTML5中，元素的分类方式不同，最广泛的类别是“流内容”和“短语内容”。 嵌入式内容，交互式内容和与表单相关的内容还有其他类别，但是这些不同类别之间有很多交叉之处。

Here’s a list of flow content elements. Elements like `<div>`, `<article>`, `<section>` and `<form>` are block-like elements which often contain many other child elements. But this list also contains `<a>`, `<em>`, `<span>` and `<input>` which are `inline` elements – often found in running text where it would be undesirable for them to start on a new line.

这是流内容元素的列表。 `<div>` ， `<article>` ， `<section>`和`<form>`类的元素是块状元素，通常包含许多其他子元素。 但是此列表还包含`<a>` ， `<em>` ， `<span>`和`<input>` ，它们是`inline`元素–经常在运行文本中找到，因此不希望它们从新行开始。

The list of phrasing content elements doesn’t contain a lot of the block-like elements from flow content, but it does include things like `<em>`, `<span>` and `<input>` which were also in the previous list.

短语内容元素列表中没有包含很多来自流内容的块状元素，但确实包含诸如`<em>` ， `<span>`和`<input>`内容。

It turns out there is no clear mapping of `block` to flow content and `inline` to phrasing content so we better look elsewhere.

事实证明，没有清晰的`block`到流内容映射以及`inline`到短语内容映射，因此我们最好在别处查找。

First, it’s worth noting that in HTML, all elements are `inline` by default and their display characteristics are largely determined by the user agent stylesheet, or set by us when we write CSS.

首先，值得注意的是，在HTML中，默认情况下所有元素都是`inline`的，它们的显示特性很大程度上由用户代理样式表确定，或者由我们在编写CSS时设置。

If we look through the user agent stylesheet of Chrome, we find the following list of elements that have their display property set to `block`. There are a few oldies in here too for backward compatibility.

如果我们浏览Chrome的用户代理样式表，则会发现以下显示属性设置为`block`的元素列表。 为了向后兼容，这里也有一些历史。

So, if there are 44 block elements in Chrome and all HTML elements are `inline` by default, the rest must be `inline`, right?

因此，如果Chrome中有44个block元素，并且默认情况下所有HTML元素都是`inline`的，则其余元素必须是`inline` ，对吗？

Well, not exactly, as there are more values for `display` than just `inline` and `block`.

好吧，不完全是，因为`display`值不仅仅是`inline`和`block` 。

We have `display:none` for hiding things. There’s also `inline-block`, `table`, `inline-table`, `table-cell`, `table-column`, `table-column-group`, `table-footer-group`, `table-header-row`, `table-row`, `table-row-group`, `list-item`, `run-in`, and new layout modes like `flex`, `inline-flex`, `grid` and `inline-grid`. It would take too long to look a’ all of these, so let’s take a selection of the most commonly used.

我们有`display:none`隐藏的东西。 还有`inline-block` ， `table` ， `inline-table` ， `table-cell` ， `table-column` ， `table-column-group` ， `table-footer-group` ， `table-header-row` ， `table-row` ， `table-row-group` ， `list-item` ， `run-in`和新的布局模式，例如`flex` ， `inline-flex` ， `grid`和`inline-grid` 。 所有这些看起来都花费太长时间，因此让我们选择最常用的。

### 块 **(**Block**)** ###

A `<div>` is a generic box that has `display:block` by default. The box is the full width of the page and as high as necessary to contain all its content. Blocks can be spaced out with `margin`.

`<div>`是默认情况下具有`display:block`的通用框。 该框是页面的整个宽度，并且包含页面的所有内容所需的高度。 块可以用`margin`隔开。

### 排队 **(**Inline**)** ###

In contrast, a `<span>` which is `display:inline` by default only takes up the width of its content and doesn’t respond to properties like `width`, `height` and `margin`. We can set the display property of this `<span>` to `block` and then all of these other properties will apply.

相反，默认情况下`display:inline`的`<span>`仅占用其内容的宽度，并且不响应诸如`width` ， `height`和`margin`属性。 我们可以将此`<span>`的display属性设置为`block` ，然后将应用所有其他这些属性。

span {
      display: block;
      width: 50%;
      margin: 1em auto;
    }

### 内联块 **(**Inline-block**)** ###

It’s common to want the benefits of both `block` and `inline` at the same time. Fortunately, `display:inline-block` has us covered.

同时拥有`block`和`inline`的好处是很常见的。 幸运的是， `display:inline-block`覆盖了我们。

.box {
      display: inline-block;
      width: 10%;
      margin-right: 1em;
    }

### 内联列表 **(**Inline list**)** ###

`inline` block is a great way to turn an unordered list of links into a horizontal nav. We can also apply spacing with padding and add a background color to each one if we like. One thing you’ll notice is that even though there is no margin on the items, there is a small space between them. This space can be removed by setting the `font-size` to zero or removing the whitespace between the tags in the markup. An alternative is to use an HTML comment to close the gap before and after each item.

`inline`块是将无序链接列表转换为水平导航的好方法。 如果愿意，我们还可以使用间距来填充间距，并为每个颜色添加背景色。 您会注意到的一件事是，即使这些项目没有边距，它们之间也有很小的空间。 可以通过将`font-size`设置为零或删除标记中标签之间的空白来删除此空间。 一种替代方法是使用HTML注释来关闭每个项目前后的空白。

If this process seems a little clunky, there’s an alternative approach using `float` which we’ll look at in *“Episode 6”*.

如果这个过程看起来有些笨拙，那么可以使用另一种使用`float`方法，我们将在*“第6集”中进行介绍* 。

### 表格和表格单元 **(**Table & Table-cell**)** ###

Using tables used to be the way the web was built. Fortunately, that’s not the case any more. But sometimes, the way that table elements lay out are beneficial. Instead of using a table element, we can use a `<div>` with `display:table` and child elements with `display:table-cell`.

使用表格曾经是构建网络的方式。 幸运的是，情况不再如此。 但是有时候，表元素的布局方式是有益的。 代替使用table元素，我们可以将`<div>`与`display:table` ，将子元素与`display:table-cell` 。

One of the benefits of this layout is that the table cells have equal heights – something that is otherwise difficult to achieve.

这种布局的好处之一是，表格单元具有相等的高度-否则很难实现。

Both `inline-block` elements and `table-cells` respond to vertical alignment and we’ll be taking a deep dive into that in *“Episode 22”*.

`inline-block`元素和`table-cells`对垂直对齐做出响应，我们将深入探讨*“第22集”中的内容* 。

## 奖金快速提示 **(**Bonus Quick Tip**)** ##

Not all things are equal when we don’t want to `display` content.

当我们不想`display`内容时，并非所有事物都是平等的。

`display: none` is not the same as `visibility: hidden`

`display: none`与`visibility: hidden`

*  `display: none` does not allocate any space on the page; the element is removed from the normal flow and the space it once occupied is removed.
    
    `display: none`不会在页面上分配任何空间； 该元素将从正常流中删除，并且一旦占用的空间也将删除。
 *  `visibility: hidden` does still take up its original space on the page; the item simply cannot be seen. This is much like setting `opacity: 0`.
    
    `visibility: hidden`仍会占据页面上的原始空间； 该项目根本看不到。 这很像设置`opacity: 0` 。

For example, see the below CSS code:

例如，请参见下面CSS代码：

.display-test {
      display: none;
    }
    .vis-test {
      visibility: hidden;
    }

Accompanying the following HTML:

随附以下HTML：

<div>
      <p>Lorem ipsum dolor sit amet ...</p> 
      <p class="display-test">Ut enim ad minim veniam ...</p>
      <p>Lorem ipsum dolor sit amet, consectetur ...</p> 
    </div>
    <div>
      <p>Lorem ipsum dolor sit amet ...</p> 
      <p class="vis-test">Ut enim ad minim veniam ...</p>
      <p>Lorem ipsum dolor sit amet, consectetur ...</p>
    </div>

The `.display-test` text will have a rather different result to the `.vis-test` text, as you’ll see in the below CodePen:

的`.display-test`文本将有一个相当不同的结果给`.vis-test`文本，您将在下面看到CodePen：

See the Pen [tip-d][] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

见钢笔[尖d][tip-d]由SitePoint( [@SitePoint][SitePoint]上) [CodePen][] 。

Notice how there is blank space in the second box where a paragraph has been hidden. There is no allocated space in the first box that uses `display: none`.

请注意第二个框中隐藏段落的空白区域。 在使用`display: none`的第一个框中没有分配空间`display: none` 。

> 翻译自: [https://www.sitepoint.com/atoz-css-screencast-display/][https_www.sitepoint.com_atoz-css-screencast-display]

[here]: https://www.sitepoint.com/tag/atoz-css/
[tip-d]: http://codepen.io/SitePoint/pen/rrOBKq/
[SitePoint]: http://codepen.io/SitePoint
[CodePen]: http://codepen.io
[https_www.sitepoint.com_atoz-css-screencast-display]: https://www.sitepoint.com/atoz-css-screencast-display/