CSS盒子模型(下)
一．CSS3可伸縮框（Flexible Box）
可伸縮框屬性（Flexible Box）是css3新添加的盒子模型屬性，有人稱之為彈性盒模型，它的出現打破了我們經常使用的浮動布局，實現垂直等高、水平均分、按比例划分等分布方式以及如何處理可用的空間。使該模型，可以很輕松的創建自適應瀏覽器窗口的流動布局或自適應字體大小的彈性布局。但是它有一定的局限性，在firefox、chrome這瀏覽器下需要使用它們的私有屬性來定義：firefox(-moz)、chrome（-webkit）。
CSS3可伸縮框屬性列表：
| 屬性 |
描述 |
說明 |
| box-orient |
規定框的子元素是否應水平或垂直排列。 |
水平或垂直分布 |
| box-direction |
規定框的子元素的顯示方向。 |
反向分布 |
| box-ordinal-group |
規定框的子元素的顯示次序。 |
具體分布 |
| box-flex |
規定框的子元素是否可伸縮。 |
盒子尺寸 |
| box-flex-group |
將可伸縮元素分配到柔性分組。 |
盒子尺寸 |
| box-pack |
規定水平框中的水平位置或者垂直框中的垂直位置。 |
處理空間多 |
| box-align |
規定如何對齊框的子元素。 |
處理空間多 |
| box-lines |
規定當超出父元素框的空間時，是否換行顯示。 |
處理空間不足 |
下面對 CSS3 中新增的彈性盒模型屬性做詳細介紹。
首先我們先創建一個 html 頁面，示例代碼1：demo.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <title>Flexible Box</title> </head> <body> <div id="main"> <div id="div1">1</div> <div id="div 2">2</div> <div id="div 3">3</div> </div> </body> </html>
接着我們給頁面添加上基本的樣式，示例代碼2：style.css
body,div{清除所有元素的默認外邊距和內邊距 margin: 0; padding: 0; } #main{/*設置外圍容器樣式*/ margin:auto; border:1px solid blue; width: 300px; height: 200px; margin-top:50px; } #div1{/*給div1添加樣式*/ width: 100px; height: 50px; background-color: #00B366; } #div2{/*給div2添加樣式*/ width: 100px; height: 50px; background-color: #80C8FE; } #div3{/*給div3添加樣式*/ width: 100px; height: 50px; background-color: #FEB380; }
效果如下：
聲明：
▪要想運用 CSS3 的彈性布局，需要將父容器設置為display:box 或 display:inline-box。
▪此部分示例在chrome下運行截圖。
1. box-sizing：以特定的方式定義匹配某個區域的特定元素。
語法：
box-sizing: content-box|border-box|inherit;
取值：
| 值 |
描述 |
| content-box（默認值） |
這是由 CSS2.1 規定的寬度高度行為。寬度和高度分別應用到元素的內容框。在寬度和高度之外繪制元素的內邊距和邊框。 |
| border-box |
為元素設定的寬度和高度決定了元素的邊框盒。 就是說，為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪制。通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。 |
| inherit |
應該從父元素繼承box-sizing屬性的值。 |
2. box-orient：規定框的子元素是否應水平或垂直排列。
語法：
box-orient: horizontal|vertical|inline-axis|block-axis|inherit;
取值：
| 值 |
描述 |
| horizontal |
在水平行中從左向右排列子元素。 |
| vertical |
從上向下垂直排列子元素。 |
| inline-axis（默認值） |
沿着行內軸來排列子元素（映射為 horizontal）。 |
| block-axis |
沿着塊軸來排列子元素（映射為 vertical）。 |
| inherit |
應該從父元素繼承 box-orient 屬性的值。 |
說明：
horizontal和inline-axis屬性其效果表現一致，都可以將容器水平排列，在默認情況下也呈現水平排列的樣式。當父容器設置高度時，在firefox下面其子容器的高度無效，但chrome下面則有效。
如果你容器不設置高度，子容器的高度值才生效，在firefox下面他們的高度取其中的最大值。而chrome下面設置高度的子容器為自己的高度，未設置的其高度和最大值的高度一樣，其實就是和父容器的高度一致。
vertical和block-axis屬性效果表現一致，都可將子容器垂直排列。他們是對父容器的高度進行分配。如果子容器設置了寬度，也是谷歌下面有效，火狐無效，其它都與horizontal表現一致。
切記，inline-axis為默認值，沿着行內軸來排列子元素（映射為 horizontal）。
示例代碼3：設置框的子元素在水平行中從左向右排列子元素 （修改樣式表文件，添加如下樣式代碼）
#main{/*設置外圍容器樣式*/ margin:auto; border:1px solid blue; width: 300px; height: 200px; margin-top:50px; /*Firefox*/ display:-moz-box; -moz-box-orient: horizontal; /*Safari、Opera 以及 Chrome*/ display:-webkit-box; -webkit-box-orient: horizontal; /*W3C*/ display:box; box-orient: horizontal; }
效果如下：
注:
實現垂直方向上布局、inline-axis 和 block-axis，只需修改值即可。
inherit 屬性值是布局方式繼承自父元素，如果父元素是水平的，則它也使用水平布局。
3. box-direction：規定框的子元素的顯示方向。
語法：
box-direction: normal|reverse|inherit;
取值：
| 值 |
描述 |
| normal（默認值） |
以默認方向顯示子元素。 |
| reverse |
以反方向顯示子元素。 |
| inherit |
應該從子元素繼承 box-direction 屬性的值 |
說明：以反方向顯示子元素。
示例代碼4：設置垂直且以反方向顯示子元素（修改樣式表文件，添加如下樣式代碼）
#main{/*設置外圍容器樣式*/ margin:auto; border:1px solid blue; width: 300px; height: 200px; margin-top:50px; /*Firefox*/ display:-moz-box; -moz-box-orient:vertical; -moz-box-direction:reverse; /*Safari、Opera 以及 Chrome*/ display:-webkit-box; -webkit-box-orient:vertical; -webkit-box-direction:reverse; /*W3C*/ display:box; box-orient:vertical; box-direction:reverse; }
效果如下：
注:
normal只需修改值即可。inherit可自己實驗。
4. box-ordinal-group：規定框的子元素的顯示次序。
語法：
box-ordinal-group: integer;
取值：
| 值 |
描述 |
| integer（默認值1） |
一個整數，指示子元素的顯示次序。 |
說明：根據box-ordinal-group的integer值從小到大顯示。
示例代碼5：設置子元素的顯示次序（修改樣式表文件）
#main{/*設置外圍容器樣式*/ margin:auto; border:1px solid blue; width: 300px; height: 200px; margin-top:50px; /*Firefox*/ display:-moz-box; -moz-box-orient:vertical; /*Safari、Opera 以及 Chrome*/ display:-webkit-box; -webkit-box-orient:vertical; /*W3C*/ display:box; box-orient:vertical; } #div1{/*給div1添加樣式*/ width: 100px; height: 50px; background-color: #00B366; box-ordinal-group:2; -webkit-box-ordinal-group:2; -moz-box-ordinal-group:2; } #div2{/*給div2添加樣式*/ width: 100px; height: 50px; background-color: #80C8FE; box-ordinal-group:1; -webkit-box-ordinal-group:1; -moz-box-ordinal-group:1; } #div3{/*給div3添加樣式*/ width: 100px; height: 50px; background-color: #FEB380; box-ordinal-group:3; -webkit-box-ordinal-group:3; -moz-box-ordinal-group:3; }
效果如下：
5. box-flex：規定框的子元素是否可伸縮。
語法：
box-flex: value;
取值：
| 值 |
描述 |
| value（默認值0.0） |
元素的可伸縮行。柔性是相對的，例如 box-flex 為 2 的子元素兩倍於 box-flex 為 1 的子元素。 |
說明：
可伸縮，顧名思義，子元素如果規定可伸縮，則不要設置寬或高。但一些盒子可以有固定大小，不伸縮。
示例代碼6：設置div3為固定大小，div1和div2為可伸縮且div1是div2的兩倍（修改樣式表文件）
#main{/*設置外圍容器樣式*/ margin:auto; border:1px solid blue; width: 300px; height: 200px; margin-top:50px; /*Firefox*/ display:-moz-box; -moz-box-orient:vertical; /*Safari、Opera 以及 Chrome*/ display:-webkit-box; -webkit-box-orient:vertical; /*W3C*/ display:box; box-orient:vertical; } #div1{/*給div1添加樣式*/ box-flex:2.0; -webkit-box-flex:2.0; -moz-box-flex:2.0; background-color: #00B366; } #div2{/*給div2添加樣式*/ box-flex:1.0; -webkit-box-flex:1.0; -moz-box-flex:1.0; background-color: #80C8FE; } #div3{/*給div3添加樣式*/ height: 100px; background-color: #FEB380; }
效果如下：
6. box-flex-group：將可伸縮元素分配到柔性分組。
語法：
box-flex-group: integer;
取值：
| 值 |
描述 |
| integer（默認值1） |
一個整數。（第一個柔性分組是 1，后面的柔性分組是更大的值）。 |
說明：
動態給數值較大的組分配其內容所需的實際空間（如無內容、padding、border則不占空間），剩余空間則均分給數值最小的那個組（可能有1個或多個元素）。具體怎么分，本人還不清楚。
示例代碼7：將可伸縮元素分配到柔性分組（修改樣式表文件）
#main{/*設置外圍容器樣式*/ margin:auto; border:1px solid blue; width: 300px; height: 200px; margin-top:50px; /*Firefox*/ display:-moz-box; -moz-box-orient:vertical; /*Safari、Opera 以及 Chrome*/ display:-webkit-box; -webkit-box-orient:vertical; /*W3C*/ display:box; box-orient:vertical; } #div1{/*給div1添加樣式*/ background-color: #00B366; box-flex:2.0; -webkit-box-flex:2.0; -moz-box-flex:2.0; box-flex-group:1; -webkit-box-flex-group:1; -moz-box-flex-group:1; } #div2{/*給div2添加樣式*/ background-color: #80C8FE; box-flex:1.0; -webkit-box-flex:1.0; -moz-box-flex:1.0; box-flex-group:2; -webkit-box-flex-group:2; -moz-box-flex-group:2; } #div3{/*給div3添加樣式*/ background-color: #FEB380; box-flex:1.0; -webkit-box-flex:1.0; -moz-box-flex:1.0; box-flex-group:1; -webkit-box-flex-group:1; -moz-box-flex-group:1; }
效果如下：
7. box-pack：規定水平框中的水平位置或者垂直框中的垂直位置。
語法：
box-pack: start|end|center|justify;
取值：
| 值 |
描述 |
| start（默認值） |
對於正常方向的框，首個子元素的左邊緣被放在左側（最后的子元素后是所有剩余的空間）。 對於相反方向的框，最后子元素的右邊緣被放在右側（首個子元素前是所有剩余的空間）。 |
| end |
對於正常方向的框，最后子元素的右邊緣被放在右側（首個子元素前是所有剩余的空間）。 對於相反方向的框，首個子元素的左邊緣被放在左側（最后子元素后是所有剩余的空間）。 |
| center |
均等地分割多余空間，其中一半空間被置於首個子元素前，另一半被置於最后一個子元素后。 |
| justify |
在每個子元素之間分割多余的空間（首個子元素前和最后一個子元素后沒有多余的空間）。 |
說明：
空間太多如何處理，可利用空間的分布取決於兩個屬性值：box-align 和 box-pack。
屬性“box-pack”一般管理水平方向上的空間分布（根據box-orient的值，也可管理垂直方向），有以下四個可能屬性：start、end、 justify、 or center。如，start 所有盒子在父盒子的左側，余下的空間在右側。
屬性“box- align”管理垂直方向上的空間分布，有以下五個可能屬性之：start、 end,、center、 baseline和 stretch。如：start 每個盒子沿父盒子的上邊緣排列，余下的空間位於底部。
示例代碼8：設置所有盒子在父盒子的右側（修改樣式表文件）
#main{/*設置外圍容器樣式*/ margin:auto; border:1px solid blue; width: 400px; height: 200px; margin-top:50px; /*Firefox*/ display:-moz-box; -moz-box-orient:horizontal; -moz-box-pack:end; /*Safari、Opera 以及 Chrome*/ display:-webkit-box; -webkit-box-orient:horizontal; -webkit-box-pack:end; /*W3C*/ display:box; box-orient:horizontal; box-pack:end; } #div1{/*給div1添加樣式*/ width: 100px; height: 50px; background-color: #00B366; } #div2{/*給div2添加樣式*/ width: 100px; height: 50px; background-color: #80C8FE; } #div3{/*給div3添加樣式*/ width: 100px; height: 50px; background-color: #FEB380; }
效果如下：
設置所有盒子在父盒子的中間（center），如下圖左；設置垂直（box-orient）且盒子在父盒子的左側（start），如下圖右
8. box-align：規定如何對齊框的子元素。
語法：
box-align: start|end|center|baseline|stretch;
取值：
| 值 |
描述 |
| start |
對於正常方向的框，每個子元素的上邊緣沿着框的頂邊放置。 對於反方向的框，每個子元素的下邊緣沿着框的底邊放置。 |
| end |
對於正常方向的框，每個子元素的下邊緣沿着框的底邊放置。 對於反方向的框，每個子元素的上邊緣沿着框的頂邊放置。 |
| center |
均等地分割多余的空間，一半位於子元素之上，另一半位於子元素之下。 |
| baseline |
如果 box-orient 是inline-axis或horizontal，所有子元素均與其基線對齊。 |
| stretch（默認值） |
拉伸子元素以填充包含塊。 |
說明：控制垂直方向（box-pack的相對方向）。
示例代碼9：設置所有盒子在父盒子的右側（修改樣式表文件）
#main{/*設置外圍容器樣式*/ margin:auto; border:1px solid blue; width: 400px; height: 200px; margin-top:50px; /*Firefox*/ display:-moz-box; -moz-box-orient:vertical; -moz-box-pack:justify; -moz-box-align:center; /*Safari、Opera 以及 Chrome*/ display:-webkit-box; -webkit-box-orient:vertical; -webkit-box-pack:justify; -webkit-box-align:center; /*W3C*/ display:box; box-orient:vertical; box-pack:justify; box-align:center; }
效果如下：
9. box-lines：規定當超出父元素框的空間時，是否換行顯示。
語法：
box-lines: single|multiple;
取值：
| 值 |
描述 |
| single（默認值） |
所有子元素會被放置在單獨的行或列中。（無法匹配的元素會被視為溢出）。 |
| multiple |
允許框擴展為多行，以容納其所有子元素。 |
說明：
空間不足怎么辦，與傳統的盒模型一樣，overflow屬性用來決定其顯示方式。為了避免溢出，你可以設置box-lines為multiple使其換行顯示。有待驗證。
二．DIV+CSS模式簡介
Web標准主要由三部分組成：結構（structure）、表現（presenation）和行為（behavior）。
▪結構標准對應的主要語言是XHTML
▪表現標准對應的主要語言是CSS
▪行為標准對應的主要語言是JavaScript
制作一個靜態頁面，主要用到的就是XHTML與CSS，所以制作標准頁面的技術就是XHTML+CSS。而我們經常使用DIV進行頁面的整體布局結構（以前使用表格布局），用CSS修飾內容的外觀樣式，從而形成了DIV+CSS模式。
DIV其實是盒子模型的一個實例，所以深刻的理解盒子模型對網頁布局非常重要。
完
CSS盒子模型（上）
轉載需注明轉載字樣，標注原作者和原博文地址。
關注微信公眾號獲得及時推送
