什么是 CSS `display` 属性?你能举几个例子说明它的用法吗?
主题
CSS
在GitHub上编辑
display
属性的常见值:none
、block
、inline
、inline-block
、flex
、grid
、table
、table-row
、table-cell
、list-item
。
display 值 | 描述 |
---|---|
none | 不显示元素(该元素不再影响文档的布局)。所有子元素也都不再显示。文档的呈现就像该元素不存在于文档树中一样。 |
block | 元素在块方向上占用整行(通常是水平方向)。 |
inline | 元素可以并排排列。 |
inline-block | 类似于 inline ,但允许一些 block 属性,如设置 width 和 height 。 |
flex | 表现为块级 flex 容器,可以使用 flexbox 模型进行操作。 |
grid | 使用网格布局表现为块级 grid 容器。 |
table | 表现得像 <table> 元素。 |
table-row | 表现得像 <tr> 元素。 |
table-cell | 表现得像 <td> 元素。 |
list-item | 表现得像 <li> 元素,允许它定义 list-style-type 和 list-style-position 。 |
有关 display
属性的完整值列表,请参阅 CSS Display | MDN。