css display

December 3, 2023

CSS Display Module

依据最新草案，display 属性由外部和内部两个基本特质构成：

外部 display 类型
决定主盒如何参与流布局
主要是两个值：block 和 inline（run-in 的浏览器支持差，实用性不高）
内部 display 类型
决定非替换元素如何生成格式化上下文（替换元素的内部 display 类型超出了 CSS 的范畴）
最基础的是 flow 和 flow-root。其它的例如：flex grid table

除上述两个特质外，还有一些特殊的 display 值能够创建副作用。
比如 list-item 可生成 ::marker 伪元素，none 可以将整个元素从 box-tree 中移除。

形式化语法：

css

display =
    [ <display-outside> || <display-inside> ]
    | <display-listitem> | <display-internal> | <display-box> | <display-legacy>

<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-legacy>   = inline-block | inline-table | inline-flex | inline-grid

注意到已有的单值 display 属性可转换为完整格式，举例如下：

short	full
block	block flow
inline	inline flow
inline-block	inline flow-root
flow-root	block flow-root
flex	block flex
inline-flex	inline flex
list-item	block flow list-item

可以发现，完整格式对非常清晰地表达了元素的表现方式。

总结：外部主盒参与流布局，内部生成格式化上下文。

CSS Box Sizing Module

CSS Box Sizing 模块包含外在尺寸（extrinsic size）和内在尺寸（intrinsic size）的概念。看起来也是一外一内，不过该模块表述的是盒模型尺寸的生成。

外部尺寸基于上下文确定元素的尺寸，而无需考虑其内容。
内部尺寸基于元素内容确定其尺寸，而无需考虑上下文。

←Back to home