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中文網其他相關文章!