CSS布局帶來的巨大影響:CSS display屬性值
我要評論
網(wǎng)頁元素應(yīng)用上那些與表格相關(guān)的display屬性值后，能夠模仿出與表格相同的特性。我將會在該文中給大家演示這種方法給CSS布局帶來的巨大影響。
應(yīng)原書編輯要求，先在文章頂部給出鏈接：《Everything You Know About CSS Is Wrong》http://www.sitepoint.com/books/csswrong1/
這本書是10月發(fā)行的新書，為了避免版權(quán)糾紛，如要轉(zhuǎn)載本文請保留以上鏈接，并遵循該 CC2.5協(xié)議。
從 digital-web 的首頁上看到一個(gè)標(biāo)題《Everything You Know About CSS Is Wrong》，被雷過之后仔細(xì)看了下原文，發(fā)現(xiàn)了一種新的CSS布局思路（其實(shí)就是詳細(xì)介紹了display:table屬性）。在IE6仍是王道的時(shí)代談這種技術(shù)為時(shí)過早，全當(dāng)是練習(xí)英文翻譯貼出來給大家分享下，歡迎大家指點(diǎn)不足之處。
—————————以下是中文翻譯——————————–
當(dāng)IE8發(fā)布時(shí)，它將支持很多新的CSS display屬性值，包括與表格相關(guān)的屬性值：table、table-row和table-cell，它也是最后一款支持這些屬性值的主流瀏覽器。它標(biāo)志著復(fù)雜CSS布局技術(shù)的結(jié)束，同時(shí)也給了HTML表格布局致命一擊。最終，使用CSS布局來制作出類似于table布局的柵格將會變得十分迅速和簡單。
網(wǎng)頁元素應(yīng)用上那些與表格相關(guān)的display屬性值后，能夠模仿出與表格相同的特性。我將會在該文中給大家演示這種方法給CSS布局帶來的巨大影響。
使用CSS表格
CSS表格能夠解決所有那些我們在使用絕對定位和浮動定位進(jìn)行多列布局時(shí)所遇到的問題。例如，“display:table;”的CSS聲明能夠讓一個(gè)HTML元素和它的子節(jié)點(diǎn)像table元素一樣。使用基于表格的CSS布局，使我們能夠輕松定義一個(gè)單元格的邊界、背景等樣式，而不會產(chǎn)生因?yàn)槭褂昧藅able那樣的制表標(biāo)簽所導(dǎo)致的語義化問題。
在深入了解這種方法之前，讓我們先來寫份HTML文檔實(shí)例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
? HTML head content…
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="main">
<div id="nav">
? navigation column content…
</div>
<div id="extras">
? news headlines column content…
</div>
<div id="content">
? main article content…
</div>
</div>
</div>
</body>
</html>
這份HTML源代碼滿足了內(nèi)容呈現(xiàn)方面的要求。先是導(dǎo)航欄，然后是附加欄，最后是內(nèi)容欄。
我們同樣需要將以下CSS樣式應(yīng)用上去：
#main {
display: table;
border-collapse: collapse;
}
#nav {
display: table-cell;
width: 180px;
background-color: #e7dbcd;
}
#extras {
display: table-cell;
width: 180px;
padding-left: 10px;
border-right: 1px dotted #d7ad7b;
}
#content {
display: table-cell;
width: 380px;
padding-left: 10px;
}
這種基于表格的新CSS布局方式能夠正確的在IE8、Firefox、Safari和Opera（譯者注：包括FF2/FF3/Google都通過了測試）中顯示出來。下面這張圖片是它在IE8中的樣子：
我們輕松實(shí)現(xiàn)了三欄等高布局，而無需使用偽造背景圖片之類的技巧，更不用擔(dān)心定位和清除浮動的問題！
#p#
網(wǎng)頁元素應(yīng)用上那些與表格相關(guān)的display屬性值后，能夠模仿出與表格相同的特性。我將會在該文中給大家演示這種方法給CSS布局帶來的巨大影響。
它是怎樣實(shí)現(xiàn)的？
你可以給HTML元素指定與表格相關(guān)的display屬性值，使得它們像表格元素那樣渲染。以下是這些可用的display屬性值： table
使該元素按table樣式渲染 table-row
使該元素按tr樣式渲染 table-cell
使該元素按td樣式渲染 table-row-group
使該元素按tbody樣式渲染 table-header-group
使該元素按thead樣式渲染 table-footer-group
使該元素按tfoot樣式渲染 table-caption
使該元素按caption樣式渲染 table-column
使該元素按col樣式渲染 table-column-group
使該元素按colgroup樣式渲染
等等……難道用table布局不是錯(cuò)的嗎？
可能你會對我們上面給出的布局實(shí)例有點(diǎn)不爽——畢竟，正如我自己也是一名WEB標(biāo)準(zhǔn)化的擁護(hù)者，我們不都一直堅(jiān)持不應(yīng)該使用table來進(jìn)行布局嗎？
table元素在HTML當(dāng)中是一個(gè)包含語義的標(biāo)簽：它描述什么是數(shù)據(jù)。因此，你只能用它來標(biāo)記那些需要制表的數(shù)據(jù)，例如一張財(cái)務(wù)信息表。如果數(shù)據(jù)能夠以電子表格的形式保存在你的電腦中，那它在HTML文檔中很可能需要用到table標(biāo)簽進(jìn)行標(biāo)記。
從另一方面來看，display的table屬性值只是聲明了某些元素在瀏覽器中的樣式——它不包含語義。如果使用table元素來進(jìn)行布局，它將會告訴客戶端：這些數(shù)據(jù)是制表的。使用一些display屬性被設(shè)置為table和table-cell之類的div標(biāo)簽，除了告訴客戶端以某種特定的樣式來渲染它們以外，不會告訴客戶端任何語義，只要客戶端能夠支持這些屬性值。
當(dāng)然，我們同樣還要注意，當(dāng)我們真的需要制表數(shù)據(jù)的時(shí)候不要使用一大堆被聲明為display:table;的div元素。
我們上面的那個(gè)例子是一個(gè)簡單的單行三列布局，無需費(fèi)盡心思，我們就能夠使用這種技術(shù)輕松實(shí)現(xiàn)復(fù)雜的柵格布局。
匿名表格元素
CSS表格除了包含table布局的普通規(guī)則之外，同時(shí)還有著CSS table布局的超強(qiáng)特性：缺少的表格元素會被瀏覽器以匿名方式創(chuàng)建。CSS2.1規(guī)范中寫道：
CSS2.1表格模型中的元素，可能不會全部包含在除HTML之外的文檔語言中。這時(shí)，那些“丟失”的元素會被模擬出來，從而使得表格模型能夠正常工作。所有的表格元素將會自動在自身周圍生成所需的匿名table對象，使其符合table/inline-table、table-row、table-cell的三層嵌套關(guān)系。
這段話的意思是，如果我們?yōu)樵厥褂?ldquo;display:table-cell;”屬性，而不將其父容器設(shè)置為“display:table-row;”屬性，瀏覽器會默認(rèn)創(chuàng)建出一個(gè)表格行，就好像文檔中真的存在一個(gè)被聲明的表格行一樣。
讓我們用個(gè)簡單的例子來研究下它的這一特性：以下是三欄柵格布局。我們將會用三份不同的HTML樣例，而它們將表現(xiàn)出相同的視覺效果。
首先，以下是能夠生成三列布局樣例的其中一份：
<div class="container">
<div class="row">
<div class="cell">CELL A</div>
<div class="cell">CELL B</div>
<div class="cell">CELL C</div>
</div>
</div>
這份嵌套的div元素看起來不是那么讓人興奮，稍等一會，我們現(xiàn)在來做點(diǎn)什么。它的CSS樣式也非常簡單：
.container {
display: table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
width: 100px;
height: 100px;
border: 1px solid blue;
padding: 1em;
}
以上CSS給類名為container的元素定義了“display:table;”屬性，類名為row的元素定義了“display:table-row;”，類名為cell的元素定義了“display:table-cell;”，同樣還給它定義了邊框、高度和寬度值。
以上HTML文檔明確地為三個(gè)單元格定義了包含它的表格和表格行，使用到了所有我們創(chuàng)建的CSS類名。然而，我們可以減少這些標(biāo)簽，移除一行div元素試試：
<div class="row">
<div class="cell">CELL A</div>
<div class="cell">CELL B</div>
<div class="cell">CELL C</div>
</div>
即使上面的代碼遺漏了聲明表格的那一行，瀏覽器仍將創(chuàng)建一個(gè)匿名的表格行。我們還可以移除更多的代碼：
<div class="cell">CELL A</div>
<div class="cell">CELL B</div>
<div class="cell">CELL C</div>
以上代碼遺漏了聲明表格和表格行的代碼，瀏覽器同樣會創(chuàng)建出這些匿名的盒對象。即使缺少這些標(biāo)簽元素，最終的效果仍然是一樣的。
#p#
網(wǎng)頁元素應(yīng)用上那些與表格相關(guān)的display屬性值后，能夠模仿出與表格相同的特性。我將會在該文中給大家演示這種方法給CSS布局帶來的巨大影響。
創(chuàng)建匿名表格元素的規(guī)則
這些匿名的盒對象不是用魔術(shù)變出來的，它們也不會自動往你的HTML源碼中添加新的標(biāo)簽。為了完全發(fā)揮出匿名表格元素的優(yōu)勢，你最好能夠?qū)?chuàng)建它們的規(guī)則有所了解。如果布局中調(diào)用了匿名元素，瀏覽器將會根據(jù)需要?jiǎng)?chuàng)建一個(gè)匿名的盒對象并將它的CSS display屬性設(shè)置為table、table-row或table-cell中的一個(gè)。
如果某個(gè)元素已經(jīng)被設(shè)置為“display:table-cell;”，而它的父節(jié)點(diǎn)（包含它的容器）沒有被設(shè)置為“display:table-row;”屬性，那么瀏覽器將會創(chuàng)建一個(gè)被設(shè)置為“display:table-row;”的匿名盒對象來嵌套它。并且與之相鄰的屬性為“display: table-cell;”的兄弟節(jié)點(diǎn)也都會被這個(gè)匿名盒對象所包含，直到碰到一個(gè)沒有被設(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>
上面的三個(gè)類名為“cell”的div元素均被設(shè)置為“display:table-cell;”，它們將會像一個(gè)單行表格的三個(gè)單元格一樣并列排布。最后一個(gè)div元素則不會被包含在這一表格行當(dāng)中，因?yàn)樗鼪]有被設(shè)置成“display:table-cell;”。
如果某個(gè)元素被設(shè)置為“display:table-row;”，而它的父節(jié)點(diǎn)沒有被設(shè)置為“display:table;”（或者“display:table-row-group;”），瀏覽器將會創(chuàng)建一個(gè)被設(shè)置為“display:table;”的匿名盒對象來嵌套它，與之相鄰的屬性為“display: table-row;”的兄弟節(jié)點(diǎn)也都會被包含其中。同樣，如果某個(gè)元素被設(shè)置為“display:table-row;”，但它的內(nèi)部卻缺少“display:table-cell;”的元素，那么一個(gè)匿名的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;”屬性，它們將會像單列表格中的兩行一樣依次排列。最后一個(gè)div元素則不會包含在這個(gè)匿名的table中。
以此類推，如果某個(gè)元素的display屬性值被設(shè)置為與表格相關(guān)的值，如table-row-group、table-header-group、 table-footer-group、table-column、table-column-group以及table-caption，但同時(shí)又沒有一個(gè)被設(shè)置為“display:table;”的父元素，那么一個(gè)匿名的盒對象將會被創(chuàng)建用來包含該元素和它的某些兄弟節(jié)點(diǎn)。
其他有用的表格屬性
當(dāng)使用CSS表格時(shí)，因?yàn)檫@些元素遵從table布局的普通規(guī)則，所以你還可以給它們應(yīng)用其它表格相關(guān)的CSS屬性。下面是一些派得上用場的屬性：
table-layout
將table-layout屬性設(shè)置為fixed可以讓瀏覽器按照固定算法來渲染單元格的寬度。這在固定寬度布局中非常有用，例如我們最上面的那段布局代碼。
Border-collapse
和普通的HTML表格一樣，你可以使用border-collapse屬性來定義你的table布局元素之間使用何種形式的邊框，是共用邊框（賦值為collapse）還是使用各自獨(dú)立的邊框（賦值為separate）。
Border-spacing
如果你聲明了“border-collapse:separate;”，那么你就可以使用border-spacing屬性來定義相鄰兩個(gè)單元格邊框間的距離。
制作完美的柵格
制作等高柵格對于傳統(tǒng)CSS布局技術(shù)來說已經(jīng)成為一個(gè)難題，然而使用合適的CSS表格則很容易實(shí)現(xiàn)。例如，如果我們想制作一個(gè)包含圖片和標(biāo)題的影像圖庫柵格（如下圖），使用CSS表格很快就能搞定。
以下是我們這個(gè)影像圖庫的代碼：
<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>
每張圖片被一個(gè)img標(biāo)簽引用，它的標(biāo)題包含在P元素中，它們均被包含在一個(gè)類名為“image”的div元素中。同一行的div被一個(gè)類名為“row”的div元素包含，整個(gè)影像圖庫被一個(gè)類名為“grid”的div元素包含。
實(shí)現(xiàn)這個(gè)布局的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屬性來控制單元格圖像之間的距離的。制作一張柵格布局變得再簡單不過了，同時(shí)我們還可以避免那些使用float元素實(shí)現(xiàn)等高布局所帶來的麻煩。
將理論運(yùn)用于實(shí)戰(zhàn)
本文展示了CSS display屬性中表格相關(guān)屬性值的基礎(chǔ)用法，開發(fā)者不斷努力通過CSS來實(shí)現(xiàn)可靠的基礎(chǔ)柵格布局，而這種方法最終會使其變得更簡單。我們已經(jīng)對CSS表格布局做了一個(gè)簡明易懂的介紹，研究了display屬性中各種表格相關(guān)的屬性值，找出了匿名表格元素的本質(zhì)，另外還發(fā)現(xiàn)了一些其它有用的CSS表格屬性。
接下來的一步就看你了，你已經(jīng)了解到使用CSS表格制作柵格布局的潛力，帶著好奇心去自己嘗試下吧！運(yùn)用從本文學(xué)到的知識，你可以開始實(shí)踐你自己的CSS表格布局并發(fā)明一些新的技術(shù)。
相關(guān)文章
深入解析CSS的display:inline-block屬性的使用
這篇文章主要介紹了CSS的display:inline-block屬性的使用,其中對使用時(shí)產(chǎn)生的空隙問題的解決作了重點(diǎn)講解,需要的朋友可以參考下2015-11-09- 在一般的CSS布局制作時(shí)候，我們常常會用到display對應(yīng)值有block、none、inline這三個(gè)值。下面我們來分別來認(rèn)識和學(xué)習(xí)什么時(shí)候用什么值。這里通過CSS display知識加實(shí)例講解2014-09-02
- visiblity 是設(shè)置元素的可見性，即可見 / 隱藏；display 是設(shè)置元素按什么樣的方式來顯示，是按塊顯示，不了解的朋友可以參考下2014-02-24
css中display和visibility的用法和區(qū)別介紹
css中display和visibility想必前臺美工對它并不陌生吧，如果你感覺自己對它還不是很熟悉的話，不妨了解本文對display和visibility的使用介紹2013-11-17- 到現(xiàn)在可能有人不知道display:block的作用，問了一句在div的元素里面寫display：block有用嗎？至于這個(gè)問題可以詳細(xì)參考喜下本文，希望對大家有所幫助2013-09-24
談?wù)凜SS隱藏元素(display,visibility)的區(qū)別
在CSS中，讓元素隱藏（指屏幕范圍內(nèi)肉眼不可見）的方法很多，有的占據(jù)空間，有的不占據(jù)空間；有的可以響應(yīng)點(diǎn)擊，有的不能響應(yīng)點(diǎn)擊2013-04-09IE6下css設(shè)置容器高度的BUG不能小于某個(gè)值
在IE6中設(shè)置display:block的空容器為一個(gè)較小高度時(shí)不知道大家有沒有注意到其高度不能小于某個(gè)值，接下來為您詳細(xì)介紹下IE6中容器高度的BUG，感興趣的你可以參考下本文2013-03-06CSS display:block在Firefox下顯示布局錯(cuò)亂問題
本文向大家介紹一下如何解決CSS display:block在Firefox下顯示布局錯(cuò)亂問題，按照常理，對于某一單元行需要顯示時(shí)，使用CSS display:block屬性，在IE瀏覽器中顯示正常，但2012-12-30基于display:table的CSS布局讓HTML元素和像table一樣
display:table的CSS聲明能夠讓一個(gè)HTML元素和它的子節(jié)點(diǎn)像table元素一樣。使用基于表格的CSS布局，使我們能夠輕松定義一個(gè)單元格的邊界、背景等樣式，而不會產(chǎn)生因?yàn)槭褂昧?/div> 2012-12-07網(wǎng)頁制作Webjx文章簡介：這篇文章所講的也是非常使用的技術(shù)，其中牽涉到其他的技術(shù)，也需要大家有所了解。正好這兩天也在看這方面的資料，提供一些資料給大家參考。2009-04-02最新評論