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

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

  發(fā)布時(shí)間：2016-04-26 14:32:24   作者：佚名   我要評(píng)論
這篇文章主要為大家分享了CSS3彈性盒模型開發(fā)筆記，想要學(xué)好CSS3彈性盒模型的朋友不要錯(cuò)過這篇文章，可以參考一下

本文為大家繼續(xù)分享CSS3彈性盒模型開發(fā)筆記第二篇，之前一篇以及為大家引入了CSS3彈性盒模型的相關(guān)介紹，點(diǎn)擊查看：CSS3彈性盒模型開發(fā)筆記（一）

box-flex屬性

box-flex屬性能夠靈活地控制子元素在盒子中的顯示空間。注意，顯示空間包括子元素的寬度和高度，而不只是子元素所在欄目的寬度，也可以說(shuō)是子元素在盒子中所占的面積。該屬性在彈性布局中非常重要，它解決了傳統(tǒng)設(shè)計(jì)中習(xí)慣使用百分比定義彈性布局的弊端。box-flex屬性的基本語(yǔ)法：

box-flex:<number>

取值說(shuō)明：

<number>屬性值是一個(gè)整數(shù)或者小數(shù)。當(dāng)盒子中包含多個(gè)定義了box-flex屬性的子元素時(shí)，瀏覽器將會(huì)把這些子元素的box-flex屬性值相加，然后根據(jù)他們各自的值占總值的比例來(lái)分配盒子剩余的空間。注意，box-flex屬性只有在盒子擁有的確定的空間大小之后才能正確解析。在設(shè)計(jì)中，較穩(wěn)妥的做法是為了盒子定義具體的width或height屬性值。

實(shí)戰(zhàn)體驗(yàn)：自適應(yīng)欄目寬度設(shè)計(jì)

在傳統(tǒng)的網(wǎng)頁(yè)設(shè)計(jì)中，如果要把一個(gè)欄目分成三欄，比較簡(jiǎn)單的做法是把三個(gè)子元素的寬度都設(shè)置為33.3%。這種做法無(wú)法把父元素的寬度完全填充，當(dāng)父元素的寬度足夠大的時(shí)候，用戶會(huì)看到未填充的空白區(qū)域。但是，如果為子元素設(shè)置了固定寬度值，彈性布局會(huì)變得更為復(fù)雜。如果使用box-flex屬性，這個(gè)問題就會(huì)迎刃而解。

html代碼：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <body>  
  2. <h1><img src="images/web3_13.gif" /></h1>  
  3. <div id="box">  
  4.     <!--左側(cè)欄目-->  
  5.     <div id="box1"><img src="images/web3_01.gif" /></div>  
  6.     <!--中間欄目-->  
  7.     <div id="box2">  
  8.         <h2><img src="images/web3_02.gif" /></h2>  
  9.         <div><img src="images/web3_04.gif" /></div>  
  10.         <div><img src="images/web3_05.gif" /></div>  
  11.         <div><img src="images/web3_06.gif" /></div>  
  12.         <div><img src="images/web3_07.gif" /></div>  
  13.     </div>  
  14.     <!--右側(cè)欄目-->  
  15.     <div id="box3">  
  16.         <h2><img src="images/web3_12.gif" /></h2>  
  17.         <div><img src="images/web3_08.gif" /></div>  
  18.         <div><img src="images/web3_09.gif" /></div>  
  19.         <div><img src="images/web3_10.gif" /></div>  
  20.         <div><img src="images/web3_11.gif" /></div>  
  21.     </div>  
  22. </div>  
  23. </body>  

CSS3代碼：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. /*這是一個(gè)三欄布局的頁(yè)面，其中左側(cè)欄目的寬度是固定的，而中間和右側(cè)欄目的寬度是彈性的*/  
  2. <style>   
  3. body{   
  4.     margin:0;   
  5.     padding:0;   
  6.     text-align:center;   
  7. }   
  8. h1,h2{margin:2px;}   
  9. #box{   
  10.     margin:auto;   
  11.     text-align:left;   
  12.     width:1002px;   
  13.     overflow:hidden;   
  14. }   
  15. /*定義box元素盒形顯示，并設(shè)置子元素水平布置*/  
  16. #box{   
  17.     display:box;   
  18.     display:-moz-box;   
  19.     display:-webkit-box;   
  20.     box-orient:horizontal;   
  21.     -moz-box-orient:horizontal;   
  22.     -webkit-box-orient:horizontal;     
  23. }   
  24. /*定義盒子左側(cè)欄目的寬度為固定顯示*/  
  25. #box1{width:201px;}   
  26. #box2,#box3{   
  27.     border:1px solid #CCC;   
  28.     margin:2px;    
  29. }   
  30. /*定義盒子內(nèi)中間欄目的寬度為盒子剩余空間的2/3*/  
  31. #box2{   
  32.     box-flex: 4;   
  33.     -moz-box-flex: 4;   
  34.     -webkit-box-flex: 4;   
  35. }   
  36. /*定義盒子內(nèi)中間欄目的寬度為盒子剩余空間的1/3*/  
  37. #box3{   
  38.     box-flex:2;   
  39.     -moz-box-flex:2;   
  40.     -webkit-box-flex:2;    
  41. }   
  42. #box2 div,#box3 div{   
  43.     display:inline;   
  44. }   
  45. </style>   
  46.   

演示效果：

彈性空間的實(shí)現(xiàn)和分配

  在默認(rèn)情況下，子元素并不具有彈性，它會(huì)竟可能的寬，以便使其所包含的內(nèi)容可見，并且不會(huì)有任何溢出。如果要改變它的尺寸，則可以使用width和height屬性來(lái)實(shí)現(xiàn)，當(dāng)然也可以使用min-height，min-width，max-height,max-width等屬性來(lái)限制尺寸。

  當(dāng)box-flex屬性至少大于0時(shí)，它會(huì)變得富有彈性。當(dāng)子元素具有彈性時(shí)，可以通過下面的方式來(lái)改變它的尺寸：

1、使用width，height，min-height，min-width，max-height,max-width等屬性來(lái)定義尺寸。

2、使用盒子的尺寸來(lái)限制子元素的彈性尺寸。

3、借助盒子富余所有空間來(lái)限制元素的彈性尺寸。

  如果子元素沒有聲明大小，那么其尺寸將完全取決于盒子的大小，即子元素的大小等于盒子的大小乘以它的box-flex屬性值在所有子元素的box-flex屬性值總和中的百分比。使用公式表示如下：

子元素的尺寸=盒子的尺寸*子元素的box-flex屬性值/所有子元素的box-flex屬性值的和

如果一個(gè)或多個(gè)子元素聲明了具體的尺寸，那么其大小將計(jì)入其中，余下的彈性盒子將按照上面的原則分享剩余的可利用空間。

由于受內(nèi)部圖片大小的支撐，導(dǎo)致子元素的空間總是大于盒子的 富余空間，這時(shí)將出現(xiàn)解析異常。

box-flex屬性對(duì)子元素的布局影響

HTML代碼：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <body>  
  2. <h1><img src="images/web3_13.gif" /></h1>  
  3. <div id="box">  
  4.     <!--左側(cè)欄目-->  
  5.     <div id="box1"><img src="images/web3_01.gif" /></div>  
  6.     <!--中間欄目-->  
  7.     <div id="box2"></div>  
  8.     <!--右側(cè)欄目-->     
  9.     <div id="box3"></div>          
  10. </div>  
  11. </body>  
  12.   

中間和右側(cè)各占一半剩余的空間

CSS3代碼：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. #box2{   
  2.     box-flex: 2;   
  3.     -moz-box-flex: 2;   
  4.     -webkit-box-flex: 2;   
  5.     background:#CCF;   
  6. }   
  7. #box3{   
  8.     box-flex: 2;   
  9.     -moz-box-flex: 2;   
  10.     -webkit-box-flex: 2;   
  11.     background:#FC0;   
  12. }   
  13.   

演示效果：

中欄占1/5的空余空間，右欄占4/5空余的空間

CSS3代碼：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. #box2{   
  2.     box-flex: 0.5;   
  3.     -moz-box-flex: 0.5;   
  4.     -webkit-box-flex: 0.5;   
  5.     background:#CCF;   
  6. }   
  7. #box3{   
  8.     box-flex: 2;   
  9.     -moz-box-flex: 2;   
  10.     -webkit-box-flex: 2;   
  11.     background:#FC0;   
  12. }   
  13.   

演示效果：

中間彈性顯示，占據(jù)所有空余空間，右欄固定大

CSS3代碼：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. #box2{   
  2.     box-flex: 0.5;   
  3.     -moz-box-flex: 0.5;   
  4.     -webkit-box-flex: 0.5;   
  5.     background:#CCF;   
  6. }   
  7. #box3{   
  8.     width:196px;   
  9.     background:url(images/web3_03.gif) no-repeat;   
  10. }   
  11.   

演示效果：

中欄失去彈性（當(dāng)設(shè)置為0或者復(fù)制時(shí)），收縮顯示為一條線，右欄自動(dòng)左移

CSS代碼：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. #box2{   
  2.     box-flex: 0;   
  3.     -moz-box-flex: 0;   
  4.     -webkit-box-flex: 0;   
  5.     background:#CCF;   
  6. }   
  7. #box3{   
  8.     width:196px;   
  9.     background:url(images/web3_03.gif) no-repeat;   
  10. }   
  11.   

演示效果：

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家學(xué)習(xí)CSS3彈性盒模型有所幫助。

相關(guān)文章

最新評(píng)論