CSS display属性用于指定在页面上使用哪种盒模型来渲染指定的元素。通俗来讲就是某个元素在页面中的显示方式
- none:元素完全从页面中移除。它的所有后代元素同样被移除。文档渲染的过程中就好像在文档树中这个元素不存在一样。
- inline:显示为内联元素。
- inline-block:显示为块级内联元素。它可以设置元素的宽度和高度,其它的行为和内联元素相同。
- block:显示为块级元素。
- list-item:该元素生成一个块级容器和单独的内联列表元素。
- run-in:指定为
run-in
的元素的行为如下:- 如果指定为
run-in
的元素包含一个块级元素,那么这个元素显示为块级元素。 - 如果指定为
run-in
的元素后面跟随一个非浮动或绝对定位的块级元素,那么run-in
元素会成为这个块级元素的第一个内联元素。一个run-in
元素不能运行在一个以run-in
元素开始的块级元素前,或这个块级元素本身就是run-in
元素。 - 其它情况下,
run-in
元素作为块级元素来显示。
- 如果指定为
- inline-table, table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, and table-caption:这些值会将元素显示为表格。
inline-table
不是一个在HTML中直接映射的元素,它的行为和HTML<table>
元素相同,但是它是一个内联元素,而不是一个块级元素。 - flex:元素显示为块级元素,它的内容根据Flexbox模式来进行布局。
- inline-flex:元素显示为内联元素,它的内容根据Flexbox模式来进行布局。
- grid:元素显示为块级元素,它的内容根据Grid模式来进行布局。
- inline-grid:元素显示为内联元素,它的内容根据Grid模式来进行布局。