從這篇文章開始,會利用幾個篇幅,我將跟大家分享 從CSS1到CSS3都是如何實現頁面佈局的(當然,所指的範疇是利用CSS技術)。
由於盒子模型技術內容比較多,這篇文章我將着重講解知識點。
下一篇文章,我會帶領大家開發一個兼容 pc端瀏覽器和 移動端瀏覽器的彈性佈局web界面的實例。希望大家能從中領受到CSS3在佈局方面的強大功能。
好了,長話短說,現在開始我們的《CSS3中的彈性流體盒模型技術詳解》之旅吧!
在講解CSS3中新增的彈性佈局屬性之前,我們先回顧一下CSS1 和 CSS2中都已經定義了哪些佈局方面的屬性,這樣也會增加我們理解彈性佈局。
其實我們現在有很多一部分人,你們剛剛接觸CSS層疊樣式表,或者接觸有一段時間了,但是卻沒有很好的去消化與理解。可能平時你們還一直在使用table,然後通過不斷了合併單元格來實現網頁佈局。希望我今天的這篇文章能徹底改變大家的觀念。
Q:如何理解盒子模型?
A:大家可以想一想,在現實生活中,如果我們拿一個盒子來裝東西,那麼盒子裏面的東西是不是跟這個盒子之間會有空隙呢?站在裏面物品的角度,則它們之間的間隙距離是不是就可以構成 物品到盒子的外邊距。如果站在盒子的角度,則從盒子到物品的距離,是不是可以看出盒子的內邊距呢。 當然,盒子還是會有寬和高的。外邊距的英文就是margin,內邊距的英文是padding,寬是width,高是height。下面是盒子模型的2D圖:
CSS 1中定義了盒子模型的基本元素,詳細屬性請看下錶:
margin-top | 元素頂部外邊距 |
margin-right | 元素右側外邊距 |
margin-bottom | 元素底部外邊距 |
margin-left | 元素左側外邊距 |
margin | 這是一個複合屬性,定義 元素 各個邊的外邊距, 屬性值的順序是: 上,右,下,左 |
border-top | 元素上邊框樣式 |
border-right | 元素右邊框樣式 |
border-bottom | 元素下邊框樣式 |
border-left | 元素左邊框樣式 |
border-width | 元素邊框寬度 |
border-top-width | 元素上邊框寬度 |
border-right-width | 元素右邊框寬度 |
border-bottom-width | 元素下邊框寬度 |
border-left-width | 元素左邊框寬度 |
border | 複合屬性,可以同時設置各個邊框樣式 |
padding-top | 元素上側內邊距 |
padding-right | 元素右側內邊距 |
padding-bottom | 元素下側內邊距 |
padding-left | 元素左側內邊距 |
padding | 複合屬性,同時設置各個邊框內邊距 |
width | 設置元素的寬度 |
height | 設置元素的高度 |
float | 設置元素浮動顯示 |
clear | 清除元素的浮動效果 |
border-color | 設置邊框顏色 |
border-style | 設置邊框樣式 |
CSS 2在以上基礎上,又做了一些細化:
border-top-color | 元素上邊框顏色 |
border-right-color | 元素右邊框顏色 |
border-bottom-color | 元素下邊框顏色 |
border-left-color | 元素左邊框顏色 |
border-top-style | 元素上邊框樣式 |
border-right-style | 元素右邊框樣式 |
border-bottom-style | 元素下邊框樣式 |
border-left-style | 元素左邊框樣式 |
在CSS2的基礎上,CSS3增加了彈性盒模型佈局屬性,這爲我們開發適合現代移動瀏覽器提供了便利:
box-align | 子元素在盒子內垂直方向上的空間分配 |
box-pack | 子元素在盒子內水平方向的空間分配方式 |
box-direction | 盒子的顯示順序 |
box-flex | 元素在盒子內的自適應尺寸 |
box-flex-group | 自適應子元素羣組 |
box-lines | 子元素分列顯示 |
box-ordinal-group | 子元素在盒子內的顯示位置 |
box-orient | 盒子分佈的座標軸 |
下面我將對CSS3中新增的彈性盒模型屬性做詳細介紹,並通過實際coding來帶領大家深刻認識彈性佈局的威力。
首先我們先創建一個html頁面,代碼如下所示:
<!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <link rel=”stylesheet” href=”styles.css”> <title>CSS3彈性佈局</title> </head> <body> <div class=”row“> <div class=”sidebar“> 我是邊欄 </div> <div class=”middle“> 我是中間內容 </div> <div class=”article“> 我是頁面主體 </div> </div> </body> </html> |
接着我們給頁面添加上基本的樣式,如下所示:
*{ /*清除所有元素的默認外邊距和內邊距*/ margin:0; padding:0; }
.row{/*設置外圍容器樣式*/ margin:auto; border:1px solid black; width:600px; height:400px; margin-top:50px; }
.sidebar{/*給側邊欄添加樣式*/ background-color:#00B366; }
.middle{/*給中間區域添加樣式*/ background-color:#80C8FE; }
.article{/*給主體內容添加樣式*/ background-color:#FEB380; } |
運行頁面,查看一下目前樣式的應用效果:
首先聲明:要想運用CSS3的彈性佈局,需要將父容器設置爲display:box 或 display:inline-box,下面不在贅述。
box-orient 作用: box-orient屬性規定了子元素應該是水平方向還是垂直方向顯示。
box-orient 語法: box-orient: horizontal | vertical | inline-axis | block-axis | inherit;
語法解釋: horizontal 和 inline-axis 規定了子元素以水平方向顯示,兩者的顯示效果差不多,具體差異不清。vertical 和 block-axis 規定了子元素以垂直方向顯示, 兩者的顯示效果差不多,具體差異不清 。
注意:由於此屬性還處於測試當中,所以爲了兼容webkit核心的瀏覽器,需要加上-webkit-前綴,Mozilla核心的瀏覽器,需要加上前綴-moz-。
示例:
修改樣式表文件,添加如下樣式代碼:
.row{/*設置外圍容器樣式*/ margin:auto; border:1px solid black; width:600px; height:400px; margin-top:50px; display:-webkit-box;/*兼容webkit或mozilla核心瀏覽器,啓用彈性盒子模型*/ display:-moz-box; display:box; -webkit-box-orient:horizontal;/*水平方向顯示,兼容webkit和mozilla核心瀏覽器*/ -moz-box-orient:horizontal; box-orient:horizontal; } |
運行demo頁面,效果如下:
通過以上效果圖,大家可以發現div已經變成了水平佈局,且寬度是正好包裹內容, css2.1如果需要實現此效果,就得通過float:left;來實現了。
我們再次修改代碼,實現垂直方向上佈局:
.row{/*設置外圍容器樣式*/ margin:auto; border:1px solid black; width:600px; height:400px; margin-top:50px; display:-webkit-box;/*兼容webkit或mozilla核心瀏覽器,啓用彈性盒子模型*/ display:-moz-box; display:box; -webkit-box-orient:vertical;/*垂直方向顯示,兼容webkit和mozilla核心瀏覽器*/ -moz-box-orient:vertical; box-orient:vertical; } |
運行頁面,效果如下圖所示:
inline-axis 和 block-axis 運行效果分別與horizontal和vertical一樣,這裏大家可以自行去測試。
inherit屬性值是佈局方式繼承自父元素,如果父元素是水平的,則它也使用水平佈局,這個大家可以自行去測試。
box-align 作用:box-align規定了如何在垂直方向上對齊框內的子元素。
box-align 語法:box-align: start | end | center | baseline | stretch;
start | 對於正常方向的框,每個子元素的上邊緣沿着框的頂部放置。 對於反方向的框,每個子元素的下邊緣沿着框的底部放置。 |
end | 對於正常方向的框,每個子元素的下邊緣沿着框的底部放置。 對於反方向的框,每個子元素的上邊緣沿着礦的頂部放置。 |
center | 均等地分割多餘的空間,一半位於子元素之上,一半位於子元素之下。 |
baseline | 如果box-orient是inline-axis或horizontal,所有子元素均與其基線對齊。 |
stretch | 拉伸子元素以填充包含塊 |
注意:由於此屬性還處於測試當中,所以爲了兼容webkit核心的瀏覽器,需要加上-webkit-前綴,Mozilla核心的瀏覽器,需要加上前綴-moz-。
示例:
添加start樣式,代碼如下:
.row{/*設置外圍容器樣式*/ margin:auto; border:1px solid black; width:600px; height:400px; margin-top:50px; display:-webkit-box;/*兼容webkit或mozilla核心瀏覽器,啓用彈性盒子模型*/ display:-moz-box; display:box; -webkit-box-orient:horizontal;/*水平方向顯示,兼容webkit和mozilla核心瀏覽器*/ -moz-box-orient:horizontal; box-orient:horizontal; -webkit-box-align:start;/*正常佈局下,吸附在頂端顯示,相反佈局下,吸附在底部顯示*/ -moz-box-align:start; box-align:start; } |
運行效果如下所示:
接着,我們讓子元素吸附在底部顯示,修改代碼如下:
.row{/*設置外圍容器樣式*/ margin:auto; border:1px solid black; width:600px; height:400px; margin-top:50px; display:-webkit-box;/*兼容webkit或mozilla核心瀏覽器,啓用彈性盒子模型*/ display:-moz-box; display:box; -webkit-box-orient:horizontal;/*水平方向顯示,兼容webkit和mozilla核心瀏覽器*/ -moz-box-orient:horizontal; box-orient:horizontal; -webkit-box-align:end;/*正常佈局下,吸附在底部顯示,相反佈局下,吸附在頂部顯示*/ -moz-box-align:end; box-align:end; } |
此時的運行效果如下所示:
center和baseline的功能,大家可以自行測試,這裏着重強調一下,如果屬性值設爲stretch,則它會拉伸填充滿父元素,其實也就是未設置box-align時候的樣式,所以說如果你要設置stretch,那你直接就別設置box-align屬性,因爲沒意義了。
修改屬性值爲stretch,代碼如下:
.row{/*設置外圍容器樣式*/ margin:auto; border:1px solid black; width:600px; height:400px; margin-top:50px; display:-webkit-box;/*兼容webkit或mozilla核心瀏覽器,啓用彈性盒子模型*/ display:-moz-box; display:box; -webkit-box-orient:horizontal;/*水平方向顯示,兼容webkit和mozilla核心瀏覽器*/ -moz-box-orient:horizontal; box-orient:horizontal; -webkit-box-align:stretch;/*其實此效果就是不設置box-align時候的樣式*/ -moz-box-align:stretch; box-align:stretch; } |
效果如下:
好了,由於篇幅有限,這篇就先講到這裏。
歡迎大家加入互聯網技術交流羣:62329335
個人申明:所分享博文,絕對原創,併力爭每一個知識點都通過實戰演示來進行驗證。