【CSS3盒模型display：box的应用】

来源：互联网发布：mac设置用户名编辑：程序博客网时间：2024/06/05 05:27

【CSS3盒模型display：box的应用】

CSS3新增属性

“display:box;”和“box-flex:数值”是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。

经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。

box-flex属性：主要让子容器针对父容器的宽度按一定规则进行划分。

啥都不说了，自己贴代码看效果。

Html结构：

<body>

</body>

应用：水平布局

body {

/*默认水平布局*/

display: -webkit-box;

display: -moz-box;

display: box;

width: 500px;

height: 300px;

margin: 100px auto;

}

div:nth-child(1) {

-webkit-box-flex: 3;

-moz-box-flex: 3;

box-flex: 3;

background: orange;

}

div:nth-child(2) {

-webkit-box-flex: 1;

-moz-box-flex: 1;

box-flex: 1;

background: purple;

}

div: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;

}