DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 免费信用额度!
网页上的每个元素都是一个矩形框。 CSS 中的显示属性决定了该矩形框的行为方式。
span.icon {
display: inline-block; /* Characteristics of block, but lays out inline */
}
所有元素的默认值为 inline。 大多数“用户代理样式表”(浏览器应用于所有站点的默认样式)将许多元素重置为“block”。 让我们逐一了解这些,然后介绍一些其他不太常见的取值。
语法
display: [ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy>
- 初始值:
inline
- 应用于:所有元素
- 继承:否
- 计算值:表示 内部 和 外部 显示类型的关键字对,以及可选的 list-item 标志,或
<display-internal>
或<display-box>
关键字;请参阅各种规范中的说明以了解计算规则。 - 动画:n/a
取值
display
属性接受关键字取值。 这些关键字可以分组到不同的类别中。
/* <display-outer> (its natural flow). */
display: block;
display: inline;
/* <display-inner> (its contents) */
display: flex;
display: flow-root;
display: grid;
display: table;
display: ruby; /* experimental */
/* <display-listitem> (generates a content box and an inline list-item box) */
display: list-tem;
display: inline list-tem;
/* <display-internal> (defines table and ruby layouts) */
display: table-row-group;
display: table-header-group;
display: table-footer-group;
display: table-row;
display: table-cell;
display: table-column-group;
display: table-column;
display: table-caption;
display: ruby-base; /* experimental */
display: ruby-text; /* experimental */
display: ruby-base-container; /* experimental */
display: ruby-text-container; /* experimental */
/* <display-box> (determines whether to display a box or not) */
display: contents;
display: none;
/* <display-legacy> (CSS2 single-keyword syntax) */
display: inline-block;
display: inline-flex;
display: inline-grid;
display: inline-table;
/* Two-value examples */
display: block flow;
display: inline flow;
display: inline flow-root;
display: block flex;
display: inline flex;
display: block grid;
display: inline grid;
display: block flow-root;
/* Global values */
display: inherit;
display: initial;
display: revert;
display: unset;
示例
display: inline
元素的默认取值。 想象一下像 <span>
、<em>
或 <b>
这样的元素,以及如何将文本包装在这些元素中,在一个文本字符串中不会破坏文本的流动。

<em>
元素具有 1px 红色边框。 请注意,它与其他文本完全 inline。
内联元素将接受边距和填充,但元素仍然会按照预期保持内联。 边距和填充只会水平地将其他元素推开,而不是垂直地推开。

内联元素不会接受 height
和 width
。 它会直接忽略它们。
display: inline-block
设置为 inline-block
的元素与 inline 非常相似,因为它会与文本的自然流动(在“基线”上)设置内联。 区别在于您可以设置一个 width
和 height
,它们将被遵守。

display: block
浏览器 UA 样式表将许多元素设置为 block
。 它们通常是容器元素,例如 <div>
、<section>
和 <ul>
。 还有文本“块”,例如 <p>
和 <h1>
。 块级元素不会内联设置,而是会突破它们。 默认情况下(不设置宽度),它们会占用尽可能多的水平空间。

<p>
,它们是块级元素。 它们之间的 <em>
元素不会内联设置,因为块会向下突破内联元素。display: run-in
首先,此属性在 Firefox 中不起作用。据称它的规范定义不够明确。为了开始理解它,就好像你想要一个标题元素与下面的文本并排显示一样。浮动它不起作用,并且其他任何方法也不起作用,因为你不想标题成为下面文本元素的子元素,你想要它是一个独立的元素。在“支持”的浏览器中,它就像这样

display: flex
display
属性也用于 Flexbox 这样的新式布局方法。
.header {
display: flex;
}
Flexbox 语法有一些旧版本,所以请参考这篇文章了解使用 Flexbox 的语法,并获得最佳的浏览器支持。请务必查看这Flexbox 的完整指南。
“旧”Flexbox 和 “新”Flexbox
CSS Flexbox 布局指南
CSS Grid 会取代 Flexbox 吗?
使用 Flexbox 自适应图片布局
使用 Flexbox 实现平衡枢轴
深入了解 Flexbox
Flexbox 存在性能问题吗?
不要过度思考 (Flexbox) 网格
使用 Flexbox 创建等宽列:比你想象的更复杂
使用 Flexbox 填充最后一行的空间
display: flow-root
flow-root
display 值创建一个新的“块级格式化上下文”,但其他方面类似于 block
。一个新的 BFC 有助于清除浮动,从而不再需要 hack 来实现这一点。
.group {
display: flow-root
}
display: grid
CSS 网格布局最初由display
属性设置。
body {
display: grid;
}
CSS 网格入门布局
4 个 CSS 网格属性(以及一个值)可满足您的大多数布局需求
关于 CSS 网格布局的趣事集锦
无媒体查询的响应式网格布局
关于 CSS 网格布局的另一则趣事集锦
使用 CSS Grid 创建条形图
IE 中的 CSS Grid:揭穿常见的 IE Grid 误解
CSS Grid:一种布局,多种方式
display: none
完全从页面中移除元素。请注意,虽然元素仍然在 DOM 中,但它在视觉上以及其他所有可想的方式都被移除(您无法使用 Tab 键切换到它或它的子元素,屏幕阅读器会忽略它,等等)。
display: contents
此值会导致元素的子元素显示为好像它们是元素父元素的直接子元素,忽略元素本身。当包装元素在使用 CSS Grid 或类似布局技术时应该被忽略时,这可能很有用。
.element {
display: contents;
}
此浏览器支持数据来自 Caniuse,其中包含更多详细信息。数字表示浏览器从该版本起支持该功能。
台式机
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
4 | 3 | 8 | 12 | 3.1 |
移动设备/平板电脑
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
127 | 127 | 2.1 | 3.2 |
我认为“砌体式布局”背后的逻辑是 dispaly:run-in;
我在工作时经常会参考这篇文章。
这是一份很棒的资源,谢谢!
我一直认为工作的人不需要任何参考(他们对所有事情都很了解),但我认为我错了。请告诉我如何在工作中使用这种参考并解决问题。
这对像我这样的初学者会有所帮助。
谢谢……
谢谢,这很好……
这很棒,谢谢 :)
ggfffgfgfgfgfg
谢谢 Chris!
我不知道为什么我选择这篇文章来发布评论,但我已经阅读你的文章一段时间了,它们都阐明了其他网站和博主没有涵盖的细节。
继续努力!
我同意,Chris Coyier 很少会遗漏任何细节,这也是 css-tricks.com 成为我的“首选网站”之一的原因。而且他用的是通俗易懂的语言。我看了他的几个 iTunes 屏幕截图(视频播客),听这些教程的讲解真是太好了。
谢谢 Chris - 你的见解和解释总是很有帮助,特别是这篇文章。
我正在制作一个布局,其中多个 div 在一个比视窗更宽的 div 内并排浮动。我不想让内容换行,所以使用 white-space:nowrap; 来阻止这种情况。但是,这会导致某些 div 内出现问题(例如类型格式)。
我知道这通常不推荐,但这是否是一个使用 display: table; 样式的情况?
再次感谢。
很棒的文章!
非常感谢 Chris。你的文章非常适合学习。关于这篇文章,它很好。不过有一个小错误,在表格值下,“There is a whole set of display values the force non-table elements to behave like table-elements”,the 应该为 that。
Css-Tricks 太棒了,我在此学到了很多。
有
table-cell
,它像<td>
一样。有
table-row-group
,它像<tbody>
一样。有
table-header-group
,它像<thead>
一样。但为什么没有
table-header-cell
,它像<th>
一样?似乎,在
<thead>
行中的<th>
单元格上使用table-cell
,就像你建议的table-header-cell
一样……表格值。很棒的示例,易于理解,感谢分享。
很棒的资源。但我想知道 inline-table 值?
嗨!我最近想对你在本文中提供的精彩信息表示衷心的感谢。我一直在访问你的页面,并将继续关注。
好文章。继续发布……
<tr style="margin-bottom:0">
<td align="left" valign="top">
<a href="http://www.tripadvisor.com" target="_blank" style="display:table-caption; vertical-align:text-top">
<img alt="" src="images/image.jpg" width="600" height="367" style="display:block">
</a>
</td>
</tr>
感谢作者。这是一篇很棒的文章,可以完全理解 css“display”属性。
当我们将 Div 显示为表格单元格时,如何换行长文本?
您必须专门设置表格的 word-wrap 属性(只要它在您要换行的元素上方,位置无关紧要)。
嗨,我喜欢这篇文章,经常回来参考它,但我问为什么在广告所在的右上角有这段代码会报错?块到块不匹配协议、域名等。对我来说都是胡说八道。我希望你能告诉我这是怎么回事。它在所有浏览器中都会发生。起初我认为这与出站链接有关,然后我认为是浏览器不对,可能是帐户被取消了,或者只是我想要漂亮的代码?我很好奇答案会是什么。在我的广告农场或内存中,广告没有显示,但代码却一样。
无效的 CSS 属性声明位于:*
阻止了来自“http://www.google.nl”的源的帧访问来自“https://css-tricks.org.cn”的源的帧。协议、域名和端口必须匹配。
阻止了来自“https://css-tricks.org.cn”的源的帧访问来自“http://www.google.nl”的源的帧。协议、域名和端口必须匹配。
来自
Henk
农场或内存 = 帧或内联框架,抱歉
我看到几个网站将 display 属性设置为 section、footer、aside 和其他块元素的 block。这样做有什么原因吗?
这是 HTML5 元素刚刚“出现”时的遗留问题——用户代理样式表将它们视为内联元素——但我们知道将来它们将变为块元素。最好从一开始就做对。
如果引用块着色,我认为看起来会更好。
一如既往地精彩和启发人心,感谢这个很棒的参考资源。
喜欢这个清晰简洁的解释
这篇文章非常有用,顺便问一下,什么是 UA 样式表覆盖?
非常清晰简洁,并带有彩色代码片段以帮助理解。
感谢你澄清了这一点 :)
你真是太棒了,Chris!
酷炫,对 CSS display Block 的很好的总结。
关于显示:inline-block 的解释在 inline-block-bug 中缺少一个词。我认为这对于所有浏览器厂商来说都是一种耻辱,因为这种情况从 1995 年就存在了。说真的,HTML 元素的渲染真的取决于源代码中使用的空格、换行符或缩进吗?inline-block 是一种实现多列和网格的绝佳方式,如果不是因为这些讨厌的空 HTML 注释,我们只需要使用它们:-(。
很酷
哇!太棒了!消除了我所有的疑问!感谢这篇精彩的文章!
嗨,极客们!有人知道在哪里可以找到关于 inline-block 元素在我的简单示例中的确切行为的清晰解释吗?(我知道这不是边距折叠,但非常相似,而且我知道它是如何工作的,但只是通过实践)http://codepen.io/dagolinuxoid/pen/yNazKM
嗨!让我们深入探讨一下…当尝试将 Display 属性与 Position 或 Float 等属性混合使用时,是否有一些需要牢记的技巧?谢谢你们!
下午好
有趣
非常有用
太棒了,非常感谢
感谢 CSS-TRICK
很棒的文章!CSS-tricks 是我寻找帮助的首选网站,而且它从未让我失望。
你没有提到可以使用两个关键字,比如
display: inline flex;
而不是display: inline-flex;
。https://drafts.csswg.org/css-display/#legacy-display
嗨!我在显示值方面有一个小问题。
为什么当我像这样在 CSS 中编写它时,我的段落没有获得页面的全部空间和宽度?
虽然当我像这样编写 div 时,它会获得页面的整个宽度。
如果你能帮帮我,请告诉我!提前感谢
你在“280”和“px”之间有一个空格。去掉它,所有段落的宽度都将只有 280px :-)。
感谢提供这个很棒的资源!我在编码面试前用它作为快速参考。
建议你检查一下 caniuse.com,看看它在开始之前得到了多好的支持!另一个想法是你要支持哪些旧版本的桌面/移动浏览器?
对于网格,我喜欢块、内联块、表格、表格单元格;保持简单,伙计们——不要使其复杂。我更喜欢 div/span 元素,而不是 article/section 顺序混乱,以及那些一点也不改善你排名、只是 SEO 骗局的噱头!我曾经被骗了……现在,我知道得更多了!
只需简单地使用 div 并开始扩展周围 8} 所有双关语都是故意的
一如既往,愿 % 永伴你左右。
嘿,各位平面设计师……你们知道“点和皮卡”仍然受支持吗?想想我们可以和网页开发者一起玩的所有乐趣;}