css 样式表 - display

在网页布局中我们经常使用display来控制段落和div(Division:分割)，基本上所有浏览器都支持。

display CSS1: (compact和market在css2.1移除)

1. 默认值 inline: 此元素会显示成内联元素，元素前后没有换行符。

2. none: 此元素不显示。

3. block: 此元素会显示成块级元素，前后带有换行符。

4. list-item:元素会作为列表显示。

5. run-in: 元素会根据上下文显示为块级元素或内联元素。

6. table: 元素会作为块级表格来显示（类似table), 表格前后带有换行符。

7. inline-table: 元素作为内联表格来显示（类似table), 表格前后没有带换行符。

8. table-row-group: 元素作为一个或多个行分组来显示（类似tbody)。

9. table-header-group: 元素会作为一个或多个行的分组类显示（类似thead)。

10. table-footer-group: 元素会作为一个或多个行的分组来显示（类似tfoot)。

11. table-row: 元素作为一个表格行显示（类似tr).

12. table-column-group: 元素作为一个或多个列的分组来显示（类似colgroup)。

13. table-column: 元素作为一个单元格显示（类似col)。

14. table-cell: 元素作为一个表格单元显示(类似td和th)。

15. table-caption: 元素作为表格标题显示(类似caption)。

16. inherit: 元素从父元素继承display的值。

CSS2.1

17. inline-block: 行内块元素。

CSS 3

18: flex: 显示一个元素作为块级可伸缩容器。

19: inline-flex: 显示一个元素为内联级可伸缩容器。

IE 扩展：

-ms-flexbox

-ms-grid

-ms-inline-flexbox

-ms-inline-grid

ruby

ruby-base

ruby-base-container

ruby-text

...

chrom扩展：

-webkit-box:

-webkit-inline-box:

grid:

initial:

inline-grid:

...

 

转载于:https://www.cnblogs.com/ByronWu12345/p/4938675.html