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. delphi连接sql server的字符串2011-10-11 16:07

    delphi连接sql server的字符串2011-10-11 16:07 一.delphi连接sql server 放一个连接组件 ADOConnection, 其它组件TADODataSet,T ...

  2. CNN学习笔记：卷积运算

    CNN学习笔记:卷积运算 边缘检测 卷积 卷积是一种有效提取图片特征的方法.一般用一个正方形卷积核,遍历图片上的每一个像素点.图片与卷积核重合区域内相对应的每一个像素值乘卷积核 .内相对应点的权重,然 ...

  3. zoj2432

    /* 首先,dp的最开始是定义状态 dp[i][j] 表示A串的前i个,与B串的前j个,并以B[j]为结尾的LCIS 的长度. 状态转移方程: if(A[i]==B[j]) dp[i][j]=max( ...

  4. CSS 初级攻略

    内容来自html dog. css的格式为 ‘property: value’ 给html插入css样式的方式有三种:内联.内部css.外部css文件,如下所示: <p style=" ...

  5. [BZOJ1116]CLO[并查集]

    看了样例突然发现= =无向边不会增加入度. 然后发现是环套环. 一个环所有点入度都为2. 最后的图无视所有无向边的话大概是这样的(将就一下 然后就可以并查集维护一下联通性... 当x , y属于一个联 ...

  6. Makefile文件应用——complicated项目

    学习资料 本文主要参考资料:驾驭Makefile(李云).pdf Complicated项目 需求: (1)object文件放到objs目录下 (2)可执行文件放到exes目录下 (3)增加头文件依赖 ...

  7. 从reduce函数说起...

    reduce函数:  方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值, 最终返回的要看函数内部return的内容. 1. 累加器: var ar ...

  8. 摘录：Jetty 的工作原理以及与 Tomcat 的比较

    引子:Jetty 应该是目前最活跃也是很有前景的一个 Servlet 引擎.本文将介绍 Jetty 基本架构与基本的工作原理:您将了解到 Jetty 的基本体系结构:Jetty 的启动过程:Jetty ...

  9. JNIjw04

    1.VC6(CPP)的DLL代码: #include<stdio.h> #include "jniZ_JNIjw04.h" #include <string> ...

  10. 在线演示demo

    *{display:none} 仿微博添加和删除动画 body{} input,button,select,textarea{outline:none;} .sdiv{width:400px;} .b ...