亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

box-flex:<number>

取值說明：

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

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

在傳統(tǒng)的網(wǎng)頁設(shè)計(jì)中，如果要把一個(gè)欄目分成三欄，比較簡(jiǎn)單的做法是把三個(gè)子元素的寬度都設(shè)置為33.3%。這種做法無法把父元素的寬度完全填充，當(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è)三欄布局的頁面，其中左側(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屬性來實(shí)現(xiàn)，當(dāng)然也可以使用min-height，min-width，max-height,max-width等屬性來限制尺寸。

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

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

2、使用盒子的尺寸來限制子元素的彈性尺寸。

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

  如果子元素沒有聲明大小，那么其尺寸將完全取決于盒子的大小，即子元素的大小等于盒子的大小乘以它的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)文章

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

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

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

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

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

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

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

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

  • CSS教程:通過實(shí)例學(xué)習(xí)和理解CSS盒模型

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

  • CSS教程之CSS盒模型

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

  • 網(wǎng)頁設(shè)計(jì)學(xué)習(xí)教程 CSS盒模型

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

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

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

  • css3彈性盒模型實(shí)例介紹

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

  • css3彈性盒模型（Flexbox）詳細(xì)介紹

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

最新評(píng)論