display:table布局可以实现一些其他布局比较难实现的场景,本文就主要介绍了diaplay:table布局神器的绝妙应用场景，具有一定的参考价值，感兴趣的可以了解一下
一、CSS display属性与表格布局相关的属性值解释
- table 此元素会作为块级表格来显示（类似
），表格前后带有换行符。
- table-row-group 此元素会作为一个或多个行的分组来显示（类似 ）。
- table-header-group 此元素会作为一个或多个行的分组来显示（类似 ）。
- table-footer-group 此元素会作为一个或多个行的分组来显示（类似 ）。
- table-row 此元素会作为一个表格行显示（类似
）。 - table-column-group 此元素会作为一个或多个列的分组来显示（类似
）。 - table-column 此元素会作为一个单元格列显示（类似
） - table-cell 此元素会作为一个表格单元格显示（类似
和 ） - table-caption 此元素会作为一个表格标题显示（类似
） 二、等高三栏布局
Title 1
2
3
1
2
3
4
三、等高栅格布局
Title 
描述1
描述2
描述1
描述1
描述1
描述2
描述3
四、多行文本垂直居中
Title 申请原创将启用（Creative Commons ）版权模板，如果不是原创文章，请选择转载或翻译 原创文章默认开启打赏, 打赏管理
五、display: table属性布局和table元素布局的区别？
一般的，不推荐使用table元素进行页面布局。table元素在HTML当中是一个包含语义的标签：它描述什么是数据。因此，你只能用它来标记那些需要制表的数据，例如一张财务信息表。如果数据能够以电子表格的形式保存在你的电脑中，那它在HTML文档中很可能需要用到table标签进行标记。
display的table属性值只是声明了某些元素在浏览器中的样式——它不包含语义。如果使用table元素来进行布局，它将会告诉客户端：这些数据是制表的。使用一些display属性被设置为table和table-cell之类的div标签，除了告诉客户端以某种特定的样式来渲染它们以外，不会告诉客户端任何语义，只要客户端能够支持这些属性值。
当然，我们同样还要注意，当真的需要制表数据的时候，不要使用一大堆被声明为display:table;的div元素。CSS表格除了包含table布局的普通规则之外，同时还有着CSS table布局的超强特性：缺少的表格元素会被浏览器以匿名方式创建。
到此这篇关于diaplay:table布局神器的绝妙应用场景的文章就介绍到这了,更多相关diaplay:table布局内容请搜索0133技术站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持0133技术站！
以上就是diaplay:table布局神器的绝妙应用场景的详细内容，更多请关注0133技术站其它相关文章！
相关文章
- table-row-group 此元素会作为一个或多个行的分组来显示（类似 ）。
