【CSS3盒模型display:box的應用】
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;}