这里是修真院前端小课堂，每篇分享文从
【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】
八个方面深度解析前端知识/技能，本篇分享的是：
【 display:table有那些应用？】
大家好，我是IT修真院北京分院25期的学员，一枚正直纯洁善良的web前端程序员
今天给大家分享一下，修真院官网css任务13，深度思考中的知识点——移动端有哪些常见的布局方式？
1.背景介绍
当IE8发布时，它将支持很多新的CSS display属性值，包括与表格相关的属性值：table、table-row和table-cell，（ie6.7不支持） 。它标志着复杂CSS布局技术的结束，同时也给了HTML表格布局致命一击。最终，使用CSS布局来制作出类似于table布局的栅格将会变得十分迅速和简单。
2.知识剖析
给HTML元素指定与表格相关的display属性值，使得它们像表格元素那样渲染。以下是这些可用的display属性值：
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-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的用途是尽可能的宽的意思。
3.等高布局
4.和inline-block组合使用
A和B的父元素均设置了display：table-cell属性，所以 它们均匀占据设置了display：table的div元素。而A和B元素设置display：inline-block是为了让它们相应text-align的属性设置。
5.列表布局
这类布局常用浮动布局（给每个li加上float：left属性）实现，但这样做有明显不足：
需要清除浮动
不支持不定高列表的浮动
display：table-cell可以代替浮动布局，但是其不是最好的方法。其他方法有待进一步学习！
5.编码实战
6.扩展思考
table布局有什么缺点，为什么渐渐被淘汰？
Table会阻挡浏览器渲染引擎的渲染顺序。(会延迟页面的生成速度，让用户等待更久的时间。)
Table里显示图片时需要你把单个、有逻辑性的图片切成多个图。(增加设计的复杂度，增加页面加载时间，增加HTTP会话数。)
在某些浏览器中Table里的文字的拷贝会出现问题
Table会影响其内部的某些布局属性的生效(比如里的元素的height:100%)
Table对对于页面布局来说，从语义上看是不正确的。
table一旦设计完成就变成死的，很难通过CSS让它展现新的面貌。
7.参考文献
8.更多讨论
视频:密码: nwn3
技能树.IT修真院
“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。
这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧 ！
更多内容，可以加入IT交流群565734203与大家一起讨论交流
这里是技能树·IT修真院：https://www.jnshu.com，初学者转行到互联网的聚集地