CSS3盒模型display:box简述

 display:box;box-flex是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。

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

必须给父容器wrap定义css属性display:box其子容器才可以进行划分(如果定了display:box则该容器则定义为了内联元素，使用margin:0px auto让其居中是无效的，要想使其居中只能通过它的父容器的text-align:center);分别给sectionOne、sectionTwo、sectionThree的box-flex设置了3、2、1，也就是说这三个子容器将父容器wrap的宽度600px分为6份，sectionOne占居父结构宽度的3/6即300px，sectionOne占居父结构宽度的2/6即200px，sectionThree占居父结构宽度的1/6即100px。

 

 

 

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8" /> 
    <style>
        .wrap{
            width:600px;
            height:200px;
            display:-moz-box;
            display:-webkit-box;
            display:box;
        }
        .sectionOne{
            background:orange;
            -moz-box-flex:3;
            -webkit-box-flex:3;
            box-flex:3;
        }
        .sectionTwo{
            background:purple;
            -moz-box-flex:2;
            -webkit-box-flex:2;
            box-flex:2;
        }
        .sectionThree{
            -moz-box-flex:1;
            -webkit-box-flex:1;
            box-flex:1;
            background:green;
        }
    </style>
</head>
<body>
<article class="wrap">
    <section class="sectionOne">01</section>
    <section class="sectionTwo">02</section>
    <section class="sectionThree">03</section>
</article>
</body>
</html>

 

posted @ 2017-05-04 09:42  快乐的咸鱼  阅读(294)  评论(0)  编辑  收藏  举报