DevShelf

Appearance

display ​

描述 ​

该 display 属性指定用于元素的呈现框的类型。在 HTML 中，默认显示属性值取自 HTML 规范中描述的行为或浏览器/用户默认样式表。XML 中的默认值为内联。

效果展示 ​

语法 ​

css
display: inline | block | inline-block | list-item | run-in | compact | table |
  inline-table | table-row-group | table-header-group | table-footer-group |
  table-row | table-column-group | table-column | table-cell | table-caption |
  ruby | ruby-base | ruby-text | ruby-base-group | ruby-text-group | none;

值 ​

  • inline 该元素生成一个或多个内联元素框。
  • block 该元素生成一个块元素框。
  • inline-block 该元素生成一个块元素框，该框将与周围的内容一起流动，就好像它是一个内联框一样（行为与替换的元素非常相似）
  • list-item 该元素为内容生成一个块框和一个单独的列表项内联框。
  • run-in 一个或多个块级块级块容器框，或一个或多个内联级内联容器框，具体取决于上下文
  • compact 一个或多个块级块容器框或单个标记框，具体取决于上下文
  • marker 标记
  • flex 生成用于在弹性框模型中布置内容的块元素。这是 CSS3 中的弹性框模型值。
  • inline-flex 生成用于在弹性框模型中布局内容的内联元素。这是 CSS3 中的弹性框模型值。
  • none 关闭元素的显示（它对布局没有影响）;所有后代元素的显示也都已关闭。文档呈现为元素不存在。
  • table 请参阅“表”模块
  • inline-table 请参阅“表”模块
  • table-row-group 这些元素的行为类似于 <tbody> HTML 元素。
  • table-header-group 这些元素的行为类似于 <thead> HTML 元素。
  • table-footer-group 这些元素的行为类似于 <tfoot> HTML 元素。
  • table-row 这些元素的行为类似于 <tr> HTML 元素。
  • table-column-group 这些元素的行为类似于 <colgroup> HTML 元素。
  • table-column 这些元素的行为类似于 <col> HTML 元素。
  • table-cell 这些元素的行为类似于 <td> HTML 元素。
  • table-caption 这些元素的行为类似于 <caption> HTML 元素。
  • ruby-base 这些元素的行为类似于 <rb> HTML 元素。
  • ruby-text 这些元素的行为类似于 <rt> HTML 元素。