CSS實現(xiàn)用戶界面開發(fā)和交互式布局發(fā)布者：本站 時間：2021-12-31 10:12:03
近幾年的前端工程師接觸頁面編碼的時候，Table布局的時代已經(jīng)沒落了，取而代之的是習(xí)慣用DIV來布局組織頁面架構(gòu)，當然這是大勢所趨。更何況HTML5+CSS3的黃金組合已經(jīng)越來越被推崇!而Table只能做回老本行：去組織和展現(xiàn)數(shù)據(jù)信息。今天我們要談到是CSS里的display。算是另辟蹊徑來談?wù)則ables吧。
本文提供了簡單可靠的UI布局解決方案，因為CSS tables十分簡單易懂，因此在交互式設(shè)計中用起來十分方便。下面我們來具體介紹這些超贊的CSS屬性。
CSS 屬性/值 模式能夠?qū)崿F(xiàn)很多用其他方式(如Flexbox)實現(xiàn)比較麻煩的布局。本文主要介紹display: table 和 display :table-cell。首先我們要解釋一下這里沒有任何新的技術(shù)，其實人們已經(jīng)討論這些技術(shù)很多年了。只不過很少有人知道它們并真正去使用它們。
CSS tables
首先大家要清楚，CSS tables只是用來展示的。也就是說，CSS tables 和 HTML table 標簽沒有任何相關(guān)聯(lián)性，它們之間的使用互不影響。有些讀者可能認為使用CSS tables是不好的，希望我們這篇文章能夠澄清開發(fā)者概念中的一些混淆。
我們以前常用的是將一個標簽屬性設(shè)為’display:block’，所以類似的我們只需要用’display:table’或’display:table-cell;’就可以了。這些屬性純粹是用于布局設(shè)計。
為什么CSS tables 很棒
CSS table 不是新的東西，它是CSS2.1章程里的內(nèi)容。它的兼容性很強，除了IE7及以下版本，其他的瀏覽器它都可以使用。我第一次看到CSS table是在我讀的一本書里，這要追溯到2008年，那個時候很多人認為這個技術(shù)不好用(那個時候IE8其實也只是剛剛出現(xiàn))。但如今CSS table已經(jīng)相對容易維護和開發(fā)。
常見問題及實例
讓我們來看看這些CSS屬性能做什么。
縱向居中內(nèi)容
用display：table把容器中內(nèi)容橫向縱向居中十分簡單，如下：
CSS實現(xiàn)用戶界面開發(fā)和交互式布局,PS教程,
注意我只需要把一個標簽(table-cell)放入另一個標簽(table)中:
CSS實現(xiàn)用戶界面開發(fā)和交互式布局,PS教程,
注意事項：
Display屬性設(shè)定為table
沒有寬度的話，table寬度將是它內(nèi)容的寬度。
我已經(jīng)把table-layout屬性定位fixed。默認的auto。之后我們會詳細說明。
嵌套的元素設(shè)定為table-cell。Vertical-align屬性用來縱向居中。(不需要任何padding!)
Text-align:center用于將水平軸的文本居中
Fixed – fluid – fixed 布局
看以下例子：
CSS實現(xiàn)用戶界面開發(fā)和交互式布局,PS教程,
這里是一個table內(nèi)包含了三個table-cells：第一個和最后一個被設(shè)定了一個固定寬度;第二個沒有設(shè)定寬度，于是它占用了其他可用的空間。以下是相關(guān)HTML和CSS代碼：
CSS實現(xiàn)用戶界面開發(fā)和交互式布局,PS教程,
CSS實現(xiàn)用戶界面開發(fā)和交互式布局,PS教程,
這里方便的一點就是無論table的寬度設(shè)為多少，嵌在table-cells的元素是等高的并等同于table的高度。所以說css table很適用于多列布局。
在嵌入元素中使用overflow hidden
我們來繼續(xù)上一個例子。設(shè)想你有一個display:table在最外層，然后里面有display:table-cell 的元素(可能是主體內(nèi)容或者側(cè)邊條)，其中有一部分你有一個水平的滾動區(qū)域。這里我們會遇到可能一個過大的div并使用overflow屬性：
CSS實現(xiàn)用戶界面開發(fā)和交互式布局,PS教程,
如果你使用display:table屬性，并且你沒有設(shè)定table-layout:fixed，你可能會奇怪為什么table-cells中的一個消失了。
Table-layout：fixed
默認的大多數(shù)瀏覽器都有一個’auto’ table 布局模式，這使得table的寬度由它的內(nèi)容所決定。但當你有一些更大的元素(比如剛才的滾動條)，你會發(fā)現(xiàn)會遇到一些問題。在這些例子中，僅需要保證應(yīng)用了table-layout：fixed就可以解決了。
繼續(xù)上一實例：制作一個簡單的滾動切換效果 display:table和display:table-cell
CSS實現(xiàn)用戶界面開發(fā)和交互式布局,PS教程,
下面我將為你展示如何用display:table和 display:table-cell制作一個簡單的滾動企切換效果，這個例子沒有做額外的測試，僅僅是一個簡單的原型。
HTML代碼
CSS實現(xiàn)用戶界面開發(fā)和交互式布局,PS教程,
CSS代碼
CSS實現(xiàn)用戶界面開發(fā)和交互式布局,PS教程,
JS代碼
CSS實現(xiàn)用戶界面開發(fā)和交互式布局,PS教程,
額外的獎勵：沒有四舍五入的問題
之前我一直在博客和最近的一本新書中( Sass and Compass for Designers)抱怨的是交互性網(wǎng)格問題，這個問題在一大堆使用百分比設(shè)定寬度的float的元素一個接一個排列時就會出現(xiàn)，然而用display:table和display:table-cell便不會有這類問題。
記住，不是說你在一個顯示屏尺寸中使用display:table，你就必須在另一個中使用它。
Media queries給了你方法去在不用的顯示屏尺寸中定義不同的布局，使用display:table在一個顯示屏尺寸中然后在display:block中顯示另一個。
CSS實現(xiàn)用戶界面開發(fā)和交互式布局,PS教程,
CSS實現(xiàn)用戶界面開發(fā)和交互式布局,PS教程,
CSS實現(xiàn)用戶界面開發(fā)和交互式布局,PS教程,
額外的一些需要記住的東西：
你不能夠在table-cells中再套其他的table-cells
默認的table-cells占據(jù)了所有table中可用的空間，因此兩個tables-cells就會分別占據(jù)50%，三個會占據(jù)33.33333%，四個占據(jù)25%等等。然而，如果一個cell中的內(nèi)容超過cell寬度，我們便需要手動設(shè)定尺寸。
我們能夠在tables和table-cells中嵌套tables
Float對table-cell無影響
Margin對table-cell的元素無影響
Padding能夠被用來設(shè)定內(nèi)容空間，所以*{box-sizing: border-box}是你的朋友
選擇我們，優(yōu)質(zhì)服務(wù)，不容錯過
1. 優(yōu)秀的網(wǎng)絡(luò)資源，強大的網(wǎng)站優(yōu)化技術(shù)，穩(wěn)定的網(wǎng)站和速度保證
2. 15年上海網(wǎng)站建設(shè)經(jīng)驗，優(yōu)秀的技術(shù)和設(shè)計水平，更放心
3. 全程省心服務(wù)，不必擔心自己不懂網(wǎng)絡(luò)，更省心。
------------------------------------------------------------
24小時聯(lián)系電話：021-58370032
關(guān)鍵詞標簽：上海網(wǎng)站建設(shè) 上海網(wǎng)站制作 網(wǎng)站優(yōu)化 小程序開發(fā)