display table的幾個用法

2021-08-21 05:26:32 字數 755 閱讀 8470

div+css的布局已經讓**布局幾乎很少用到,除非**語義性很強的情況。

display:table解決了一部分需要使用**特性但又不需要**語義的情況,

尤其是div+css很不方便解決的問題,比如以下兩種情況:

一、父元素寬度固定,想讓若干個子元素平分寬度

通常的做法是手動設定子元素的寬度,如果設定百分數不一定能整除,設定具體的數值又限制了父元素的寬度固定,很煩。

可以使用display:table來解決:

.parent.son

如此一來,就算是三個或者六個元素也可以很方便均分父元素的寬度了。

二、塊級子元素垂直居中

想讓乙個div或p在父元素中垂直居中一直是很多人解決不了的問題(注意直接對塊級元素使用vertical-align是不能解決這個問題的,vertical-align定義行內元素的基線相對於該元素所在行的基線的垂直對齊),同樣可以使用display:table方便解決:

.parent .son

將塊級子元素的display設定為table-cell之後再使用vertical-align就可以了。

注意:雖然display:table解決了避免使用**的問題,但有幾個需要注意的:

(1)display: table時padding會失效

(2)display: table-row時margin、padding同時失效

(3)display: table-cell時margin會失效

display table 使用小結

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

display table布局總結

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

display table與本身的table的區別

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