AtoZ CSS截屏视频：CSS Display属性

Loading the player…

正在加载播放器…

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

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

成绩单 (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) on CodePen.

见钢笔尖d由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/