display:table 有哪些应用？

今天给大家分享的是

《display:table 有哪些应用？》

1. 背景介绍

当 IE8 发布时，它将支持很多新的 CSS display 属性值，包括与表格相关的属性值：table、table-row 和 table-cell，（ie6.7 不支持）。它标志着复杂 CSS 布局技术的结束，同时也给了 HTML 表格布局致命一击。最终，使用 CSS 布局来制作出类似于 table 布局的栅格将会变得十分迅速和简单。

2. 知识剖析

先来讲讲 px

英文为 pixel (像素), 它是图像显示基本单元。分辨率是指在长和宽的两个方向上各拥有的像素个数。一个像素有多大呢？主要取决于显示器的分辨率，相同面积不同分辨率的显示屏，其像素点大小就不相同。其实这里就是物理像素，又叫设备像素。英文名（devicepixels, 简称 dp）最好记住英语简称，不然混在一起脑子被搅成浆糊，还有它的单位是 pt。这些有限的点就叫做像素，每一个长度方向上的像素个数乖每一个宽度方向上的像素个数的形式表示，就叫做图片的分辨率。

基本定义

CSS2.1 表格模型中的元素，可能不会全部包含在除 HTML 之外的文档语言中。这时，那些 “丢失” 的元素会被模拟出来，从而使得表格模型能够正常工作。所有的表格元素将会自动在自身周围生成所需的匿名 table 对象，使其符合 table/inline-table、table-row、table-cell 的三层嵌套关系。

基础知识

table：使该元素按 table 样式渲染

table-row：使该元素按 tr 样式渲染

table-cell：使该元素按 td 样式渲染

table-row-group：使该元素按 tbody 样式渲染

table-header-group：使该元素按 thead 样式渲染

table-footer-group：使该元素按 tfoot 样式渲染

table-caption：使该元素按 caption 样式渲染

table-column：使该元素按 col 样式渲染

table-column-group：使该元素按 colgroup 样式渲染

table-layoutL: 将 table-layout 属性设置为 fixed 可以让浏览器按照固定算法来渲染单元格的宽度。

Border-collapse：定义 table 布局元素之间使用何种形式的边框，是共用边框（赋值为 collapse）还是使用各自独立的边框（赋值为 separate）。

Border-spacingleft：定义相邻两个单元格边框间的距离。

table-cell 特性

对宽度高度敏感

响应 padding 属性

内容溢出时会自动撑开父元素

3. 常见问题

1. 大小不固定元素的垂直居中

2. 两列自适应布局

3. 等高布局

4. 和 inline-block 组合使用

5. 列表布局

4. 解决方案

1. 大小不固定元素的垂直居中

display：table-cell 加上 vertical-align：middle 使高度不同的

元素都垂直居中，其中 div 的 display：inline-block 使几个 div 在同一行显示。

2. 两列自适应布局

display:table-cell 元素生成的匿名 table 默认 table-layout:auto。宽度将

基于单元格内容自动调整。当内容足够多将宽度完全撑开时，再让某个元素（例如关闭按钮）右侧

定位就会有问题。所以设置 width:3000px 的用途是尽可能的宽的意思。