零基础建站培训介绍

当前位置:

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。

上一课: 下一课:

发表评论

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

相关教程

  • CSS3 text-shadow 属性是CSS3中设置文字阴影的属性,通过这个属性可以设置文字的各个角度的阴影效果。下面介绍一下CSS3 text-shadow 属性的使用方法。
  • 什么是css3-gird布局格式 (140802 次浏览)
    CSS3-Gird布局格式css3-gird布局格式应用很广泛,最简单的例子就是内容的分栏显示。对于布局复杂的三栏网页来说,如果使用CSS3Grid布局的话,我们
  • CSS3新增选择器有哪些 图文教程 (142146 次浏览)
    css1-css3提供特别丰富的选择器,但是由于某些选择器被各个浏览器支持的情况不一样,所以很多选择器在实际css开发中很少用到。(相关教程:CSS3视频教
  • 在CSS3中使用display来定义盒的类型,一般分为block类型和inline类型。像p,div属于block类型,span,a属于inline类型。1、使用inline-block类型来
  • display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高
  •  column-count属性:column-count将 div 元素中的文本分为几列显示,常用于文章进行分列阅读。缺点是几列的宽度是一样的[cce_html]div{-m