CSS3的display:table

发表于 | 分类于 | 次

CSS3的display:table

两种类型的表格布局

  1. HTML Table:HTML Table是指使用原生的table标签。

  2. CSS Table:CSS Table是指用CSS属性模仿HTML 表格的模型。

1
2
3
4
5
6
7
8
9
table { display: table }
tr { display: table-row }
thead { display: table-header-group }
tbody { display: table-row-group }
tfoot { display: table-footer-group }
col { display: table-column }
colgroup { display: table-column-group }
td, th { display: table-cell }
caption { display: table-caption }

显而易见HTML Table使用标签table，tr、td等标签，就是使用CSS Table的相关属性来实现的。

table：指定对象作为块元素级的表格。

inline-table：指定对象作为内联元素级的表格。

table-caption：指定对象作为表格标题。

table-cell：指定对象作为表格单元格。

table-row：指定对象作为表格行。

table-row-group：指定对象作为表格行组。

table-column：指定对象作为表格列。

table-column-group：指定对象作为表格列组显示。

table-header-group：指定对象作为表格标题组。

table-footer-group：指定对象作为表格脚注组。

动态垂直居中对齐




Hello World


Hello World



动态水平居中对齐

为了让元素动态水平居中对齐，可以设置元素为display: inline-block。然后在该元素的外面包裹层设置text-align: center。这里的文本对齐缺点是有副作用的。外层包裹层的所有子元素继承了text-align: center，造成潜在的覆盖。


动态水平居中对齐


使用display: table



使用 display: inline-block



响应式布局

css Table布局可以让一个元素表现上不像一个表格。只要将元素的display属性从table-cell切换到block，我们就能够将元素堆叠起来，你可以根据屏幕的可视区域改变元素的堆叠的顺序。

动态高度的页脚贴在页面底部

页脚动态贴在底部需要满足以下两个条件：

  • 当主体的内容高度不超过可视区域高度的时候，页脚贴在页面底部。
  • 当主体的内容高度超过可视区域高度的时候，页脚将按正常布局。
这里是主体区域
这里是底部

圣杯布局

  • 具有中心内容主体和固定宽度的侧边栏
  • 在源代码中，允许中心内容主体列出现在第一个节点位置
  • 允许任何一列的高度最高
头部
左边栏
主体内容
右侧栏
页脚底部