CSS3新增属性
“display:box;”和“box-flex:数值”是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。
经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。
box-flex属性：主要让子容器针对父容器的宽度按一定规则进行划分。
啥都不说了，自己贴代码看效果。
Html结构：
<body>
<p>魔</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</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中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
797
