在上一篇详细说明了CSS样式中position、float。
本章继续讨论 定位中的 display属性,并阐述 这三者的关系。
display
display
总共有
display-outside
- block 块级 标签
- inline 行内 标签
- run-in (实验), 根据周围的元素 表现为inline或者block,
-
- 如果包含 block 类型的元素,则表现为block
- 如果紧跟随的元素为block类型 则表现为第一个inline
- 如果紧跟随的元素为inline类型,则表现为block
display-inside
- flex 表现为block,内部元素采用flexbox model 布局
- grid 表现为block,内部元素采用grid model布局
- table 表现为block,类似标签
- flow(实验)
- ruby(实验)
display-listitem
- *
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.
display-box
- none
display-legacy CSS 2 用一个关键词来表示,
- inline-block 等价于 inline flow-root
- inline-table 等价于 inline table
- inline-flex 等价于 inline flex
display position float 三者的关系
- 如果 display 为none,这忽略 position和float的值,元素为no box
- 如果 display为 flex 或 inline-flex, 则float无效,
- 否者,如果position值为absolute或fixed,则display被设置为block,float被设置为none
- 否者,如果float值为非none,display设置为block,并且box 进入浮动流定位。
- 否则,保留display属性值