display:table 有哪些应用？

原创

于 2019-05-17 09:45:39 发布 · 759 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #css #表格 #table

本文介绍了CSS display:table及其相关属性在布局中的应用，包括大小不固定元素的垂直居中、两列自适应布局、等高布局等场景，并提供了解决方案。通过模拟表格布局，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-