这里是修真院web小课堂，每篇分享文从
【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】
八个方面深度解web知识/技能，本篇分享的是：
【
display:table有哪些应用？
】
大家好，我是IT修真院武汉分院第九期的学员杨梓雄，一枚正直纯洁善良的前端程序员，今天给大家分享一下，修真院官网前端工程师（职业）css任务06，深度思考中的知识点——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-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-spacingleft：定义相邻两个单元格边框间的距离。
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的用途是尽可能的宽的意思。
5.编码实战
6.拓展思考
7.参考文献
参考二：我所知道的几种display:table-cell的应用
8.更多讨论
利用伪类元素清楚浮动中，display:table，与display:block;有什么区别
视频链接：
display:table有哪些应用？_腾讯视频
作者：小书记_2409
链接：https://www.jianshu.com/p/fd10c823a654
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
如果这篇文章对你有帮助，并且使你对修真院免费在线学习感兴趣，可以通过我的邀请链接进行注册，这样可以在日后为你的线下学习减免学费。
邀请链接：http://www.jnshu.com/login/1/23246304
邀请码：23246304
更多内容，可以加入IT交流群565734203与大家一起讨论交流
这里是技能树·IT修真院：https://www.jnshu.com，初学者转行到互联网的聚集地