CSS3盒模型display：box的应用详解
程序员文章站
2022-03-06 17:54:39
...
【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;
}
以上就是CSS3盒模型display：box的应用详解的详细内容，更多请关注其它相关文章！
下一篇： 瞬间懂了，浅析对JS中的盒模型认识与理解