CSS布局带来的巨大影响:CSS display属性值

网页元素应用上那些与表格相关的display属性值后，能够模仿出与表格相同的特性。我将会在该文中给大家演示这种方法给CSS布局带来的巨大影响。

创建匿名表格元素的规则
这些匿名的盒对象不是用魔术变出来的，它们也不会自动往你的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中的所有元素。
请看以下代码：
<div class="row">ROW A</div>
<div class="row">ROW B</div>
<div>Not a row</div>
上面两排类名为“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属性。下面是一些派得上用场的属性：
table-layout
将table-layout属性设置为fixed可以让浏览器按照固定算法来渲染单元格的宽度。这在固定宽度布局中非常有用，例如我们最上面的那段布局代码。
Border-collapse
和普通的HTML表格一样，你可以使用border-collapse属性来定义你的table布局元素之间使用何种形式的边框，是共用边框（赋值为collapse）还是使用各自独立的边框（赋值为separate）。
Border-spacing
如果你声明了“border-collapse:separate;”，那么你就可以使用border-spacing属性来定义相邻两个单元格边框间的距离。
制作完美的栅格
制作等高栅格对于传统CSS布局技术来说已经成为一个难题，然而使用合适的CSS表格则很容易实现。例如，如果我们想制作一个包含图片和标题的影像图库栅格（如下图），使用CSS表格很快就能搞定。
以下是我们这个影像图库的代码：
<div class="grid">
<div class="row">
<div class="image">
<img src="images/photo1.jpg" alt="A Lily" />
<p>A lily in the gardens of The Vyne Country House</p>
</div>
<div class="image">
<img src="images/photo3.jpg" alt="A Fuchsia plant" />
<p>Fuchsia plant in my garden</p>
</div>
</div>
<div class="row">
<div class="image">
<img src="images/photo2.jpg" alt="A crazy looking Allium flower" />
<p>A crazy looking flower</p>
</div>
<div class="image">
<img src="images/photo4.jpg" alt="A Robin sitting on a fence" />
<p>
This robin has been visiting our garden over the summer.
He is very friendly and doesn't seem to be too worried about sharing the garden with us.
</p>
</div>
</div>
</div>
每张图片被一个img标签引用，它的标题包含在P元素中，它们均被包含在一个类名为“image”的div元素中。同一行的div被一个类名为“row”的div元素包含，整个影像图库被一个类名为“grid”的div元素包含。
实现这个布局的CSS代码十分简单：
.grid {
display: table;
border-spacing: 4px;
}
.row {
display: table-row;
}
.image {
display: table-cell;
width: 240px;
background-color: #000;
border: 8px solid #000;
vertical-align: top;
text-align: center;
}
.image p {
color: #fff;
font-size: 85%;
text-align: left;
padding-top: 8px;
}
以上CSS代码简明易懂，可能你还注意到了我们是怎样通过border-spacing属性来控制单元格图像之间的距离的。制作一张栅格布局变得再简单不过了，同时我们还可以避免那些使用float元素实现等高布局所带来的麻烦。
将理论运用于实战
本文展示了CSS display属性中表格相关属性值的基础用法，开发者不断努力通过CSS来实现可靠的基础栅格布局，而这种方法最终会使其变得更简单。我们已经对CSS表格布局做了一个简明易懂的介绍，研究了display属性中各种表格相关的属性值，找出了匿名表格元素的本质，另外还发现了一些其它有用的CSS表格属性。
接下来的一步就看你了，你已经了解到使用CSS表格制作栅格布局的潜力，带着好奇心去自己尝试下吧！运用从本文学到的知识，你可以开始实践你自己的CSS表格布局并发明一些新的技术。

最新评论