当前位置:Gxlcms > css > CSS3盒模型display:box的应用详解

CSS3盒模型display:box的应用详解

时间:2021-07-01 10:21:17 帮助过:19人阅读


【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的应用详解的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行