哪些不曾了解的CSS——04 diaplay属性

display属性

display属性指定了元素的显示类型，包含两类基础特征

• 外部显示类型

指定元素怎样生成盒子模型，怎样参与流式布局的处理

• 内部显示类型

定义非替换元素如何生成格式化上下文，确定子元素的布局方式

简单理解就是外部显示类型确定该元素本身如何显示，内部显示类型确定作为容器，该元素的子元素如何显示

display的规范

在CSS Display Module Level 3中，对display属性的定义如下：

name: display

value: [<display-outside>||<display-inside>]

|<display-listitem>

|<display-internal>

|<display-box>

|<display-leagcy>

initial: inline

applies to: all elements

inherited: no

先简单介绍如何阅读以上规范

如何理解规范

• “<”和“>”之间的词给出了某种值的类型，或者是对另一个属性的引用
• 一些关键字符串在一起，这意味着所有这些关键字必须以给定顺序出现
• 如果候选项由一个竖线分隔（X | Y），那么必须出现其中之一，且不能同时出现
• 双竖线（X || Y）表示出现X或Y，或者二者都必须出现，但是必须按照顺序
• 双和号(&&)分隔的两个或更多部分，必须全部出现，顺序随意
• 中括号（[...]）用于分组。两项并列优先级要高于双竖线，而双竖线则高于单竖线
• inital 表示初始值
• applies to 表示应用该属性的元素
• inherited 表示该属性的值是否能被子元素继承

基于以上规则，display可选值类型就确定了，那么每种类型有哪些值，并且没种类型代表什么含义呢？

<display-outside> = block | inline | run-in
<display-inside> = flow | flow-root | table | flex | grid | ruby
<display-listitem> = <display-outside>? && [flow | flow-root]? && list-item
<display-internal> = table-row-group | table-header-group |
                     table-footer-group | table-row | table-cell |
                     table-column-group | table-column | table-caption |
                     ruby-base | ruby-text | ruby-base-container |
                     ruby-text-container
<display-box> = contents | none
<display-leagcy> = inline-block | line-table | line-flex | inline-grid

• display-outside 指定了该元素在流式布局中的外部显示类型：

  • block表示该元素会生成一个块级盒子
  • inline表示该元素会生成一个行内级盒子
  • run-in表示会生成一个run-in box，这是一种有特殊行为的行内级盒子
  • 如果声明了<display-outside>的值，却忽略了<display-inside>的值，那么该元素的内部显示类型默认为 flow

• display-inside 指定了该元素的内部显示类型——用来定义确定内容如何输出的格式化上下文：

  • flow 表示使用流式布局，如果<display-outside>为inline或run-in，并且该元素块或行内格式化上下文，就会产生行内盒子，否则产生块容器盒子
  • flow-root 表示该元素会产生一个块容器盒子，对内容使用流式布局
  • table 指定该元素会产生一个表格包装盒子(table wrapper box)，建立一个块格式化上下文，并且额外产生一个表格盒子(table box)，在其中建立一个表格格式化上下文(table formatting context)
  • flex 指定该元素产生一个flex容器盒子，并建立一个flex格式化上下文
  • grid 指定该元素产生一个grid容器盒子，并建立一个grid格式化上下文
  • ruby 指定该元素产生一个ruby容器盒子，并建立一个ruby格式化上下文
  • 如果声明了<diaplay-inside>的值，却忽略了<diaplay-outside>的值，那么该元素的外部显示类型默认为block，除了ruby，其默认值为inline

• list-item关键字会导致该元素生成一个::marker的伪元素，可以通过list-style 来修改其样式。如果没有声明内部显示类型，默认为flow；如果没有声明外部显示类型，默认为block

• table-* 和 ruby-*关键字所代表的布局模型，有很复杂的内部结构，暂时不做深入了解

• display-box 指定该元素是否生成盒子

  • contents 指定该元素本身不会生成盒子，但是它的子元素和伪元素依旧正常生成盒子
  • none 指定该元素及其后代元素都不会生成盒子

• diaplay-leagcy 是css 2使用的单关键字语法

  • inline-block 的行为与inline flow-root一致
  • inline-table 的行为与inline table 一致
  • inline-flex 的行为与 inline flex 一致
  • inline-grid 的行为与 inline grid 一致