display：table布局的几个比较好的应用

朱雀 2020-06-20 14:56 713阅读 0赞

首先还是了解下基础知识：

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-spacing：定义相邻两个单元格边框间的距离。

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

这段话的意思是，如果我们为元素使用“display:table-cell;”属性，而不将其父容器设置为“display:table-row;”属性，浏览器会默认创建出一个表格行，就好像文档中真的存在一个被声明的表格行一样。

比较好的应用场景：

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

div{display:table-cell; width:1em; height:1em; border:1px solid #beceeb; font-size:144px; text-align:center; vertical-align:middle;}
    div img{vertical-align:middle;}

其中div的宽高是根据图片宽高的最大值设置的，这样就可以使的不同大小的图片在同样的容器内垂直居中。

2.左侧宽度固定右侧宽度自适应布局

只需要设置左侧宽度固定值，右侧设置display：table-cell 。这样右侧就会根据父级容器宽度进行自适应宽度。

其实这个就是根据table布局的特有的特点（td之和会填充满tr）而来的。

3.等高布局

（td的高度是一样的）

4.列表布局

（table布局）