display所有值及其作用

display有很多的值,每个值都有其独特的作用以及特性,这也是面试中常被问到,或者比较容易考到的细琐知识点。

1.display的值

none

inline

block

list-item

inline-block

table

inline-table

table-caption

table-cell

table-row

table-row-group

table-column

table-column-group

table-footer-group

table-header-group

run-in

box

inline-box

flexbox

inline-flexbox

flex

inline-flex

2.各个值的作用

inline(默认值):表示指定对象为内联元素

none: 表示隐藏对象,与visibility属性的hidden值不同,display:none不为被隐藏的对象保留物理空间 ,然visibility:hidden就保留

block: 指定对象为块元素。

list-item: 指定对象为列表项目。

inline-block: 指定对象为内联块元素。(这是CSS2中的属性)

table: 指定对象作为块元素级的表格。类同于html标签table(CSS2)

inline-table: 指定对象作为内联元素级的表格。类同于html标签table(CSS2)

table-caption: 指定对象作为表格标题。类同于html标签caption(CSS2)

table-cell: 指定对象作为表格单元格。类同于html标签td(CSS2)

table-row: 指定对象作为表格行。类同于html标签tr(CSS2)

table-row-group: 指定对象作为表格行组。类同于html标签tbody(CSS2)

table-column: 指定对象作为表格列。类同于html标签col(CSS2)

table-column-group: 指定对象作为表格列组显示。类同于html标签colgroup(CSS2)

table-header-group: 指定对象作为表格标题组。类同于html标签thead(CSS2)

table-footer-group: 指定对象作为表格脚注组。类同于html标签tfoot(CSS2)

run-in: 根据上下文决定对象是内联对象还是块级对象。(CSS3)

box: 将对象作为弹性伸缩盒显示。(伸缩盒的最老版本中属性)(CSS3)

inline-box: 将对象作为内联块级弹性伸缩盒显示。(伸缩盒的最老版本中属性)(CSS3)

flexbox: 将对象作为弹性伸缩盒显示。(伸缩盒的最老版本中属性)(CSS3)

inline-flexbox: 将对象作为内联块级弹性伸缩盒显示。(伸缩盒的最老版本中属性)(CSS3)

flex: 将对象作为弹性伸缩盒显示。(伸缩盒的最老版本中属性)(CSS3)

inline-flex: 将对象作为内联块级弹性伸缩盒显示。(伸缩盒的最老版本中属性)(CSS3)

欢迎分享本文,转载请保留出处:前端ABC » display所有值及其作用

赞 (2)
分享到:更多 ()

发表评论 0