CSS3新增屬性
「display:box;」和「box-flex:數值」是css3新加入的盒子模型屬性，它的出現可以解決我們透過N多結構、 css實作的佈局方式。
經典的一個佈局應用是佈局的垂直等高、水平均分數、按比例劃分。box-flex屬性：主要讓子容器針對父容器的寬度依一定規則進行劃分。
Html結構：啥都不說了，自己貼程式碼看效果。
應用程式：水平佈局
<body> <p>魔</p> <p>术</p> <p>师</p> </body>登入後複製
body {
/*默认水平布局*/
display: -webkit-box;
display: -moz-box;
display: box;
width: 500px;
height: 300px;
margin: 100px auto;
}
p:nth-child(1) {
-webkit-box-flex: 3;
-moz-box-flex: 3;
box-flex: 3;
background: orange;
}
p:nth-child(2) {
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
background: purple;
}
p:nth-child(3) {
/*-webkit-box-flex: 2;
-moz-box-flex: 2;
box-flex: 2;*/
width: 200px;/*可以写定值*/
background: green;
}應用程式：垂直佈局
body {
display: -webkit-box;
display: -moz-box;
display: box;
/*垂直布局*/
-webkit-box-orient:vertical;
-moz-box-orient:vertical;
box-orient:vertical;
width: 300px;
height: 500px;
margin: 50px auto;
}
p:nth-child(1) {
-webkit-box-flex: 3;
-moz-box-flex: 3;
box-flex: 3;
background: orange;
}
p:nth-child(2) {
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
background: purple;
}
p:nth-child(3) {
/*-webkit-box-flex: 2;
-moz-box-flex: 2;
box-flex: 2;*/
height: 200px;/*可以写定值*/
background: green;
}以上是CSS3盒子模型display：box的應用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
