CSS布局帶來的巨大影響:CSS display屬性值

2024-07-11 09:05:18

字體：大中小

來源：轉載

供稿：網友

網頁制作Webjx文章簡介：網頁元素應用上那些與表格相關的display屬性值后，能夠模仿出與表格相同的特性。我將會在該文中給大家演示這種方法給CSS布局帶來的巨大影響。

應原書編輯要求，先在文章頂部給出鏈接：《Everything You Know About CSS Is Wrong》

這本書是10月發行的新書，為了避免版權糾紛，如要轉載本文請保留以上鏈接，并遵循該 CC2.5協議。

從 digital-web 的首頁上看到一個標題黨《Everything You Know About CSS Is Wrong》，被雷過之后仔細看了下原文，發現了一種新的CSS布局思路（其實就是詳細介紹了display:table屬性）。在IE6仍是王道的時代談這種技術為時過早，全當是練習英文翻譯貼出來給大家分享下，歡迎大家指點不足之處。

—————————以下是中文翻譯——————————–

當IE8發布時，它將支持很多新的CSS display屬性值，包括與表格相關的屬性值：table、table-row和table-cell，它也是最后一款支持這些屬性值的主流瀏覽器。它標志著復雜CSS布局技術的結束，同時也給了HTML表格布局致命一擊。最終，使用CSS布局來制作出類似于table布局的柵格將會變得十分迅速和簡單。
網頁元素應用上那些與表格相關的display屬性值后，能夠模仿出與表格相同的特性。我將會在該文中給大家演示這種方法給CSS布局帶來的巨大影響。

使用CSS表格

CSS表格能夠解決所有那些我們在使用絕對定位和浮動定位進行多列布局時所遇到的問題。例如，“display:table;”的CSS聲明能夠讓一個HTML元素和它的子節點像table元素一樣。使用基于表格的CSS布局，使我們能夠輕松定義一個單元格的邊界、背景等樣式，而不會產生因為使用了table那樣的制表標簽所導致的語義化問題。
在深入了解這種方法之前，讓我們先來寫份HTML文檔實例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"">
<html xmlns="" 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源代碼滿足了內容呈現方面的要求。先是導航欄，然后是附加欄，最后是內容欄。
我們同樣需要將以下CSS樣式應用上去：

#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;
}