Mawawa CSS 学习之旅 Display

CSS 类型之 Display

更新时间： 2018-2-10；

一个良好的布局结构从 display 开始！

分类：外部值、内部值、列表值、属性值、混合值、显示值、全局值；

一、外部值

作用：主要用于容器的外部表现；因此对内部子元素不会有影响。

属性值：block，inline；

说明： block 块，独占一行。inline 内联，在同一行显示。这没啥好说的！

二、内部值

作用：主要作用于内部表现；对外部无影响；

属性值：

flow-root 该种模式内如果遇见子元素为float类型，那么父元素不会塌陷。也是解决塌陷的一种方法，高版本都支持良好。

table

• table    此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。

• table-row-group    此元素会作为一个或多个行的分组来显示（类似 <tbody>）。

• table-header-group    此元素会作为一个或多个行的分组来显示（类似 <thead>）。

• table-footer-group    此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。

• table-row    此元素会作为一个表格行显示（类似 <tr>）。

• table-column-group    此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。

• table-column    此元素会作为一个单元格列显示（类似 <col>）

• table-cell    此元素会作为一个表格单元格显示（类似 <td> 和 <th>）

• table-caption    此元素会作为一个表格标题显示（类似 <caption>）

flex