首頁  >  文章  >  web前端  >  關於發展CSS3彈性盒模型的方法之二

關於發展CSS3彈性盒模型的方法之二

不言
不言原創
2018-06-20 14:09:131938瀏覽

這篇文章主要為大家分享了CSS3彈性盒模型開發筆記,想要學好CSS3彈性盒模型的朋友不要錯過這篇文章,可以參考一下

本文為大家繼續分享CSS3彈性盒模型開發筆記第二篇,之前一篇以及為大家引入了CSS3彈性盒模型的相關介紹,點擊查看:CSS3彈性盒模型開發筆記(一)

##box-flex屬性

box-flex屬性能夠靈活地控制子元素在盒子中的顯示空間。請注意,顯示空間包含子元素的寬度和高度,而不只是子元素所在欄目的寬度,也可以說是子元素在盒子中所佔的面積。此屬性在彈性佈局中非常重要,它解決了傳統設計中習慣使用百分比定義彈性佈局的弊端。 box-flex屬性的基本語法:

box-flex:d80b5def5ed1be6e26d91c2709f14170##取值說明:

d80b5def5ed1be6e26d91c2709f14170屬性值是一個整數或小數。當盒子中包含多個定義了box-flex屬性的子元素時,瀏覽器會將這些子元素的box-flex屬性值相加,然後根據他們各自的值佔總值的比例來分配盒子剩餘的空間。注意,box-flex屬性只有在盒子擁有的確定的空間大小之後才能正確解析。在設計中,較穩健的做法是為了盒子定義特定的width或height屬性值。

實戰體驗:自適應欄位寬度設計

在傳統的網頁設計中,如果要把一個欄位分成三欄,比較簡單的做法是把三個子元素的寬度都設定為33.3%。這種做法無法把父元素的寬度完全填充,當父元素的寬度夠大的時候,使用者會看到未填充的空白區域。但是,如果為子元素設定了固定寬度值,彈性佈局會變得更為複雜。如果使用box-flex屬性,這個問題就會迎刃而解。

html程式碼:

<body>
<h1><img src="images/web3_13.gif" /></h1>
<p id="box">
    <!--左侧栏目-->
    <p id="box1"><img src="images/web3_01.gif" /></p>
    <!--中间栏目-->
    <p id="box2">
        <h2><img src="images/web3_02.gif" /></h2>
        <p><img src="images/web3_04.gif" /></p>
        <p><img src="images/web3_05.gif" /></p>
        <p><img src="images/web3_06.gif" /></p>
        <p><img src="images/web3_07.gif" /></p>
    </p>
    <!--右侧栏目-->
    <p id="box3">
        <h2><img src="images/web3_12.gif" /></h2>
        <p><img src="images/web3_08.gif" /></p>
        <p><img src="images/web3_09.gif" /></p>
        <p><img src="images/web3_10.gif" /></p>
        <p><img src="images/web3_11.gif" /></p>
    </p>
</p>
</body>

CSS3程式碼:

/*这是一个三栏布局的页面,其中左侧栏目的宽度是固定的,而中间和右侧栏目的宽度是弹性的*/
<style>   
body{   
    margin:0;   
    padding:0;   
    text-align:center;   
}   
h1,h2{margin:2px;}   
#box{   
    margin:auto;   
    text-align:left;   
    width:1002px;   
    overflow:hidden;   
}   
/*定义box元素盒形显示,并设置子元素水平布置*/
#box{   
    display:box;   
    display:-moz-box;   
    display:-webkit-box;   
    box-orient:horizontal;   
    -moz-box-orient:horizontal;   
    -webkit-box-orient:horizontal;     
}   
/*定义盒子左侧栏目的宽度为固定显示*/
#box1{width:201px;}   
#box2,#box3{   
    border:1px solid #CCC;   
    margin:2px;    
}   
/*定义盒子内中间栏目的宽度为盒子剩余空间的2/3*/
#box2{   
    box-flex: 4;   
    -moz-box-flex: 4;   
    -webkit-box-flex: 4;   
}   
/*定义盒子内中间栏目的宽度为盒子剩余空间的1/3*/
#box3{   
    box-flex:2;   
    -moz-box-flex:2;   
    -webkit-box-flex:2;    
}   
#box2 p,#box3 p{   
    display:inline;   
}   
</style>

示範效果:


彈性空間的實作與分配

  在預設情況下,子元素並不具有彈性,它會竟可能的寬,以便使其所包含的內容可見,且不會有任何溢出。如果要改變它的尺寸,則可以使用width和height屬性來實現,當然也可以使用min-height,min-width,max-height,max-width等屬性來限制尺寸。

  當box-flex屬性至少大於0時,它會變得富有彈性。當子元素具有彈性時,可以透過下面的方式來改變它的尺寸:

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

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

3、利用盒子富餘所有空間來限制元素的彈性尺寸。

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

子元素的尺寸=盒子的尺寸*子元素的box-flex屬性值/所有子元素的box-flex屬性值的和如果一個或多個子元素聲明了具體的尺寸,那麼其大小將計入其中,餘下的彈性盒子將按照上面的原則分享剩餘的可利用空間。

由於受內部圖片大小的支撐,導致子元素的空間總是大於盒子的 富餘空間,這時將出現解析異常。

box-flex屬性對子元素的佈局影響

HTML程式碼:

<body>
<h1><img src="images/web3_13.gif" /></h1>
<p id="box">
    <!--左侧栏目-->
    <p id="box1"><img src="images/web3_01.gif" /></p>
    <!--中间栏目-->
    <p id="box2"></p>
    <!--右侧栏目-->
    <p id="box3"></p>
</p>
</body>

中間和右側各佔一半剩餘的空間


CSS3程式碼:

#box2{   
    box-flex: 2;   
    -moz-box-flex: 2;   
    -webkit-box-flex: 2;   
    background:#CCF;   
}   
#box3{   
    box-flex: 2;   
    -moz-box-flex: 2;   
    -webkit-box-flex: 2;   
    background:#FC0;   
}

示範效果:


##中欄佔1/5的空餘空間,右邊欄位佔4/5空餘的空間

CSS3程式碼:

#box2{   
    box-flex: 0.5;   
    -moz-box-flex: 0.5;   
    -webkit-box-flex: 0.5;   
    background:#CCF;   
}   
#box3{   
    box-flex: 2;   
    -moz-box-flex: 2;   
    -webkit-box-flex: 2;   
    background:#FC0;   
}

示範效果:



##中間彈性顯示,佔據所有空空間,右邊欄位固定大

#CSS3程式碼:


#box2{   
    box-flex: 0.5;   
    -moz-box-flex: 0.5;   
    -webkit-box-flex: 0.5;   
    background:#CCF;   
}   
#box3{   
    width:196px;   
    background:url(images/web3_03.gif) no-repeat;   
}

示範效果:

############中欄失去彈性(設定為0或複製),縮略顯示為一條線,右欄自動左移######CSS程式碼:#########
#box2{   
    box-flex: 0;   
    -moz-box-flex: 0;   
    -webkit-box-flex: 0;   
    background:#CCF;   
}   
#box3{   
    width:196px;   
    background:url(images/web3_03.gif) no-repeat;   
}
###示範效果:################

以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網!

相關推薦:

關於開發CSS3彈性盒模型的方法之一

以上是關於發展CSS3彈性盒模型的方法之二的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn