css table布局：基于display:table的css布局 -凯发k8官方网

一个关键的区别

　　作为从《css禅意花园》中学习css的个人，我讨厌html table布局。我不知不觉的产生了“虚幻的相关偏见”，高估html table和css table之间的区别。

　　如果它看起来、工作起来、听起来像一个表格，那么它必须是一个表格？ 错误！

　　事实上，html table和css table之间的真正区别是：适当地调整css属性，css的table能做到许多html table 不能做的事情，可以从table中择优选择属性使用。

使用css表格

　　css表格能够解决所有那些我们在使用绝对定位和浮动定位进行多列布局时所遇到的问题。例如，“display:table;”的css声明能够让一个html元素和它的子节点像table元素一样。

　　使用基于表格的css布局，使我们能够轻松定义一个单元格的边界、背景等样式，而不会产生因为使用了table那样的制表标签所导致的语义化问题。

　　在深入了解这种方法之前，让我们先来写份html文档实例：

　　这份html源代码满足了内容呈现方面的要求。先是导航栏，然后是附加栏，最后是内容栏。我们同样需要将以下css样式应用上去：

　　这种基于表格的新css布局方式能够正确的在ie8、firefox、safari和opera（译者注：包括ff2/ff3/google都通过了测试）中显示出来。我们轻松实现了三栏等高布局，而无需使用伪造背景图片之类的技巧，更不用担心定位和清除浮动的问题！

它是怎样实现的？

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

难道用table布局不是错的吗？

　　可能你会对我们上面给出的布局实例有点不爽——毕竟，正如我自己也是一名web标准化的拥护者，我们不都一直坚持不应该使用table来进行布局吗？
　　table元素在html当中是一个包含语义的标签：它描述什么是数据。因此，你只能用它来标记那些需要制表的数据，例如一张财务信息表。如果数据能够以电子表格的形式保存在你的电脑中，那它在html文档中很可能需要用到table标签进行标记。从另一方面来看，display的table属性值只是声明了某些元素在浏览器中的样式——它不包含语义。如果使用table元素来进行布局，它将会告诉客户端：这些数据是制表的。使用一些display属性被设置为table和table-cell之类的div标签，除了告诉客户端以某种特定的样式来渲染它们以外，不会告诉客户端任何语义，只要客户端能够支持这些属性值。
　　当然，我们同样还要注意，当我们真的需要制表数据的时候不要使用一大堆被声明为display:table;的div元素。
　　我们上面的那个例子是一个简单的单行三列布局，无需费尽心思，我们就能够使用这种技术轻松实现复杂的栅格布局。

匿名表格元素

　　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;”的元素而结束这一行。以下是相关的代码样例：

　　上面的三个类名为“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中的所有元素。请看以下代码：

　　上面两排类名为“row”的div元素被设置了“display:table-row;”属性，它们将会像单列表格中的两行一样依次排列。最后一个div元素则不会包含在这个匿名的table中。
　　以此类推，如果某个元素的display属性值被设置为与表格相关的值，如table-row-group、table-header-group、 table-footer-group、table-column、table-column-group以及table-caption，但同时又没有一个被设置为“display:table;”的父元素，那么一个匿名的盒对象将会被创建用来包含该元素和它的某些兄弟节点。

其他有用的表格属性

　　当使用css表格时，因为这些元素遵从table布局的普通规则，所以你还可以给它们应用其它表格相关的css属性。下面是一些派得上用场的属性：

制作完美的栅格

　　制作等高栅格对于传统css布局技术来说已经成为一个难题，然而使用合适的css表格则很容易实现。例如，如果我们想制作一个包含图片和标题的影像图库栅格（如下图），使用css表格很快就能搞定。

　　以下是我们这个影像图库的代码：每张图片被一个img标签引用，它的标题包含在p元素中，它们均被包含在一个类名为“image”的div元素中。同一行的div被一个类名为“row”的div元素包含，整个影像图库被一个类名为“grid”的div元素包含。
　　实现这个布局的css代码十分简单：

　　效果图：

　　当然，这个我采用的是vertical-align:middle;你如果采用top对齐，那么图片就是完全一致对齐啦。

转载于:https://www.cnblogs.com/goloving/p/7678291.html

总结

以上是凯发k8官方网为你收集整理的css table布局：基于display:table的css布局的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。

欢迎分享！

转载请说明来源于"生活随笔"，并保留原作者的名字。

本文地址：css table布局：基于display:table的cs