CSS布局之display tables布局

首先來看看display: table的相容性：

可以看到，除非你還要跟ie6/7較勁，否則display: table不需考慮相容性。

接下來看看關於table的display可選值：

還有一些協助屬性：

下面是四個例項：

公用css:

/*

css table
*/.table .table-fixed .table-row .table-cell .table-colgroup .table-caption .table-col .table-body .table-header .table-footer .table-vt .table-vm .table-vb 
/*css table
*/html,body .box1 .box2 .box3 h3 

1

<
h3>響應式布局
h3>
2<
div 
class
="table demo1"
>
3<
div 
class
="box1 table-cell"
>1
div>
4<
div 
class
="box2 table-cell"
>2
div>
5<
div 
class
="box3 table-cell"
>3
div>
6div
>

div.demo1

html:

1

<
h3>自動佔滿剩餘空間
h3>
2<
div 
class
="table demo2"
>
3<
div 
class
="table-header-group"
>table header
div>
4<
div 
class
="main table-row"
>自動佔滿剩餘空間
div>
5<
div 
class
="table-footer-group"
>table footer
div>
6div
>

.demo2 .demo2 div.table-header-group .demo2 .main .demo2 div.table-footer-group

html:

1

<
h3>動態垂直居中對齊
h3>
2<
div 
class
="table demo3"
>
3<
div 
class
="table-cell table-vm"
>
4<
div 
class
="center-box"
>123
div>
5div
>
6div
>

.demo3 .center-box

html:

1

<
h3>動態水平居中對齊
h3>
2<
div 
class
="table demo4"
>
3<
div 
class
="center-box"
>123
div>
4div
>

.demo4 .center-box

css布局之flex布局

網頁布局 layout 是css的乙個重點應用。布局的傳統解決方案，基於盒狀模型，依賴 display屬性 position屬性 float屬性。它對於那些特殊布局非常不方便，比如，垂直居中就不容易實現。2009年，w3c提出了一種新的方案 flex布局，可以簡便 完整 響應式地實現各種頁面布局。目...

css布局之聖杯布局

聖杯布局 都為了實現乙個兩側寬度固定，中間寬度自適應的三欄布局。中間先載入渲染 實現思路 使用float布局框架 用margin為負值 position relative定位 優點 1 相容性好，相容若有主流瀏覽器，包括萬惡的ie6 2 可以實現主要內容的優先載入 實現 如下 div class c...

CSS布局之彈性布局

flex 彈性布局 是一種響應式布局，能自動伸縮盒模型達到自適應的效果。彈性布局由彈性容器 flex container 和彈性專案 flex item 組成。在彈性容器中，水平方向稱為主軸 main axis 起點main start,終點main end 垂直方向稱為縱軸 cross axis ...