自適應(yīng)的彈性布局.doc

CSS3實(shí)例教程:自適應(yīng)的彈性布局Css3引入了新的盒模型彈性盒模型，該模型決定一個(gè)盒子在其他盒子中的分布方式以及如何處理可用的空間。這與XUL（火狐使用的用戶交互語言）相似，其它語言也使用相同的盒模型，如XAML 、GladeXML。使用該模型，可以很輕松的創(chuàng)建自適應(yīng)瀏覽器窗口的流動(dòng)布局或自適應(yīng)字體大小的彈性布局。本文的例子使用以下的HTML代碼：123傳統(tǒng)的盒模型基于HTML流在垂直方向上排列盒子。使用彈性盒模型可以規(guī)定特定的順序，也可以反轉(zhuǎn)之。要開啟彈性盒模型，只需設(shè)置擁有子盒子的盒子的display的屬性值為box（或inline-box）即可。display: box;水平或垂直分布“box-orient”定義分布的坐標(biāo)軸：vertical和horizional。這兩個(gè)值定義盒子如何顯示bodydisplay: box;box-orient: horizontal;反向分布“box-direction”可以設(shè)置盒子出現(xiàn)的順序。默認(rèn)情況下，只需定義分布坐標(biāo)軸box隨html流分布。如果為水平坐標(biāo)軸，則從左到右分布；垂直坐標(biāo)軸則從上到下分布。定義“box-direction”的屬性值為“reverse”，則反轉(zhuǎn)盒子的排列順序。body display: box;box-orient: vertical;box-direction: reverse;具體分布屬性“box-ordinal-group”定義盒子分布的順序?？梢噪S意的控制其分布順序。這些組以一個(gè)從“1”開始的數(shù)字定義，盒模型將首先分布這些組，所有這些盒子將在每個(gè)組中。分布將從小到大排列。body display: box;box-orient: vertical;box-direction : reverse;#box1 box-ordinal-group: 2;#box2 box-ordinal-group: 2;#box3 box-ordinal-group: 1;盒子尺寸默認(rèn)情況下，盒子并不具有彈性，如果box-flex的屬性值至少為1時(shí)，則變得富有彈性。如果盒子不具有彈性，它將盡可能的寬使其內(nèi)容可見，且沒有任何溢出，其大小由“width”和“height”來決定（或min-height、min-width、max-width、max-height）。如果盒子是彈性的，其大小將按下面的方式計(jì)算：1. 具體的大小聲明（width、height、min-width、min-height、max-width、max-height）； 2. 父盒子的大小和所有余下的可利用的內(nèi)部空間 如果盒子沒有任何大小聲明，那么其大小將完全取決于父box的大小。即：盒子的大小等于父級(jí)盒子的大小乘以其box-flex在所有子盒子box-flex總和中的百分比（子盒子的大小=父盒子的大小*子盒子的box-flex/所有子盒子的box-flex值的和）。如果一個(gè)或更多的盒子有一個(gè)具體的大小聲明，那么其大小將計(jì)算其中，余下的彈性盒子將按照上面的原則分享剩下的可利用空間?？纯聪旅娴睦樱斫馄饋砀菀?。所有盒子都是彈性的下面的例子中，box1的大小為box2的兩倍，box2與box3大小一樣。看起來好像是用百分比定義盒子的大小，但是有一個(gè)區(qū)別：使用彈性盒模型，增加一個(gè)盒子，無須重新計(jì)算其大小。body display: box;box-orient: horizontal;#box1 box-flex: 2;#box2 box-flex: 1;#box3 box-flex: 1;一些盒子有固定大小下面的例子中，box3并不是彈性的，寬度為160px；這樣box1和box2將有240px的可利用空間。因此，box1的寬度為160px(240*2/3)，box2的寬度為80px(240*1/3)。body display: box;box-orient: horizontal;width: 400px;#box1 box-flex: 2;#box2 box-flex: 1;#box3 width: 160px;溢出管理因?yàn)槭菑椥院凶?、非彈性盒子混排，有可能所有盒子的尺寸大于或小于父盒子的尺寸。這樣就有可能空間太多或空間不足?？臻g太多如何處理可利用空間的分布取決于兩個(gè)屬性值：box-align 和 box-pack。屬性“box-pack”管理水平方向上的空間分布，有以下四個(gè)可能屬性：start、end、 justify、 or center。1. start 所有盒子在父盒子的左側(cè)，余下的空間在右側(cè)； 2. end所有盒子在父盒子的右側(cè)，余下的空間在左側(cè)； 3. justify 余下的空間在盒子間平均分配； 4. center 可利用的空間在父盒子的兩側(cè)平均分配。 屬性“box- align”管理垂直方向上的空間分布，有以下五個(gè)可能屬性之：start、 end,、center、 baseline和 stretch。1. start 每個(gè)盒子沿父盒子的上邊緣排列，余下的空間位于底部； 2. end 每個(gè)盒子沿父盒子的下邊緣排列，余下的空間位于頂部； 3. center 可用空間平均分配，上面一半，下面一半； 4. baseline 所有盒子沿著它們的基線排列，余下的空間可前可后； 5. stretch 每個(gè)盒子的高度調(diào)整到適合父盒子的高度 body display: box;box-orient: horizontal;width: 400px;#box1 box-flex: 2;#box2 box-flex: 1;#box3 width: 160px;空間不足怎么辦與傳統(tǒng)的盒模型一樣，overflow屬性用來決定其顯示方式。為了避免溢出，你可以設(shè)置box-lines為multiple使其換行顯示。彈性盒模型看起來很不錯(cuò)，Gecko 和 WebKit對(duì)該模型都有一些嘗試性的測(cè)試。在這些屬性之前加上-moz和-webkit即可使用該屬性。也即是說，firefo