冷门布局方法tabel-cell的可行性研究

艾琨原

display:table-cell属性简介display：table-cell；会使元素表现的类似一个表格中的单元格 td，利用这个特性可以实现文字的垂直居中效果。同时它也会破坏一些CSS属性，使用 table-cell 时最好不要与 float 以及 position:absolute 一起使用，设置了 table-cell 的元素对高度和宽度高度敏感，对 margin 值无反应，可以响应 padding 的设置，表现几乎类似一个td元素。小结：不要与 float：left;position:absolute; 一起使用。可以实现大小不固定元素的垂直居中。margin 设置无效，响应 padding 设置。对高度和宽度高度敏感。不要对display：table-cell使用百分比设置宽度和高度。下面介绍几个 table-cell 的应用：1.高度不固定内容水平垂直居中文字水平垂直居中： 我是一大推文字，我想要垂直居中，这是省略这是省略这是省略这是省略关键在于设置了 display:cell; 后，vertical-align:middle 使文字内容垂直居中。水平垂直居中：        中间的会随着外层容器的大小而自动水平垂直居中，其实原理和文字水平垂直居中一模一样。2.多列布局实现文字水平方向对齐       我是左边        我是中间         我是右边  可以看到左右两边以及中间部分的文字，虽然它们在不同的容器中，且不用管当前列容器设置的padding是多少，它们在水平方向上是绝对对齐的。3.等高布局                          这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字。。。。。      拉伸宽度，会发现左右两侧始终保持高度一致。4.均分列表布局  001  002  003  004  005以前进行类似的布局我都会使用 display:inline-block; 的方式，需要在ul上设置 font-size:0; 来清除每一个小块之间的间隙，还需要为每一个项写一个百分比宽度。使用 table-cell 后，不需要写百分比宽度，也不需要清除小块间的间隙。而且添加额外项时，会自动平均分配宽度。5.两栏自适应布局即左侧宽度固定，右侧自动分配剩余空间：                          这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字。。。。。      左侧宽度固定，右侧宽度自适应。布局原理也可以用BFC来解释，左侧和右侧都是BFC块，BFC块是不会和float块发生重叠的。6.诡异的百分比宽高使用table-cell有一个让人很抓狂的地方，那就是他的宽高是不能使用百分比设置的，具体的原因我一直没有找到，只能理解为这是这个属性的特性。希望有知道的老铁告知一声。下面说一说关于百分比宽高的结论：1.高度设置百分比无效，只与内容的实际高度有关2.宽度设置百分比分两种情况，*一种是父容器设置 display:table;，这种情况下分两种情况1.没有其他元素 table-cell 的容器会获得它前面的元素在水平方向分配完的全部宽度。2.在其前面有其他元素时，其宽度可以按照 display:inline-block 的元素来计算，也就是宽度会小于等于其百分比计算值的宽度的*在父容器未设置 table时，width 的百分比值可以理解为内容区宽度加上 border-box 左右两边到父容器边框的距离，也就是 width 的百分比值越小，其所占据的宽度越大如果你对这个问题比较感兴趣，可以看看这个问答。真的是匪夷所思啊。小结：所有的 display:table-cell; 布局中，vertical-align 属性对于文字对齐都是很关键的。Q&AQ:有兼容性的坑么，生产环境使用的如何？A:对于兼容性，只是在新版的chrome中测试过，生产环境中还是不建议用这种小众的方案，毕竟出了问题也不好找解决方案。Q:相对其他对齐或者布局方式的优势是？A:相对其他布局方式，其实并没啥优势，而且还是属于比较小众的布局方式。但是针对一些特殊的场景，使用起来还是很方便的。比如对于列子一，使用table-cell的方式就要比其他布局方式简单。紧追技术前沿，深挖专业领域扫码关注我们吧！