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. python全栈开发从入门到放弃之列表的内置方法

    1.列表切片 l=['a','b','c','d','e','f'] print(l[1:5]) # 根据索引号来切片,但顾头不顾尾 ['b', 'c', 'd', 'e'] print(l[1:5: ...

  2. DP专题·四(树形dp)

    1.poj 115 TELE 题意:一个树型网络上有n个结点,1~n-m为信号传送器,n-m+1~n为观众,当信号传送给观众后,观众会付费观看,每铺设一条道路需要一定费用.现在求以1为根,使得收到观众 ...

  3. HDU - 3829 Cat VS Dog (二分图最大独立集)

    题意:P个小朋友,每个人有喜欢的动物和讨厌的动物.留下喜欢的动物并且拿掉讨厌的动物,这个小朋友就会开心.问最多有几个小朋友能开心. 分析:对于每个动物来说,可能既有人喜欢又有人讨厌,那么这样的动物实际 ...

  4. nodejs入门-做一个代理服务器

    看到node.js的httpServer和http.request,第一个想法居然是可以用它做一个代理服务器下面代码,实现了代理的基本功能,通过网络的代理设置将你的浏览器的请求转到这个httpServ ...

  5. java发送http请求和多线程

    0 概述 在写app后台的时候,需要调用另一个服务器上的算法服务,所以需要发送http请求来获取结果. 考虑到一个功能(比如智能中医)需要调用好几个接口(人脸识别,舌苔识别,饮食推荐),大部分时间花在 ...

  6. redis 笔记05 Sentinel、集群

    Sentinel 1. Sentinel只是一个运行在特殊模式下的Redis服务器,它使用了和普通模式不同的命令表,所以Sentinel模式能够使用的命令和普通的Redis服务器能够使用的命令不同. ...

  7. mybatis入门学习记录（一）

    过硬的技术本领,可以给我们保驾护航,飞得更高.今天开始呢.我们就一起来探讨使用mybatis的好处. 首先我们一起来先看看原生的JDBC对于数据库的操作,然后总结其中的利弊,为学习mybatis奠定基 ...

  8. try-catch-finally的问题

    参考: https://blog.csdn.net/chengzhezhijian/article/details/17264531 面试一家公司的面试题,注: 那个面试官对这个问题挺看重的(可是我回 ...

  9. 【Head First Servlets and JSP】笔记

    1.谈到服务器的时候,可能是指物理主机(硬件),也可能是指Web服务应用(软件). 2.谈到客户的时候,通常指人类用户,或者是浏览器应用,或者两者都包括,浏览器应用做些什么?发送请求.解释HTML和呈 ...

  10. NET中IL指令详解

    名称 说明 Add 将两个值相加并将结果推送到计算堆栈上. Add.Ovf 将两个整数相加,执行溢出检查,并且将结果推送到计算堆栈上. Add.Ovf.Un 将两个无符号整数值相加,执行溢出检查,并且 ...