CSS實(shí)現用戶(hù)界面開(kāi)發(fā)和交互式布局發(fā)布者：本站     時(shí)間：2021-12-31 10:12:03

近幾年的前端工程師接觸頁(yè)面編碼的時(shí)候，Table布局的時(shí)代已經(jīng)沒(méi)落了，取而代之的是習慣用DIV來(lái)布局組織頁(yè)面架構，當然這是大勢所趨。更何況HTML5+CSS3的黃金組合已經(jīng)越來(lái)越被推崇!而Table只能做回老本行：去組織和展現數據信息。今天我們要談到是CSS里的display。算是另辟蹊徑來(lái)談?wù)則ables吧。

本文提供了簡(jiǎn)單可靠的UI布局解決方案，因為CSS tables十分簡(jiǎn)單易懂，因此在交互式設計中用起來(lái)十分方便。下面我們來(lái)具體介紹這些超贊的CSS屬性。

CSS 屬性/值 模式能夠實(shí)現很多用其他方式(如Flexbox)實(shí)現比較麻煩的布局。本文主要介紹display: table 和 display :table-cell。首先我們要解釋一下這里沒(méi)有任何新的技術(shù)，其實(shí)人們已經(jīng)討論這些技術(shù)很多年了。只不過(guò)很少有人知道它們并真正去使用它們。

CSS tables

首先大家要清楚，CSS tables只是用來(lái)展示的。也就是說(shuō)，CSS tables 和 HTML table 標簽沒(méi)有任何相關(guān)聯(lián)性，它們之間的使用互不影響。有些讀者可能認為使用CSS tables是不好的，希望我們這篇文章能夠澄清開(kāi)發(fā)者概念中的一些混淆。

我們以前常用的是將一個(gè)標簽屬性設為’display:block’，所以類(lèi)似的我們只需要用’display:table’或’display:table-cell;’就可以了。這些屬性純粹是用于布局設計。

為什么CSS tables 很棒

CSS table 不是新的東西，它是CSS2.1章程里的內容。它的兼容性很強，除了IE7及以下版本，其他的瀏覽器它都可以使用。我第一次看到CSS table是在我讀的一本書(shū)里，這要追溯到2008年，那個(gè)時(shí)候很多人認為這個(gè)技術(shù)不好用(那個(gè)時(shí)候IE8其實(shí)也只是剛剛出現)。但如今CSS table已經(jīng)相對容易維護和開(kāi)發(fā)。

常見(jiàn)問(wèn)題及實(shí)例

讓我們來(lái)看看這些CSS屬性能做什么。

縱向居中內容

用display：table把容器中內容橫向縱向居中十分簡(jiǎn)單，如下：

CSS實(shí)現用戶(hù)界面開(kāi)發(fā)和交互式布局,PS教程,

注意我只需要把一個(gè)標簽(table-cell)放入另一個(gè)標簽(table)中:

CSS實(shí)現用戶(hù)界面開(kāi)發(fā)和交互式布局,PS教程,

注意事項：

Display屬性設定為table

沒(méi)有寬度的話(huà)，table寬度將是它內容的寬度。

我已經(jīng)把table-layout屬性定位fixed。默認的auto。之后我們會(huì )詳細說(shuō)明。

嵌套的元素設定為table-cell。Vertical-align屬性用來(lái)縱向居中。(不需要任何padding!)

Text-align:center用于將水平軸的文本居中

Fixed – fluid – fixed 布局

看以下例子：

CSS實(shí)現用戶(hù)界面開(kāi)發(fā)和交互式布局,PS教程,

這里是一個(gè)table內包含了三個(gè)table-cells：第一個(gè)和最后一個(gè)被設定了一個(gè)固定寬度;第二個(gè)沒(méi)有設定寬度，于是它占用了其他可用的空間。以下是相關(guān)HTML和CSS代碼：

CSS實(shí)現用戶(hù)界面開(kāi)發(fā)和交互式布局,PS教程,

CSS實(shí)現用戶(hù)界面開(kāi)發(fā)和交互式布局,PS教程,

這里方便的一點(diǎn)就是無(wú)論table的寬度設為多少，嵌在table-cells的元素是等高的并等同于table的高度。所以說(shuō)css table很適用于多列布局。

在嵌入元素中使用overflow hidden

我們來(lái)繼續上一個(gè)例子。設想你有一個(gè)display:table在最外層，然后里面有display:table-cell 的元素(可能是主體內容或者側邊條)，其中有一部分你有一個(gè)水平的滾動(dòng)區域。這里我們會(huì )遇到可能一個(gè)過(guò)大的div并使用overflow屬性：

CSS實(shí)現用戶(hù)界面開(kāi)發(fā)和交互式布局,PS教程,

如果你使用display:table屬性，并且你沒(méi)有設定table-layout:fixed，你可能會(huì )奇怪為什么table-cells中的一個(gè)消失了。

Table-layout：fixed

默認的大多數瀏覽器都有一個(gè)’auto’ table 布局模式，這使得table的寬度由它的內容所決定。但當你有一些更大的元素(比如剛才的滾動(dòng)條)，你會(huì )發(fā)現會(huì )遇到一些問(wèn)題。在這些例子中，僅需要保證應用了table-layout：fixed就可以解決了。

繼續上一實(shí)例：制作一個(gè)簡(jiǎn)單的滾動(dòng)切換效果 display:table和display:table-cell

CSS實(shí)現用戶(hù)界面開(kāi)發(fā)和交互式布局,PS教程,

下面我將為你展示如何用display:table和 display:table-cell制作一個(gè)簡(jiǎn)單的滾動(dòng)企切換效果，這個(gè)例子沒(méi)有做額外的測試，僅僅是一個(gè)簡(jiǎn)單的原型。

HTML代碼

CSS實(shí)現用戶(hù)界面開(kāi)發(fā)和交互式布局,PS教程,

CSS代碼

CSS實(shí)現用戶(hù)界面開(kāi)發(fā)和交互式布局,PS教程,

JS代碼

CSS實(shí)現用戶(hù)界面開(kāi)發(fā)和交互式布局,PS教程,

額外的獎勵：沒(méi)有四舍五入的問(wèn)題

之前我一直在博客和最近的一本新書(shū)中( Sass and Compass for Designers)抱怨的是交互性網(wǎng)格問(wèn)題，這個(gè)問(wèn)題在一大堆使用百分比設定寬度的float的元素一個(gè)接一個(gè)排列時(shí)就會(huì )出現，然而用display:table和display:table-cell便不會(huì )有這類(lèi)問(wèn)題。

記住，不是說(shuō)你在一個(gè)顯示屏尺寸中使用display:table，你就必須在另一個(gè)中使用它。

Media queries給了你方法去在不用的顯示屏尺寸中定義不同的布局，使用display:table在一個(gè)顯示屏尺寸中然后在display:block中顯示另一個(gè)。

CSS實(shí)現用戶(hù)界面開(kāi)發(fā)和交互式布局,PS教程,

CSS實(shí)現用戶(hù)界面開(kāi)發(fā)和交互式布局,PS教程,

CSS實(shí)現用戶(hù)界面開(kāi)發(fā)和交互式布局,PS教程,

額外的一些需要記住的東西：

你不能夠在table-cells中再套其他的table-cells

默認的table-cells占據了所有table中可用的空間，因此兩個(gè)tables-cells就會(huì )分別占據50%，三個(gè)會(huì )占據33.33333%，四個(gè)占據25%等等。然而，如果一個(gè)cell中的內容超過(guò)cell寬度，我們便需要手動(dòng)設定尺寸。

我們能夠在tables和table-cells中嵌套tables

Float對table-cell無(wú)影響

Margin對table-cell的元素無(wú)影響

Padding能夠被用來(lái)設定內容空間，所以*{box-sizing: border-box}是你的朋友