CSS3 display:box 用法
css3 給display屬性帶來了box這個值,這個新值給開發帶來了極大的方便。
其中的一個場景如下:
<div id='outer'>
<div id='a1'></div>
<div id='a2'></div>
<div id='a3'></div>
</div>
假如我們想要使得內部的123元素水平以不同的比例分割outer所佔的空間,以往的做法我們可能會讓123元素浮動或者設置display屬性爲inline-block,然後再給width屬性設置寬度百分比去分割outer。
使用display:box後可以這樣實現:
#outer{
width:600px;
height:100px;
display:-moz-box;
display:-webkit-box;
display:box;
}
#a1{
background:blue;
-moz-box-flex:1;
-webkit-box-flex:1;
box-flex:1;
}
#a2{
background:green;
-moz-box-flex:2;
-webkit-box-flex:2;
box-flex:2;
}
#a3{
background:yellow;
-moz-box-flex:3;
-webkit-box-flex:3;
box-flex:3;
}
效果如下:
子元素中box-flex屬性爲該元素的佔比,若想讓此屬性生效,父元素必須設置display:box。以a3爲例,a3設置了box-flex爲3,則他所佔的寬度爲600*(3/(1+2+3))爲300px。
如果其中一個子元素設置了固定寬度100px,則剩下的500px將會參與到比例劃分的規則中。
除此之外,還有幾個與display:box相關的屬性。
1.box-orient
horizontal | vertical | inline-axis | block-axis | inherit
用來確定子容器的排列方式(水平or垂直or。。。)
2.box-direction
normal | reverse | inherit
用來確定子容器的方向,如果設置爲reverse,則剛纔代碼的顯示效果爲a3->a2->a1。
3、box-align
start | end | center | baseline | stretch
box-align表示父容器裏面子容器的垂直對齊方式(頂部對齊or底部對齊or中線對齊。。。)
3、box-pack
start | end | center | justify
box-pack表示父容器裏面子容器的水平對齊方式
分別代表
左對齊,右對齊,居中對齊,水平均分。
文章作者:forevercjl
文章原文鏈接:http://blog.csdn.net/ForeverCjl/article/details/45673739
轉載請註明出處。