CSS3彈性盒模型開發(fā)筆記(三)

本文介紹了CSS3彈性盒模型,供大家參考,大家亦可以結(jié)合CSS3彈性盒模型開發(fā)筆記(一)、CSS3彈性盒模型開發(fā)筆記(二)進行學(xué)習(xí),具體內(nèi)容如下
box-pack和box-align屬性
當(dāng)彈性元素和非彈性元素混合排版時,有可能會出現(xiàn)所有子元素的尺寸大小或小于盒子的尺寸,從而出現(xiàn)盒子空間不足或者富余的情況,這時就需要一種方法來管理盒子的空間。如果子元素的總尺寸小于盒子的尺寸,則可以使用box-align和box-pack屬性進行管理。
box-pack屬性可以在水平方向上對盒子的富余空間進行管理,該屬性的基本語法如下:
box-pack:start | end | center | justify
取值說明:
start:所有子元素都顯示在盒子的左側(cè),富余的空間顯示在盒子的右側(cè)。
end:所有子元素都顯示在盒子的右側(cè),富余的空間顯示在盒子的左側(cè)。
justify:富裕的空間在子元素之間平均分配。在第一個子元素之前和最后一個子元素之后不分配空間。
center:富余的空間在盒子的兩側(cè)平均分配。
box-align屬性可以在垂直方向上對盒子的富余空間進行管理,該屬性的基本語法如下:
box-align:start | end | center | baseline | stretch
取值說明:
start:所有子元素沿著盒子的上邊緣排列,都顯示在盒子的上部,富余的空間顯示在盒子的底部。
end:所有子元素沿著盒子的下邊緣排列,都顯示在盒子的底部,富裕的空間顯示在盒子的上部。
center:富余的空間在盒子的上下兩側(cè)平均分配,即上面一半,下面一半。
baseline:所有盒子沿著它們的基線排列,富余的空間可前可后顯示。
stretch:每個子元素的高度被調(diào)整到適合盒子的高度顯示。
實戰(zhàn)體驗:自適應(yīng)布局居中設(shè)計
HTML代碼:
- <body>
- <div id="box"><img src="images/china.gif" /></div>
- </div>
- </body>
CSS3代碼:
- <style type="text/css">
- /*明確定義頁面文檔滿窗口顯示*/
- body,html{
- height:100%;
- width:100%;
- }
- body{/*清除頁邊距*/
- margin:0;
- padding:0;
- /*定義文檔為彈性盒子顯示*/
- display:box;
- display:-moz-box;
- display:-webkit-box;
- /*頁面元素水平顯示,針對本例可以省略*/
- box-orient:horizontal;
- -moz-box-orient:horizontal;
- -webkit-box-orient:horizontal;
- /*定義提示對話框頁面水平居中顯示*/
- box-pack:center;
- -moz-box-pack:center;
- -webkit-box-pack:center;
- box-align:center;
- /*定義提示對話框頁面垂直居中顯示*/
- -moz-box-align:center;
- -webkit-box-align:center;
- /*以背景方式模擬頁面顯示*/
- background:#04082b url(images/map1.jpg) no-repeat top center;
- }
- #box{
- border:1px solid red;
- padding:4px;
- }
- </style>
演示效果:
關(guān)于布局空間管理的進一步分析
分析布局空間管理的各種情況。
基本代碼:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>box-pack、box-align</title>
- <style type="text/css">
- #box {
- border:solid 1px red;
- width:600px;
- height:400px;
- display : -moz-box;
- display : -webkit-box;
- display : box;
- }
- #box div {
- margin:4px;
- border:solid 1px #eee;
- }
- #box div img { width:120px; }
- </style>
- </head>
- <body>
- <div id="box">
- <div><img src="images/1.png" /></div>
- <div><img src="images/5.png" /></div>
- <div><img src="images/7.png" /></div>
- <div><img src="images/9.png" /></div>
- </div>
- </body>
- </html>
演示效果:
子元素全部水平和垂直居中顯示顯示
- #box{
- /*水平居中管理*/
- box-pack:center;
- -moz-box-pack:center;
- -webkit-box-pack:center;
- /*垂直居中管理*/
- box-align:center;
- -moz-box-align:center;
- -webkit-box-align:center;
- }
演示效果:
子元素全部位于盒子的左下角,富余空間位于右上角
- #box{
- /*水平居中管理*/
- box-pack:start;
- -moz-box-pack:start;
- -webkit-box-pack:start;
- /*垂直居中管理*/
- box-align:end;
- -moz-box-align:end;
- -webkit-box-align:end;
- }
演示效果:
- 子元素水平平均分布,垂直伸展展示
- #box{
- /*水平居中管理*/
- box-pack:justify;
- -moz-box-pack:justify;
- -webkit-box-pack:justify;
- /*垂直居中管理*/
- box-align:stretch;
- -moz-box-align:stretch;
- -webkit-box-align:stretch;
- }
演示效果:
- 子元素水平平均分布,在垂直方向上按基線分布
- #box{
- /*水平居中管理*/
- box-pack:justify;
- -moz-box-pack:justify;
- -webkit-box-pack:justify;
- /*垂直居中管理*/
- box-align:baselinebaseline;
- -moz-box-align:baselinebaseline;
- -webkit-box-align:baselinebaseline;
- font-size:28px;
- }
演示效果:
- 子元素全部位于盒子的右側(cè)并平均分布,并按垂直順序進行分布
- #box{
- /*水平居中管理*/
- box-pack:justify;
- -moz-box-pack:justify;
- -webkit-box-pack:justify;
- /*垂直居中管理*/
- box-align:end;
- -moz-box-align:end;
- -webkit-box-align:end;
- /*垂直分布*/
- box-orient:vertical;
- -moz-box-orient:vertical;
- -webkit-box-orient:vertical;
- }
演示效果:
空間溢出管理
上述“子元素全部位于盒子的右側(cè)并平均分布,并按垂直順序進行分布”可以看出,彈性布局中盒子內(nèi)的元素很容易“跑出”盒子的“包圍圈”。這種現(xiàn)象被稱為空間已出。與傳統(tǒng)的盒模型一樣,CSS允許使用overflow屬性來處理溢出內(nèi)容的顯示方式。當(dāng)然,我們還可以使用box-lines屬性避免空間已出問題(目前各大瀏覽器支持不太好)。該屬性語法如下:
box-lines:single | multiple
取值說明:
single:所有子元素都單行或者單行顯示。
multiple:所有子元素可以多行或多列顯示。
實戰(zhàn)體驗:讓子元素分行顯示
HTML代碼:
- <body>
- <div id="box">
- <div><img src="images/1.png" /></div>
- <div><img src="images/2.png" /></div>
- <div><img src="images/3.png" /></div>
- <div><img src="images/4.png" /></div>
- <div><img src="images/5.png" /></div>
- <div><img src="images/6.png" /></div>
- <div><img src="images/7.png" /></div>
- <div><img src="images/8.png" /></div>
- </div>
- </body>
CSS3代碼:
- <style type="text/css">
- #box {
- border:solid 1px red;
- width:600px;
- height:400px;
- display : -moz-box;
- display : -webkit-box;
- display : box;
- }
- #box {/*定義子元素分行顯示*/
- -moz-box-lines : multiple;
- -webkit-box-lines : multiple;
- box-lines : multiple;
- }
- #box div {
- margin:4px;
- border:solid 1px #aaa;
- -moz-box-flex: 1;
- -webkit-box-flex: 1;
- box-flex: 1;
- }
- #box div img { width:120px; }
- </style>
演示效果:
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助。
本文地址:http://blog.csdn.net/lovejulyer/article/details/51234774
相關(guān)文章
CSS盒模型制定網(wǎng)頁的寬度和高度的原理-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學(xué)網(wǎng)
當(dāng)我們布局一個網(wǎng)頁的時候,經(jīng)常會遇到這樣的一種情況,那就是最終網(wǎng)頁成型的寬度或是高度會超出我們預(yù)先的計算,其實就就是所謂的CSS的盒模型造成的。 #test{margin:102008-10-17CSS教程:盒模型(BOX Model)-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學(xué)網(wǎng)
如果想熟練掌握DIV和CSS的布局方法,首先要對盒模型有足夠的了解。每個HTML元素都可以看作一個裝了東西的盒子,盒子里面的內(nèi)容到盒子的邊框之間的距離即填充(padding2008-10-17CSS入門教程:計算CSS盒模型寬和高-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學(xué)網(wǎng)
出處:當(dāng)我們布局一個網(wǎng)頁的時候,經(jīng)常會遇到這樣的一種情況,那就是最終網(wǎng)頁成型的寬度或是高度會超出我們預(yù)先的計算,其實就就是所謂的CSS的盒模型造成的。 #test{m2008-10-17- 網(wǎng)頁制作Webjx文章簡介:如果想熟練掌握DIV和CSS的布局方法,首先要對盒模型有足夠的了解。每個HTML元素都可以看作一個裝了東西的盒子,盒子里面的內(nèi)容到盒子的邊框之間的2009-04-02
CSS教程:通過實例學(xué)習(xí)和理解CSS盒模型
網(wǎng)頁制作Webjx文章簡介:盒模型主要定義四個區(qū)域:內(nèi)容(content)、內(nèi)邊框距(padding)、邊框(border)和外邊距(margin)。 自從1996年CSS1的推出,W32009-04-02- CSS 盒模型 網(wǎng)頁設(shè)計中的每個元素都是長方形的盒子。盒子的尺寸是怎樣精確計算的,請看下圖: 如果是 Firebug 用戶的話(基本和前端有關(guān)的都會用到 Firebug 吧 –2009-06-06
網(wǎng)頁設(shè)計學(xué)習(xí)教程 CSS盒模型
Margin 比較特別,它不會影響盒子本身的大小,但是它會影響和盒子有關(guān)的其他內(nèi)容,因此 margin 是盒模型的一個重要的組成部分。2009-07-19- 盒模型是CSS的核心知識點之一,它指定元素如何顯示以及如何相互交互。頁面上的每個元素都被看成一個矩形框,這個框由元素的內(nèi)容、內(nèi)邊距、邊框和外邊距組成,需要了解的朋友2012-12-24
- Css3引入了新的盒模型——彈性盒模型決定一個盒子在其他盒子中的分布方式以及如何處理可用的空間,使用該模型,可以很輕松的創(chuàng)建自適應(yīng)瀏覽器窗口的流動布局或自適應(yīng)字體大2013-05-27
- 今天剛學(xué)了css3的彈性盒模型,這是一個可以讓你告別浮動、完美實現(xiàn)垂直水平居中的新特性。本文主要是總結(jié)一下今天所學(xué),有需要的朋友可以參考下2014-10-08