css--table布局

display：table布局

单元格有一些比较特别的属性，例如元素的垂直居中对齐，关联伸缩等.

table表格中的单元格最大的特点之一就是同一行列表元素都等高。

display:table-cell下的列表布局最适用的场景是：列表个数不固定，但是，无论列表几个，都平分容器空间。什么意思呢？就是如果4个列表，希望每个宽度25%，3个就33.3333%，2个列表希望每个宽度50%。此时，没有比display:table-cell更合适的技术了。

设置了display:table-cell的元素对宽度高度敏感，对margin值无反应，响应padding属性，基本上就是活脱脱的一个td标签元素了。

 

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

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布局）