display table 使用小結

2021-08-14 11:42:10 字數 3046 閱讀 6760

ie8支援很多新的css display屬性值,包括與**相關的屬性值:table、table-row和table-cell,它也是最後一款支援這些屬性值的主流瀏覽器。它標誌著複雜css布局技術的結束,同時也給了html**布局致命一擊。最終,使用css布局來製作出類似於table布局的柵格將會變得十分迅速和簡單。

一、為什麼不用table元素?

目前,在大多數開發環境中已經不用table元素來做網頁布局了,取而代之的是div+css,那麼為什麼不用table元素呢?

用div+css編寫出來的檔案k數比用table寫出來的要小。

table必須在頁面完全載入後才顯示,沒有載入完畢前,table為一片空白,也就是說,需要頁面完畢才顯示,而div是逐行顯示,不需要頁面完全載入完畢,就可以一邊載入一邊顯示。

非**內容用table來裝,不符合標籤語義化要求,不利於seo。

table的巢狀性太多,用div**會比較簡潔。

.......

二、要是想要乙個**的布局方式怎麼辦?

可以用display:table來解決。

display:table系列幾乎是和table系的元素相對應的,請看下表:

table

(類似)此元素會作為塊級**來顯示,**前後帶有換行符。

inline-table

(類似)此元素會作為內聯**來顯示,**前後沒有換行符。

table-row-group

(類似)此元素作為乙個或多個行的分組來顯示。

table-header-group

(類似)此元素作為乙個或多個行的分組來顯示。

table-footer-group

(類似)此元素作為乙個或多個行的分組來顯示。

table-row

(類似)此元素會作為乙個**行來顯示。

table-column-group

(類似)此元素會作為乙個或多個列分組來顯示。

table-column

(類似)此元素作為乙個**單元格列來顯示。

table-cell

(類似或)此元素作為乙個**單元格來顯示。

table-caption

(類似)此元素會作為乙個**標題來顯示。

三、如何使用display:table?

1、元素兩端對齊

元素兩端對齊

b box

a box

通過設定left、right為display:table-cell;實現兩部分的並行排列,執行效果如下:

2、自動平均劃分每個小模組,使其一行顯示

自動平均劃分每個小模組,使其一行顯示

遇到上面這種布局,一般會用float來做,或者把每個li設定成display:inline-block;來做,

並且都要給他們設定乙個寬度,而且最痛苦的是5個li如果你設定width:20%;他們一定會掉下來,

如果li都設定成display:table-cell;

就不會出現這種情況,即使不設定寬度他們也會在一行顯示,

你在加多一行他也不會掉下來,依舊會在一樣顯示。

遇到上面這種布局,一般會用float來做,或者把每個li設定成display:inline-block;來做,並且都要給他們設定乙個寬度,而且最痛苦的是5個li如果你設定width:20%;他們一定會掉下來,如果li都設定成display:table-cell;就不會出現這種情況,即使不設定寬度他們也會在一行顯示,你在加多一行他也不會掉下來,依舊會在一樣顯示。執行結果如下:

3、垂直居中與元素/使大小不固定的元素垂直居中

垂直居中與元素

執行結果如下:

4、兩box實現等高對齊

兩box實現等高對齊

左側的box的高度始終跟隨右側的box的高度變化而變化

案例不對右側的box設定display:table-cell,只對左側設定,所以就會出現左側跟隨右側高度變化而變化。

如果要實現不管兩個box哪個高度產生變化另乙個就跟隨,只需要把右側的box也設定成display:table-cell就可以實現了。

左側的box的高度始終跟隨右側的box的高度變化而變化,案例不對右側的box設定display:table-cell,只對左側設定,所以就會出現左側跟隨右側高度變化而變化。

如果要實現不管兩個box哪個高度產生變化另乙個就跟隨變化,只需要把右側的box也設定成display:table-cell就可以實現了。執行結果如下:

5、彈性、響應式布局  display實現相容性的兩欄自適應布局

彈性、響應式布局  display實現相容性的兩欄自適應布局

移動端布局因為有display:box這等屬性,所以table-cell相對就排不上什麼大用場,

不過在移動端你要用table-cell也不是不可以,根據自己對屬性的理解去使用就可以了。

附:常用的左側選單文字上下居中顯示。

display table布局總結

1.table布局方式 2.table布局實際應用 效果 列表布局,等空隙 grid row image style head body h3 子容器自動平分寬度 即使設定寬度,也會進行自動等分,自適應父容器的寬度 h3 div class table demo1 div class box1 ta...

display table的幾個用法

div css的布局已經讓 布局幾乎很少用到,除非 語義性很強的情況。display table解決了一部分需要使用 特性但又不需要 語義的情況,尤其是div css很不方便解決的問題,比如以下兩種情況 一 父元素寬度固定,想讓若干個子元素平分寬度 通常的做法是手動設定子元素的寬度,如果設定百分數不...

display table與本身的table的區別

一 為什麼不用table系 元素?目前,在大多數開發環境中,已經基本不用table元素來做網頁布局了,取而代之的是div css,那麼為什麼不用table系 元素呢?1 用div css編寫出來的檔案k數比用table寫出來的要小,不信你在頁面中放1000個table和1000個div比比看哪個檔案...