码农教程 - 一技在手,衣食无忧! tools

目录

CSS display 属性

❮上一节 完整的CSS参考 下一节❯

示例

使用一些不同的显示值：

p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display: block;}
p.ex4 {display: inline-block;}
亲自试一试 »

下面有更多 "亲自试一试" 示例。

定义和用法

这个display属性指定元素的显示行为（渲染框的类型）。

在 HTML 中，默认显示属性值取自 HTML 规范或浏览器/用户默认样式表。 XML 中的默认值是内联的，包括 SVG 元素。

展示演示❯

默认值： ?
遗传： 不
可动画： 不。阅读可动画的
版本： CSS1
JavaScript 语法： 对象.style.display="none"尝试一下

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

Property
display 4.0 8.0 3.0 3.1 7.0

笔记：值 "flex" 和 "inline-flex" 需要 -webkit- 前缀才能在 Safari 中使用。

笔记："display: contents" 在 Edge 79 之前的版本中不起作用。

CSS 语法

display: value;

属性值

Value Description Play it
inline Displays an element as an inline element (like <span>). Any height and width properties will have no effect Demo ❯
block Displays an element as a block element (like <p>). It starts on a new line, and takes up the whole width Demo ❯
contents Makes the container disappear, making the child elements children of the element the next level up in the DOM
flex Displays an element as a block-level flex container
grid Displays an element as a block-level grid container
inline-block Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values
inline-flex Displays an element as an inline-level flex container
inline-grid Displays an element as an inline-level grid container
inline-table The element is displayed as an inline-level table
list-item Let the element behave like a <li> element Demo ❯
run-in Displays an element as either block or inline, depending on context
table Let the element behave like a <table> element
table-caption Let the element behave like a <caption> element
table-column-group Let the element behave like a <colgroup> element
table-header-group Let the element behave like a <thead> element
table-footer-group Let the element behave like a <tfoot> element
table-row-group Let the element behave like a <tbody> element
table-cell Let the element behave like a <td> element
table-column Let the element behave like a <col> element
table-row Let the element behave like a <tr> element
none The element is completely removed
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

更多示例

示例

演示如何使用内容属性值。在以下示例中，.a 容器将消失，并使子元素 (.b) 成为 DOM 中上一级元素的子元素：

.a {
  display: contents;
  border: 2px solid red;
  background-color: #ccc;
  padding: 10px;
  width: 200px;
}

.b {
  border: 2px solid blue;
  background-color: lightblue;
  padding: 10px;
}
亲自试一试 »

示例

如何使用继承属性值的演示：

body {
  display: inline;
}

p {
  display: inherit;
}
亲自试一试 »

示例

以相反的顺序设置 <div> 元素内某些灵活项目的方向：

div {
  display: flex;
  flex-direction: row-reverse;
}
亲自试一试 »

相关页面

CSS教程：CSS 显示和可见性

HTML DOM 参考：显示属性

❮上一节 完整的CSS参考 下一节❯