|
創(chuàng)建匿名表格元素的規(guī)則
這些匿名的盒對象不是用魔術(shù)變出來的，它們也不會自動往你的HTML源碼中添加新的標簽。為了完全發(fā)揮出匿名表格元素的優(yōu)勢，你最好能夠?qū)?chuàng)建它們的規(guī)則有所了解。如果布局中調(diào)用了匿名元素，瀏覽器將會根據(jù)需要創(chuàng)建一個匿名的盒對象并將它的CSS display屬性設(shè)置為table、table-row或table-cell中的一個。
如果某個元素已經(jīng)被設(shè)置為“display:table-cell;”，而它的父節(jié)點（包含它的容器）沒有被設(shè)置為“display:table-row;”屬性，那么瀏覽器將會創(chuàng)建一個被設(shè)置為“display:table-row;”的匿名盒對象來嵌套它。并且與之相鄰的屬性為“display: table-cell;”的兄弟節(jié)點也都會被這個匿名盒對象所包含，直到碰到一個沒有被設(shè)置為“display: table-cell;”的元素而結(jié)束這一行。以下是相關(guān)的代碼樣例：
<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元素均被設(shè)置為“display:table-cell;”，它們將會像一個單行表格的三個單元格一樣并列排布。最后一個div元素則不會被包含在這一表格行當中，因為它沒有被設(shè)置成“display:table-cell;”。
如果某個元素被設(shè)置為“display:table-row;”，而它的父節(jié)點沒有被設(shè)置為“display:table;”（或者“display:table-row-group;”），瀏覽器將會創(chuàng)建一個被設(shè)置為“display:table;”的匿名盒對象來嵌套它，與之相鄰的屬性為“display: table-row;”的兄弟節(jié)點也都會被包含其中。同樣，如果某個元素被設(shè)置為“display:table-row;”，但它的內(nèi)部卻缺少“display:table-cell;”的元素，那么一個匿名的table-cell將會被創(chuàng)建，用來包含該table-row中的所有元素。
請看以下代碼：
<div class="row">ROW A</div>
<div class="row">ROW B</div>
<div>Not a row</div>
上面兩排類名為“row”的div元素被設(shè)置了“display:table-row;”屬性，它們將會像單列表格中的兩行一樣依次排列。最后一個div元素則不會包含在這個匿名的table中。
以此類推，如果某個元素的display屬性值被設(shè)置為與表格相關(guān)的值，如table-row-group、table-header-group、 table-footer-group、table-column、table-column-group以及table-caption，但同時又沒有一個被設(shè)置為“display:table;”的父元素，那么一個匿名的盒對象將會被創(chuàng)建用來包含該元素和它的某些兄弟節(jié)點。
其他有用的表格屬性
當使用CSS表格時，因為這些元素遵從table布局的普通規(guī)則，所以你還可以給它們應(yīng)用其它表格相關(guān)的CSS屬性。下面是一些派得上用場的屬性：
table-layout
將table-layout屬性設(shè)置為fixed可以讓瀏覽器按照固定算法來渲染單元格的寬度。這在固定寬度布局中非常有用，例如我們最上面的那段布局代碼。
Border-collapse
和普通的HTML表格一樣，你可以使用border-collapse屬性來定義你的table布局元素之間使用何種形式的邊框，是共用邊框（賦值為collapse）還是使用各自獨立的邊框（賦值為separate）。
Border-spacing
如果你聲明了“border-collapse:separate;”，那么你就可以使用border-spacing屬性來定義相鄰兩個單元格邊框間的距離。
制作完美的柵格
制作等高柵格對于傳統(tǒng)CSS布局技術(shù)來說已經(jīng)成為一個難題，然而使用合適的CSS表格則很容易實現(xiàn)。例如，如果我們想制作一個包含圖片和標題的影像圖庫柵格（如下圖），使用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元素包含。
實現(xiàn)這個布局的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元素實現(xiàn)等高布局所帶來的麻煩。
將理論運用于實戰(zhàn)
本文展示了CSS display屬性中表格相關(guān)屬性值的基礎(chǔ)用法，開發(fā)者不斷努力通過CSS來實現(xiàn)可靠的基礎(chǔ)柵格布局，而這種方法最終會使其變得更簡單。我們已經(jīng)對CSS表格布局做了一個簡明易懂的介紹，研究了display屬性中各種表格相關(guān)的屬性值，找出了匿名表格元素的本質(zhì)，另外還發(fā)現(xiàn)了一些其它有用的CSS表格屬性。
接下來的一步就看你了，你已經(jīng)了解到使用CSS表格制作柵格布局的潛力，帶著好奇心去自己嘗試下吧！運用從本文學(xué)到的知識，你可以開始實踐你自己的CSS表格布局并發(fā)明一些新的技術(shù)。
本文鏈接：http://www.95time.cn/tech/web/2008/6257.asp 
出處：Alipay UED
責(zé)任編輯：moby
上一頁 基于display:table的CSS布局 [2] 下一頁
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 3 頁 基于display:table的CSS布局 [3]
