CSS的 display : table 以表格形式去改变渲染（不具语义误导）

本文链接：https://blog.csdn.net/qq_33649233/article/details/51874341

可以给HTML元素指定与表格相关的display属性值，使得它们像表格元素那样渲染。以下是这些可用的display属性值：

display : table
使该元素按table样式渲染【块级表格，前后有换行符\n】
??? 块级默认前后都带有换行符\n ???
display : inline-table
使该元素按table样式渲染【内联表格，前后无换行符\n】
display : table-row
使该元素按tr样式渲染【一个表格行】【前后都带有换行符\n】
display : table-row-group
使该元素按tbody样式渲染【一个或多个行的分组】【前后都带有换行符\n】
display : table-header-group
使该元素按thead样式渲染【一个或多个行的分组】【前后都带有换行符\n】
display : table-footer-group
使该元素按tfoot样式渲染【一个或多个行的分组】【前后都带有换行符\n】
display : table-caption
使该元素按caption样式渲染【一个表格标题】
table-cell
使该元素按td样式渲染【一个表格单元】
display : table-column
使该元素按col样式渲染【一个表格单元】
display : table-column-group
使该元素按colgroup样式渲染【一个表格单元或多个表格单元的分组】

…用table布局不是错的吗？

table元素在HTML当中是一个包含语义的标签：它描述什么是数据。
因此，你只能用它来标记那些需要制表的数据，例如一张财务信息表。
如果数据能够以电子表格的形式保存在你的电脑中，那它在HTML文档中很可能需要用到table标签进行标记。
从另一方面来看，display的table属性值只是声明了某些元素在浏览器中的样式——它不包含语义（不是用标签形式）。
如果使用table元素来进行布局，它将会告诉客户端：这些数据是制表的。

匿名表格元素=>被偷偷创建的元素

CSS表格除了包含table布局的普通规则之外，同时还有着CSS table布局的超强特性：缺少的表格元素会被浏览器以匿名方式创建。

CSS2.1规范中写道：

CSS2.1表格模型中的元素，可能不会全部包含在除HTML之外的文档语言中。这时，那些“丢失”的元素会被模拟出来，从而使得表格模型能够正常工作。所有的表格元素将会自动在自身周围生成所需的匿名table对象，使其符合table/inline-table、table-row、table-cell的三层嵌套关系。
这段话的意思是，如果我们为元素使用“display:table-cell;”属性，而不将其父容器设置为“display:table-row;”属性，浏览器会默认创建出一个表格行，就好像文档中真的存在一个被声明的表格行一样。

创建匿名表格元素的规则

这些匿名的盒对象不是用魔术变出来的，它们也不会自动往你的HTML源码中添加新的标签。为了完全发挥出匿名表格元素的优势，你最好能够对创建它们的规则有所了解。
如果布局中调用了匿名元素，浏览器将会根据需要创建一个匿名的盒对象并将它的CSS
display属性设置为table、table-row或table-cell中的一个。
如果某个元素已经被设置为“display:table-cell;”，而它的父节点（包含它的容器）没有被设置为“display:table-row;”属性，那么浏览器将会创建一个被设置为“display:table-row;”的匿名盒对象来嵌套它。并且与之相邻的属性为“display:
table-cell;”的兄弟节点也都会被这个匿名盒对象所包含，直到碰到一个没有被设置为“display:
table-cell;”的元素而结束这一行。

<div class="cell">CELL A</div> 
<div class="cell">CELL B</div> 
<div class="cell">CELL C</div> 
<div>Not a cell</div>

上面的三个类名为“cell”的div元素均被设置为“display:table-cell;”，
它们将会像一个单行表格的三个单元格一样并列排布。
最后一个div元素则不会被包含在这一表格行当中，
因为它没有被设置成“display:table-cell;”。

如果某个元素被设置为“display:table-row;”，而它的父节点没有被设置为“display:table;”（或者“display:table-row-group;”），浏览器将会创建一个被设置为“display:table;”的匿名盒对象来嵌套它，与之相邻的属性为“display:
table-row;”的兄弟节点也都会被包含其中。
同样，如果某个元素被设置为“display:table-row;”，但它的内部却缺少“display:table-cell;”的元素，那么一个匿名的table-cell将会被创建，用来包含该table-row中的所有元素。

使用一些display属性被设置为table和table-cell之类的div标签，
除了告诉客户端以某种特定的样式来渲染它们以外，不会告诉客户端任何语义，
只要客户端能够支持这些display属性值。
我们就能够使用这种display:table-xxx 实现复杂的栅格布局。

额外扩展：