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

            -webkit-box-flex:;

            box-flex:;

        }

        .sectionTwo{

            background:purple;

            -moz-box-flex:;

            -webkit-box-flex:;

            box-flex:;

        }

        .sectionThree{

            -moz-box-flex:;

            -webkit-box-flex:;

            box-flex:;

            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>

CSS3盒模型display:box简述的更多相关文章

  1. CSS3盒模型display:box详解

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

  2. CSS3盒模型display:box;box-flex:3;

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  3. [转]CSS3盒模型display:box详解

    时间:2014-02-25来源:网络作者:未知编辑:RGB display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布 ...

  4. CSS3.0盒模型display:box;的使用

    CSS3.0盒模型display:-webkit-box;的使用 box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂 ...

  5. CSS3弹性盒模型 display:box

    刚开始做网页时就有一个困惑,为什么display:block只能垂直排列,如果要水平排列就要使用float:left等方式.这种方法最难受的当然是当子元素的数量改变时,需要去修改子元素的宽度使重新适应 ...

  6. CSS3盒模型display初探（display:box/display:flex）

    可以实现水平等分切割等.日后在研究,做个记录. 首先要声明:display:box,像谷歌浏览器要加前缀识别码:display:-webkit-box; 然后才开始使用其属性,同时也是要带上前缀识别码 ...

  7. CSS3盒模型display:-webkit-box;的使用

    box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 目前box-flex属性还没有得到 ...

  8. 移动web开发实践-css3（1）盒模型display:-webkit-box;的使用

    提到移动布局不得不提到盒模型display:-webkit-box;这个属性,在移动布局中浮动已经不在重要,相反自适应成为主要的需求,所以display:-webkit-box;变得尤为重要. box ...

  9. CSS3盒模型温故

    CSS有一种基础设计模式叫盒模型,定义了Web页面中的元素是如何看做盒子来解析的.每一个盒子有不同的展示界面,下面就来介绍盒模型,主要有一下几种盒模型:inline.inline-block.bloc ...

随机推荐

  1. Linux用户、群组及权限

    由于对文件的操作需要切换到相应文件夹下进行,所以对文件内容的修改,最基本的是需要其文件夹执行的权限. 文件夹的读权限(read)可以独立行使,但是对文件夹内容的写权限(对其内文件的新建.删除.重命名) ...

  2. 使用githubs托管代码

    此文章已经发表于本人博客. 最近在学习nodejs,使用它自己都蛮觉得有激情哦,相信自己路学下去.在学习的过程中nodejs很多插件都在github上,于是自己也用了这个东东感觉不错,开始的时候还用命 ...

  3. MySQL Binlog解析（2）

    一.TABLE_MAP_EVENT Used for row-based binary logging beginning with MySQL 5.1.5.The TABLE_MAP_EVENT d ...

  4. 20145201 《Java程序设计》第五周学习总结

    20145201 <Java程序设计>第五周学习总结 教材学习内容总结 本周学习了课本第八.九章内容,即异常处理.Collection与Map. 第八章 异常处理 8.1 语法与集成架构 ...

  5. 关于Block汇总

    //使用总结: //1.当block里面会有b类相关的参数要回调回去的时候,属性用copy修饰,将其拷贝到堆里面,这样即便栈释放掉了,b类的指针也在堆中存在,能够成功的回调回去. //Block默认存 ...

  6. Maven配置与创建

    1.下载Maven工具 从maven官网下载:https://maven.apache.org/download.cgi apache-maven-x.x.x-bin.zip ,解压到指定目录,例如D ...

  7. 使用Idea 配置maven

    使用Idea 配置maven 使用idea 配置maven有4步: (1)下载Idea,maven (2)安装idea, (3)设置maven的环境变量, (4)具体的配置过程 当前环境: 操作系统: ...

  8. BZOJ 3698 XWW的难题：有上下界的最大流

    传送门 题意 给你一个 $ n*n $ 的正实数矩阵 $ A $ ,满足XWW性. 称一个 $ n*n $ 的矩阵满足XWW性当且仅当: $ A[n][n] = 0 $ 矩阵中每行的最后一个元素等于该 ...

  9. cssrem 比例适配理解

    cssrem只是帮你自动计算,省去了你在切图时,从设计稿拿到的px再根据比例转换成rem的中间过程. 这个40我无法猜测, 以前设计稿给的都是按640px(iphone5s的宽)来的,我们就按照这个比 ...

  10. python 实现简单点名程序

    程序会遍历文件所有姓名,遍历完之前不会有重复值,遍历所有后将提示推出. #-*-coding:utf-8-*-#author:wangxing #点名程序 import randomimport os ...