欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

  發(fā)布時間：2016-04-26 15:09:45   作者：佚名   我要評論
這篇文章主要為大家分享了CSS3彈性盒模型開發(fā)筆記的最后一篇，之前已經(jīng)為大家做了鋪墊，本文繼續(xù)深入探討CSS3彈性盒模型，感興趣的小伙伴們可以參考一下

本文介紹了CSS3彈性盒模型，供大家參考，大家亦可以結(jié)合CSS3彈性盒模型開發(fā)筆記（一）、CSS3彈性盒模型開發(fā)筆記（二）進行學習，具體內(nèi)容如下

box-pack和box-align屬性

當彈性元素和非彈性元素混合排版時，有可能會出現(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)體驗：自適應布局居中設(shè)計

HTML代碼：

XML/HTML Code復制內(nèi)容到剪貼板
  1. <body>  
  2. <div id="box"><img src="images/china.gif" /></div>     
  3. </div>  
  4. </body>  
  5.   

CSS3代碼：

CSS Code復制內(nèi)容到剪貼板
  1. <style type="text/css">   
  2. /*明確定義頁面文檔滿窗口顯示*/  
  3. body,html{   
  4.     height:100%；   
  5.     width：100%；   
  6. }   
  7. body{/*清除頁邊距*/  
  8.     margin:0;   
  9.     padding:0;   
  10.     /*定義文檔為彈性盒子顯示*/  
  11.     display:box;   
  12.     display:-moz-box;   
  13.     display:-webkit-box;   
  14.     /*頁面元素水平顯示，針對本例可以省略*/  
  15.     box-orient:horizontal;   
  16.     -moz-box-orient:horizontal;   
  17.     -webkit-box-orient:horizontal;   
  18.     /*定義提示對話框頁面水平居中顯示*/  
  19.     box-pack:center;   
  20.     -moz-box-pack:center;   
  21.     -webkit-box-pack:center;   
  22.     box-align:center;   
  23.     /*定義提示對話框頁面垂直居中顯示*/  
  24.     -moz-box-align:center;   
  25.     -webkit-box-align:center;   
  26.     /*以背景方式模擬頁面顯示*/  
  27.     background:#04082b url(images/map1.jpg) no-repeat top center;   
  28. }   
  29. #box{   
  30.    border:1px solid red;   
  31.    padding:4px;   
  32. }   
  33. </style>   
  34.   

演示效果：

關(guān)于布局空間管理的進一步分析

分析布局空間管理的各種情況。

基本代碼：

XML/HTML Code復制內(nèi)容到剪貼板
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <title>box-pack、box-align</title>  
  6. <style type="text/css">  
  7.   
  8. #box {   
  9.     border:solid 1px red;   
  10.     width:600px;   
  11.     height:400px;   
  12.   
  13.     display : -moz-box;   
  14.     display : -webkit-box;   
  15.     display : box;   
  16. }   
  17. #box div {   
  18.     margin:4px;   
  19.     border:solid 1px #eee;   
  20. }   
  21. #box div img { width:120px; }   
  22. </style>  
  23. </head>  
  24.   
  25. <body>  
  26. <div id="box">  
  27.     <div><img src="images/1.png" /></div>  
  28.     <div><img src="images/5.png" /></div>    
  29.     <div><img src="images/7.png" /></div>     
  30.     <div><img src="images/9.png" /></div>              
  31. </div>  
  32. </body>  
  33. </html>  
  34.   

演示效果：

子元素全部水平和垂直居中顯示顯示

CSS Code復制內(nèi)容到剪貼板
  1. #box{   
  2.     /*水平居中管理*/  
  3.     box-pack:center;   
  4.     -moz-box-pack:center;   
  5.     -webkit-box-pack:center;   
  6.     /*垂直居中管理*/  
  7.     box-align:center;   
  8.     -moz-box-align:center;   
  9.     -webkit-box-align:center;   
  10. }   
  11.   

演示效果：

子元素全部位于盒子的左下角，富余空間位于右上角

CSS Code復制內(nèi)容到剪貼板
  1. #box{   
  2.     /*水平居中管理*/  
  3.     box-pack:start;   
  4.     -moz-box-pack:start;   
  5.     -webkit-box-pack:start;   
  6.     /*垂直居中管理*/  
  7.     box-align:end;   
  8.     -moz-box-align:end;   
  9.     -webkit-box-align:end;   
  10. }   
  11.   

演示效果：

- 子元素水平平均分布，垂直伸展展示

CSS Code復制內(nèi)容到剪貼板
  1. #box{   
  2.     /*水平居中管理*/  
  3.     box-pack:justify;   
  4.     -moz-box-pack:justify;   
  5.     -webkit-box-pack:justify;   
  6.     /*垂直居中管理*/  
  7.     box-align:stretch;   
  8.     -moz-box-align:stretch;   
  9.     -webkit-box-align:stretch;   
  10. }   
  11.   

演示效果：

- 子元素水平平均分布，在垂直方向上按基線分布

CSS Code復制內(nèi)容到剪貼板
  1. #box{   
  2.     /*水平居中管理*/  
  3.     box-pack:justify;   
  4.     -moz-box-pack:justify;   
  5.     -webkit-box-pack:justify;   
  6.     /*垂直居中管理*/  
  7.     box-align:baselinebaseline;   
  8.     -moz-box-align:baselinebaseline;   
  9.     -webkit-box-align:baselinebaseline;   
  10.     font-size:28px；   
  11. }   
  12.   

演示效果：

- 子元素全部位于盒子的右側(cè)并平均分布，并按垂直順序進行分布

CSS Code復制內(nèi)容到剪貼板
  1. #box{   
  2.     /*水平居中管理*/  
  3.     box-pack:justify;   
  4.     -moz-box-pack:justify;   
  5.     -webkit-box-pack:justify;   
  6.     /*垂直居中管理*/  
  7.     box-align:end;   
  8.     -moz-box-align:end;   
  9.     -webkit-box-align:end;   
  10.     /*垂直分布*/  
  11.     box-orient:vertical;   
  12.     -moz-box-orient:vertical;   
  13.     -webkit-box-orient:vertical;       
  14. }   
  15.   

演示效果：

空間溢出管理

上述“子元素全部位于盒子的右側(cè)并平均分布，并按垂直順序進行分布”可以看出，彈性布局中盒子內(nèi)的元素很容易“跑出”盒子的“包圍圈”。這種現(xiàn)象被稱為空間已出。與傳統(tǒng)的盒模型一樣，CSS允許使用overflow屬性來處理溢出內(nèi)容的顯示方式。當然，我們還可以使用box-lines屬性避免空間已出問題（目前各大瀏覽器支持不太好）。該屬性語法如下：

box-lines：single | multiple

取值說明：

single：所有子元素都單行或者單行顯示。

multiple：所有子元素可以多行或多列顯示。

實戰(zhàn)體驗：讓子元素分行顯示

HTML代碼：

XML/HTML Code復制內(nèi)容到剪貼板
  1. <body>  
  2. <div id="box">  
  3.     <div><img src="images/1.png" /></div>  
  4.     <div><img src="images/2.png" /></div>  
  5.     <div><img src="images/3.png" /></div>  
  6.     <div><img src="images/4.png" /></div>  
  7.     <div><img src="images/5.png" /></div>  
  8.     <div><img src="images/6.png" /></div>  
  9.     <div><img src="images/7.png" /></div>  
  10.     <div><img src="images/8.png" /></div>  
  11. </div>  
  12. </body>  
  13.   

CSS3代碼：

CSS Code復制內(nèi)容到剪貼板
  1. <style type="text/css">   
  2. #box {   
  3.     border:solid 1px red;   
  4.     width:600px;   
  5.     height:400px;   
  6.     display : -moz-box;   
  7.     display : -webkit-box;   
  8.     display : box;   
  9. }   
  10. #box {/*定義子元素分行顯示*/  
  11.     -moz-box-lines : multiple;   
  12.     -webkit-box-lines : multiple;   
  13.     box-lines : multiple;   
  14. }   
  15. #box div {   
  16.     margin:4px;   
  17.     border:solid 1px #aaa;   
  18.     -moz-box-flex: 1;   
  19.     -webkit-box-flex: 1;   
  20.     box-flex: 1;   
  21. }   
  22. #box div img { width:120px; }   
  23. </style>   
  24.   

演示效果：

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助。

本文地址：http://blog.csdn.net/lovejulyer/article/details/51234774

相關(guān)文章

  • CSS盒模型制定網(wǎng)頁的寬度和高度的原理-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學網(wǎng)

    當我們布局一個網(wǎng)頁的時候，經(jīng)常會遇到這樣的一種情況，那就是最終網(wǎng)頁成型的寬度或是高度會超出我們預先的計算，其實就就是所謂的CSS的盒模型造成的。 #test{margin:10
    2008-10-17

  • CSS教程:盒模型(BOX Model)-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學網(wǎng)

    　　如果想熟練掌握DIV和CSS的布局方法，首先要對盒模型有足夠的了解。每個HTML元素都可以看作一個裝了東西的盒子，盒子里面的內(nèi)容到盒子的邊框之間的距離即填充（padding
    2008-10-17

  • CSS入門教程:計算CSS盒模型寬和高-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學網(wǎng)

    　出處：當我們布局一個網(wǎng)頁的時候，經(jīng)常會遇到這樣的一種情況，那就是最終網(wǎng)頁成型的寬度或是高度會超出我們預先的計算，其實就就是所謂的CSS的盒模型造成的。 #test{m
    2008-10-17

  • 掌握盒模型輕松DIV CSS網(wǎng)頁布局

    網(wǎng)頁制作Webjx文章簡介：如果想熟練掌握DIV和CSS的布局方法，首先要對盒模型有足夠的了解。每個HTML元素都可以看作一個裝了東西的盒子，盒子里面的內(nèi)容到盒子的邊框之間的
    2009-04-02

  • CSS教程:通過實例學習和理解CSS盒模型

    網(wǎng)頁制作Webjx文章簡介：盒模型主要定義四個區(qū)域：內(nèi)容（content）、內(nèi)邊框距（padding）、邊框（border）和外邊距（margin）。 自從1996年CSS1的推出，W3
    2009-04-02

  • CSS教程之CSS盒模型

    CSS 盒模型 網(wǎng)頁設(shè)計中的每個元素都是長方形的盒子。盒子的尺寸是怎樣精確計算的，請看下圖： 如果是 Firebug 用戶的話(基本和前端有關(guān)的都會用到 Firebug 吧 –
    2009-06-06

  • 網(wǎng)頁設(shè)計學習教程 CSS盒模型

    Margin 比較特別，它不會影響盒子本身的大小，但是它會影響和盒子有關(guān)的其他內(nèi)容，因此 margin 是盒模型的一個重要的組成部分。
    2009-07-19

  • css盒模型和塊級、行內(nèi)元素深入理解

    盒模型是CSS的核心知識點之一，它指定元素如何顯示以及如何相互交互。頁面上的每個元素都被看成一個矩形框，這個框由元素的內(nèi)容、內(nèi)邊距、邊框和外邊距組成,需要了解的朋友
    2012-12-24

  • css3彈性盒模型實例介紹

    Css3引入了新的盒模型——彈性盒模型決定一個盒子在其他盒子中的分布方式以及如何處理可用的空間，使用該模型，可以很輕松的創(chuàng)建自適應瀏覽器窗口的流動布局或自適應字體大
    2013-05-27

  • css3彈性盒模型（Flexbox）詳細介紹

    今天剛學了css3的彈性盒模型，這是一個可以讓你告別浮動、完美實現(xiàn)垂直水平居中的新特性。本文主要是總結(jié)一下今天所學，有需要的朋友可以參考下
    2014-10-08

最新評論