【CSS布局】定位详解（二）

在上一篇详细说明了CSS样式中position、float。
本章继续讨论 定位中的 display属性，并阐述 这三者的关系。

display

display
总共有

1. display-outside

   • block 块级 标签
   • inline 行内 标签
   • run-in （实验）, 根据周围的元素 表现为inline或者block，
   • 
     
     • 如果包含 block 类型的元素，则表现为block
     • 如果紧跟随的元素为block类型 则表现为第一个inline
     • 如果紧跟随的元素为inline类型，则表现为block

2. display-inside

   • flex 表现为block，内部元素采用flexbox model 布局
   • grid 表现为block，内部元素采用grid model布局
   • table 表现为block，类似标签
   • flow（实验）
   • ruby（实验）

3. display-listitem

   • *

4. display-internal

   • table-row-group HTML elements
   • table-header-group HTML elements.
   • table-footer-group HTML elements.
   • table-row HTML elements.
   • table-cell HTML elements.
   • table-column-group HTML elements.
   • table-column HTML elements.
   • table-caption HTML elements.

5. display-box

   • none

6. display-legacy CSS 2 用一个关键词来表示，

   • inline-block 等价于 inline flow-root
   • inline-table 等价于 inline table
   • inline-flex 等价于 inline flex

display position float 三者的关系

1. 如果 display 为none，这忽略 position和float的值，元素为no box
2. 如果 display为 flex 或 inline-flex， 则float无效，
3. 否者，如果position值为absolute或fixed，则display被设置为block，float被设置为none
4. 否者，如果float值为非none，display设置为block，并且box 进入浮动流定位。
5. 否则，保留display属性值

参考：https://www.w3.org/TR/REC-CSS2/visuren.html#q24