CSS display: table 屬性：解決布局難題的利器

核心要點(diǎn)：

• CSS 的 table 屬性功能強(qiáng)大，能解決多種布局問(wèn)題，并兼容所有現(xiàn)代瀏覽器。它允許 HTML 元素像表格元素一樣運(yùn)作，為復(fù)雜的布局和對(duì)齊問(wèn)題提供通用的解決方案。
• CSS table 屬性可用于創(chuàng)建等高盒子、簡(jiǎn)單的舊式布局以及具有內(nèi)容編排功能的自適應(yīng)布局。它在響應(yīng)式設(shè)計(jì)中尤其有用，允許元素根據(jù)用戶的屏幕尺寸調(diào)整其大小和位置。
• 盡管 CSS table 屬性有很多優(yōu)點(diǎn)，但它也有一些局限性。與其他顯示屬性相比，它在創(chuàng)建復(fù)雜布局方面的靈活性較低，并且與某些 CSS 屬性（如 float 和 position）配合使用效果不佳。但是，在許多情況下，使用 table 屬性的優(yōu)勢(shì)大于其缺點(diǎn)。

目前，F(xiàn)lexbox 可能是布局構(gòu)建的熱門(mén)新技術(shù)。Flexbox 適應(yīng)可用空間的驚人能力，讓許多人對(duì)它的可能性充滿了期待。然而，它無(wú)法解決所有布局問(wèn)題，而且它與舊版瀏覽器的兼容性也存在一些問(wèn)題。Flexbox 目前并沒(méi)有通用的 polyfill（舊版瀏覽器的回退方案）——目前我只知道一個(gè)針對(duì) 2009 年版本的 IE 的 polyfill：Flexie。在許多情況下，我發(fā)現(xiàn)使用經(jīng)常被忽略的 CSS table 顯示屬性可以找到更簡(jiǎn)單的解決方案。這些 CSS 屬性得到了所有相關(guān)瀏覽器的廣泛支持（注意，這排除了 IE6 和 IE7），并且可以優(yōu)雅地解決一些主要的和小的布局難題。

如果您不完全熟悉此技術(shù)，更改 DIV 的 display 屬性可以使其 表現(xiàn) 得像表格或表格元素。

等等，用表格進(jìn)行布局？這不好吧？

21 世紀(jì)初最熱門(mén)的網(wǎng)頁(yè)設(shè)計(jì)話題之一，就是關(guān)于使用 HTML 表格代碼作為布局工具的爭(zhēng)論。那是一種 hack，現(xiàn)在仍然是不好的做法。

相反，我們?cè)谶@里使用完全有意義的 HTML（即 DIV、SECTION、HEADER 等），只是從 CSS 中借用了一些有用的表格表示知識(shí)。這正是 CSS 的設(shè)計(jì)目的，所以不要覺(jué)得這是一個(gè) hack 或補(bǔ)丁。它不是。

使用 display: table-cell

在下面的示例中，點(diǎn)擊頂部的按鈕，您可以將三個(gè)彩色 DIV 的 display 屬性從 block 更改為 table-cell：

[CodePen 示例鏈接 - 替換為實(shí)際 CodePen 鏈接]

您可以看到 DIV 如何在不需要任何 float 屬性的情況下進(jìn)行水平排列，并且您還可以訪問(wèn)一些典型的表格規(guī)則（就像 vertical-align）。

如果您需要一些間距，請(qǐng)注意，經(jīng)典的 CSS margin 屬性對(duì)表格單元格沒(méi)有任何影響：而是使用 border-spacing（它必須應(yīng)用于容器表格元素）。如果您想使用這些規(guī)則，可以在 Codepen 中找到一些注釋行。

此技術(shù)對(duì)于解決許多難以用其他方法解決的問(wèn)題非常有用。

我已經(jīng)挑選出三個(gè)簡(jiǎn)單的案例，其中 table 顯示屬性非常有價(jià)值。

但首先讓我們看看它們：

有關(guān)表格和 CSS 的真正全面指南，請(qǐng)查看 CSS Tricks：[CSS Tricks 的表格指南鏈接 - 替換為實(shí)際鏈接]

案例 1. 等高盒子

我認(rèn)為這是我處理的最常見(jiàn)問(wèn)題之一：有一些帶有未知內(nèi)容的浮動(dòng)盒子，您必須使它們都具有相同的高度。

我知道，F(xiàn)lexbox 可以輕松解決這個(gè)問(wèn)題，但表格規(guī)則也可以做到。

只需將 display: table（或 table-row）屬性應(yīng)用于容器，并將 display: table-cell 屬性應(yīng)用于內(nèi)部盒子。注意要?jiǎng)h除任何 float 屬性（否則 table-cell 屬性不會(huì)生效）。

HTML：

<div id="wrapper">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</div>

CSS：

#wrapper {
    display: table;
}
#wrapper div {
    display: table-cell;
}

[CodePen 示例鏈接 - 替換為實(shí)際 CodePen 鏈接]

案例 2. 簡(jiǎn)單的舊式布局

這是一個(gè)比較過(guò)時(shí)的例子，但我認(rèn)為您可能需要處理它，就像我最近做的那樣。

幾個(gè)月前，我收到一個(gè)與以下方案非常相似的圖形布局。它需要與 IE8 兼容，我發(fā)現(xiàn)最好的方法是使用 CSS 表格規(guī)則：

[CodePen 示例鏈接 - 替換為實(shí)際 CodePen 鏈接]

案例 3. 具有內(nèi)容編排功能的自適應(yīng)布局

前面的例子引導(dǎo)我們進(jìn)入一個(gè)新的主題：是否可以使用 CSS 表格規(guī)則構(gòu)建自適應(yīng)布局？

這不僅是可能的，而且我們還可以執(zhí)行一些內(nèi)容編排任務(wù)。

我們已經(jīng)看到，如何將兩個(gè) div 的 display 屬性從 block 更改為 table-cell 可以將其排列方式從垂直更改為水平。

此外，具有 table-header-group 屬性的元素會(huì)被置于表格布局的頂部。同樣，table-footer-group 元素會(huì)被置于底部，依此類(lèi)推。在重新格式化響應(yīng)式布局時(shí)，這可能出乎意料地有用。

在下面的筆中，標(biāo)題元素在窗口調(diào)整大小時(shí)與其位置與導(dǎo)航元素交換，只需將其 display 屬性更改為 table-header-group。

HTML：

<div id="wrapper">
    <nav></nav>
    <header></header>
    <div id="banner2"></div>
    <footer></footer>
</div>

CSS：

#wrapper, header {
    display: block; /* 我們實(shí)際上不需要此規(guī)則，因?yàn)樗J(rèn)為此值 */
}

@media (min-width: 48em) {
    #wrapper {
        display: table;
    }
    header {
        display: table-header-group;
    }
}

footer 和 #banner2 div 也會(huì)出現(xiàn)類(lèi)似的行為。

這是一個(gè)布局方案：左側(cè)是默認(rèn)的移動(dòng)版本，右側(cè)是桌面版本：

這是一個(gè)運(yùn)行中的演示：

[CodePen 示例鏈接 - 替換為實(shí)際 CodePen 鏈接]

有關(guān)此論點(diǎn)的更多信息，還可以查看：

• 使用 display:table 進(jìn)行 CSS 堆疊
• CSS 布局的反英雄——“display:table”

結(jié)論

CSS table 顯示屬性是解決大小布局挑戰(zhàn)的被低估且有價(jià)值的解決方案。

雖然我個(gè)人可能不會(huì)選擇使用它們來(lái)構(gòu)建復(fù)雜的布局，但它們肯定可以解決與布局部分相關(guān)的許多難題。

關(guān)于 CSS table 屬性的常見(jiàn)問(wèn)題解答

（此處應(yīng)補(bǔ)充關(guān)于CSS table 屬性的常見(jiàn)問(wèn)題解答，內(nèi)容與原文類(lèi)似，但需調(diào)整措辭，避免重復(fù)。）

請(qǐng)注意，以上所有CodePen鏈接都需要替換成實(shí)際的CodePen鏈接。 我無(wú)法直接訪問(wèn)和創(chuàng)建CodePen。

以上是布局秘密武器＃1：CSS表屬性的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！