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 的首頁上看到一個標(biāo)題《Everything You Know About CSS Is Wrong》，被雷過之后仔細(xì)看了下原文，發(fā)現(xiàn)了一種新的CSS布局思路（其實(shí)就是詳細(xì)介紹了display:table屬性）。在IE6仍是王道的時代談這種技術(shù)為時過早，全當(dāng)是練習(xí)英文翻譯貼出來給大家分享下，歡迎大家指點(diǎn)不足之處。
—————————以下是中文翻譯——————————–
當(dāng)IE8發(fā)布時，它將支持很多新的CSS display屬性值，包括與表格相關(guān)的屬性值：table、table-row和table-cell，它也是最后一款支持這些屬性值的主流瀏覽器。它標(biāo)志著復(fù)雜CSS布局技術(shù)的結(jié)束，同時也給了HTML表格布局致命一擊。最終，使用CSS布局來制作出類似于table布局的柵格將會變得十分迅速和簡單。
網(wǎng)頁元素應(yīng)用上那些與表格相關(guān)的display屬性值后，能夠模仿出與表格相同的特性。我將會在該文中給大家演示這種方法給CSS布局帶來的巨大影響。
使用CSS表格
CSS表格能夠解決所有那些我們在使用絕對定位和浮動定位進(jìn)行多列布局時所遇到的問題。例如，“display:table;”的CSS聲明能夠讓一個HTML元素和它的子節(jié)點(diǎn)像table元素一樣。使用基于表格的CSS布局，使我們能夠輕松定義一個單元格的邊界、背景等樣式，而不會產(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)心定位和清除浮動的問題！
相關(guān)文章
深入解析CSS的display:inline-block屬性的使用
這篇文章主要介紹了CSS的display:inline-block屬性的使用,其中對使用時產(chǎn)生的空隙問題的解決作了重點(diǎn)講解,需要的朋友可以參考下2015-11-09- 在一般的CSS布局制作時候，我們常常會用到display對應(yīng)值有block、none、inline這三個值。下面我們來分別來認(rèn)識和學(xué)習(xí)什么時候用什么值。這里通過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有用嗎？至于這個問題可以詳細(xì)參考喜下本文，希望對大家有所幫助2013-09-24
談?wù)凜SS隱藏元素(display,visibility)的區(qū)別
在CSS中，讓元素隱藏（指屏幕范圍內(nèi)肉眼不可見）的方法很多，有的占據(jù)空間，有的不占據(jù)空間；有的可以響應(yīng)點(diǎn)擊，有的不能響應(yīng)點(diǎn)擊2013-04-09- 在IE6中設(shè)置display:block的空容器為一個較小高度時不知道大家有沒有注意到其高度不能小于某個值，接下來為您詳細(xì)介紹下IE6中容器高度的BUG，感興趣的你可以參考下本文2013-03-06
CSS display:block在Firefox下顯示布局錯亂問題
本文向大家介紹一下如何解決CSS display:block在Firefox下顯示布局錯亂問題，按照常理，對于某一單元行需要顯示時，使用CSS display:block屬性，在IE瀏覽器中顯示正常，但2012-12-30基于display:table的CSS布局讓HTML元素和像table一樣
display:table的CSS聲明能夠讓一個HTML元素和它的子節(jié)點(diǎn)像table元素一樣。使用基于表格的CSS布局，使我們能夠輕松定義一個單元格的邊界、背景等樣式，而不會產(chǎn)生因?yàn)槭褂昧?/div> 2012-12-07網(wǎng)頁制作Webjx文章簡介：這篇文章所講的也是非常使用的技術(shù)，其中牽涉到其他的技術(shù)，也需要大家有所了解。正好這兩天也在看這方面的資料，提供一些資料給大家參考。2009-04-02最新評論