CSS布局帶來(lái)的巨大影響:CSS display屬性值

2024-07-11 08:44:36

字體：大中小

供稿：網(wǎng)友

網(wǎng)頁(yè)元素應(yīng)用上那些與表格相關(guān)的display屬性值后，能夠模仿出與表格相同的特性。我將會(huì)在該文中給大家演示這種方法給CSS布局帶來(lái)的巨大影響。
應(yīng)原書(shū)編輯要求，先在文章頂部給出鏈接：《Everything You Know About CSS Is Wrong》http://www.sitepoint.com/books/csswrong1/
這本書(shū)是10月發(fā)行的新書(shū)，為了避免版權(quán)糾紛，如要轉(zhuǎn)載本文請(qǐng)保留以上鏈接，并遵循該 CC2.5協(xié)議。
從 digital-web 的首頁(yè)上看到一個(gè)標(biāo)題黨《Everything You Know About CSS Is Wrong》，被雷過(guò)之后仔細(xì)看了下原文，發(fā)現(xiàn)了一種新的CSS布局思路（其實(shí)就是詳細(xì)介紹了display:table屬性）。在IE6仍是王道的時(shí)代談這種技術(shù)為時(shí)過(guò)早，全當(dāng)是練習(xí)英文翻譯貼出來(lái)給大家分享下，歡迎大家指點(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布局來(lái)制作出類(lèi)似于table布局的柵格將會(huì)變得十分迅速和簡(jiǎn)單。
網(wǎng)頁(yè)元素應(yīng)用上那些與表格相關(guān)的display屬性值后，能夠模仿出與表格相同的特性。我將會(huì)在該文中給大家演示這種方法給CSS布局帶來(lái)的巨大影響。
使用CSS表格
CSS表格能夠解決所有那些我們?cè)谑褂媒^對(duì)定位和浮動(dòng)定位進(jìn)行多列布局時(shí)所遇到的問(wèn)題。例如，“display:table;”的CSS聲明能夠讓一個(gè)HTML元素和它的子節(jié)點(diǎn)像table元素一樣。使用基于表格的CSS布局，使我們能夠輕松定義一個(gè)單元格的邊界、背景等樣式，而不會(huì)產(chǎn)生因?yàn)槭褂昧藅able那樣的制表標(biāo)簽所導(dǎo)致的語(yǔ)義化問(wèn)題。
在深入了解這種方法之前，讓我們先來(lái)寫(xiě)份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都通過(guò)了測(cè)試）中顯示出來(lái)。下面這張圖片是它在IE8中的樣子：
我們輕松實(shí)現(xiàn)了三欄等高布局，而無(wú)需使用偽造背景圖片之類(lèi)的技巧，更不用擔(dān)心定位和清除浮動(dòng)的問(wèn)題！

上一頁(yè)12 3 下一頁(yè) 閱讀全文

上一篇：簡(jiǎn)單介紹Web Developer插件制作網(wǎng)頁(yè)

下一篇：用div css模擬表格對(duì)角線