零基础建站培训介绍

当前位置:

CSS3盒模型布局display:box详解

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

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

目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持,但可以使用它们的私有属性定义firefox(-moz-)、opera(-o-)、chrome/safari(-webkit-)。

写法:


 display:-moz-box;
    display:-webkit-box;
    display:box;

8

HTML代码:


<article>
    <section>01</section>
    <section>02</section>
    <section>03</section>
</article>

CSS代码:


.wrap{
    width:600px;
    height:200px;
    <span style="color: #ff0000;">display:-moz-box;
    display:-webkit-box;
    display:box;</span>
}
.sectionOne{
    background:orange;
    -moz-box-flex:3;
    -webkit-box-flex:3;
    box-flex:3;
}
.sectionTwo{
    background:purple;
    -moz-box-flex:1;
    -webkit-box-flex:1;
    box-flex:1;
}
.sectionThree{
    width:200px;//设置固定宽度
    background:green;
}

说明:

必须给父容器定义css属性display:box其子容器才可以进行划分

sectionThree设置了固定宽度为200px,父容器的宽度600px减去改子容器的200px还剩下400px,这400px宽度值则按box-flex设置的值进行划分,sectionOne占居3/4即300px,sectionTwo占居1/4即100px。

上一课: 下一课:

发表评论

电子邮件地址不会被公开。 必填项已用*标注