今天有个同学在面试的时候碰到了使用css2和css3实现一种页面布局，要求页面效果如下：
在实现这种页面布局时，他使用了display：box-flex，下面是相应的代码：
css2 方式
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
html{height: 100%;}
body{margin: 0;padding: 0;height: 100%;padding-left: 200px;padding-top: 40px;}
.header{height: 40px;width:100%;background: #f40;position: absolute;top:0;left:0;}
.left{width: 200px;position: absolute;top:40px;left: 0;background: green;height: 100%;}
.right{height: 100%;background: red; }
</style>
</head>
<body>
<div class="header"></div>
<div class="left"></div>
<div class="right"></div>
</body>
</html>
当然请看这一行代码css3 方式：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
html{height: 100%;}
body{margin: 0;padding: 0;height: 100%;}
.header{height: 40px;background: red;}
.content{height: 100%;display:-webkit-box;}
.left{width: 200px;-webkit-box-flex:0;background: green;}
.right{-webkit-box-flex:1;background: orange;}
</style>
</head>
<body>
<div class="header"></div>
<div class="content">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
首先，我们必须理解box-flex是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。
最经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。
目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(-
moz)、opera(-0)、chrome/safari（-webkit)。
即：-webkit-box-flex
一、box-flex属性
box-flex主要让子容器针对父容器的宽度按一定规则进行划分
HTML代码：
01
02
03
CSS代码：
.wrap{
width:600px;
height:200px;
display:-moz-box;
display:-webkit-box;
display:box;
}
.sectionOne{
background:orange;
-moz-box-flex:3;
-webkit-box-flex:3;
box-flex:3;
}
.sectionTwo{
background:purple;
-moz-box-flex:2;
-webkit-box-flex:2;
box-flex:2;
}
.sectionThree{
-moz-box-flex:1;
-webkit-box-flex:1;
box-flex:1;
background:green;
}
展示效果：
说明：
必须给父容器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。
以上是按比例数进行划分分配的，如果其中一个子容器或多个子容器设置了固定宽度又会怎样划分那？
如果其中一个子容器或多个子容器设置了固定宽度，其它子容器没有设置，其计算方式是这样的：子容器如果设置了固定
宽度值，该子容器则直接应用设置的宽度值，其它没有设置的则再父容器的宽度基础上减去子容器设置的固定宽度，在剩
下的宽度基础上按一定比例进行划分分配。请看下面代码
HTML代码
01
02
03
CSS代码
.wrap{
width:600px;
height:200px;
display:-moz-box;
display:-webkit-box;
display:box;
}
.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;
}
展示效果
说明：
sectionThree设置了固定宽度为200px，父容器的宽度600px减去改子容器的200px还剩下400px，这400px宽度值则按box-
flex设置的值进行划分，sectionOne占居3/4即300px,sectionTwo占居1/4即100px。
在以上代码的基础上给sectionTwo子容器添加margin:0px 50px使子容器之间产生一定的间隔其宽度又如何进行分配划分
的那？接着看
CSS代码
.wrap{
width:600px;
height:200px;
display:-moz-box;
display:-webkit-box;
display:box;
}
.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;
margin:0px 50px;//添加margin属性
}
.sectionThree{
width:200px;
background:green;
}
展示效果
说明：
父容器的宽度600px减去设置了子容器的200px基础上再减去100px(2×50)剩下300px，这300px宽度值则按box-flex设置的
值进行划分，sectionOne占居3/4即225px,sectionTwo占居1/4即75px。
二、box属性
具体属性如下代码所示：
box-orient | box-direction | box-align | box-pack | box-lines
1、box-orient
box-orient(orient译为排列更准确)用来确定父容器里子容器的排列方式，是水平还是垂直。可选属性如下所示：
horizontal | vertical | inline-axis | block-axis | inherit
horizontal、inline-axis说明：
给box设置horizontal或inline-axis属性其效果似乎表现一致，都可将子容器水平排列，具体两者有什么实质差别暂时还没有搞清楚。
如果父容器选择horizontal或inline-axis属性对子容器进行水平排列，其是对父容器的宽度进行分配划分。此时如果父
容器定义了高度值，其子容器的高度值设置则无效状态，所有子容器的高度等于父容器的高度值；如果父容器不设置高度
值，其子容器的高度值才有效并且取最大高度值的子容器的高度。
HTML代码：
01
02
03
CSS代码：
.wrap{
width:600px;
height:200px;
display:-moz-box;
display:-webkit-box;
display:box;
-moz-box-orient:horizontal;
-webkit-box-orient:horizontal;
box-orient:horizontal;//水平排列
}
.sectionOne{
background:orange;
-moz-box-flex:1;
-webkit-box-flex:1;
box-flex:1;
}
.sectionTwo{
background:purple;
-moz-box-flex:2;
-webkit-box-flex:2;
box-flex:2;
}
.sectionThree{
width:100px;
background:green;
}
展示效果：
vertical、block-axis说明：
给box设置vertical或block-axis属性(此属性是默认值)其效果似乎表现一致，都可将子容器垂直排列，具体两者有什么
实质差别暂时还没有搞清楚。
如果父容器选择vertical或block-axis属性对子容器进行垂直排列，其是对父容器的高度进行分配划分。此时如果父容器
定义了宽度值，其子容器的宽度值设置则无效状态；如果父容器不设置宽度值，其子容器的宽度值才有效并且取最大宽度
值的子容器的宽度。
HTML代码：
01
02
03
CSS代码：
.wrap{
width:600px;
height:200px;
display:-moz-box;
display:-webkit-box;
display:box;
-moz-box-orient:vertical;
-webkit-box-orient:vertical;
box-orient:vertical;//垂直排列
}
.sectionOne{
background:orange;
-moz-box-flex:1;
-webkit-box-flex:1;
box-flex:1;
}
.sectionTwo{
background:purple;
-moz-box-flex:2;
-webkit-box-flex:2;
box-flex:2;
}
.sectionThree{
height:100px;
background:green;
}
展示效果：
inherit说明：
inherit属性则是让子容器继承父容器的相关属性。
2、box-direction
box-direction用来确定父容器里的子容器排列顺序，具体属性如下代码所示：
normal | reverse | inherit
normal是默认值
按照HTML文档里结构的先后顺序依次展示。如下代码，如果box-direction设置为normal，则结构依次展示sectionOne、
sectionTwo、sectionThree
HTML代码：
01
02
03
CSS代码：
.wrap{
width:600px;
height:200px;
display:-moz-box;
display:-webkit-box;
display:box;
-moz-box-direction:normal;//设置mormal默认值
-webkit-box-direction:normal;//设置mormal默认值
box-direction:normal;//设置mormal默认值
}
.sectionOne{
background:orange;
-moz-box-flex:1;
-webkit-box-flex:1;
box-flex:1;
}
.sectionTwo{
background:purple;
-moz-box-flex:2;
-webkit-box-flex:2;
box-flex:2;
}
.sectionThree{
width:100px;
background:green;
}
展示效果：
reverse表示反转
如上面所示设置nomal其结构的排列顺序为sectionOne、sectionTwo、sectionThree；如果设置reverse反转，其结构的排
列顺序为sectionThree、sectionTwo、sectionOne
HTML代码：
01
02
03
CSS代码：
.wrap{
width:600px;
height:200px;
display:-moz-box;
display:-webkit-box;
display:box;
-moz-box-direction:reverse;//设置为反转
-webkit-box-direction:reverse;//设置为反转
box-direction:reverse;//设置为反转
}
.sectionOne{
background:orange;
-moz-box-flex:1;
-webkit-box-flex:1;
box-flex:1;
}
.sectionTwo{
background:purple;
-moz-box-flex:2;
-webkit-box-flex:2;
box-flex:2;
}
.sectionThree{
width:100px;
background:green;
}
展示效果：
3、box-align
box-align表示父容器里面子容器的垂直对齐方式，可选参数如下所示：
start | end | center | baseline | stretch
HTML代码：
01
02
03
CSS代码：
.wrap{
width:600px;
height:108px;
display:-moz-box;
display:-webkit-box;
display:box;
-moz-box-align:stretch;
-webkit-box-align:stretch;
-o-box-align:stretch;
box-align:stretch;
}
.wrap section{
height:80px;
}
.wrap .sectionOne{
background:orange;
-moz-box-flex:1;
-webkit-box-flex:1;
box-flex:1;
}
.wrap .sectionTwo{
background:purple;
-moz-box-flex:2;
-webkit-box-flex:2;
box-flex:2;
height:108px;
}
.wrap .sectionThree{
width:100px;
background:green;
}
start
在box-align表示居顶对齐，如下图所示
end
在box-align表示居底对齐，如下图所示
center
在box-align表示居中对齐，如下图所示
stretch
在box-align表示拉伸，拉伸到与父容器等高
3、box-pack
box-pack表示父容器里面子容器的水平对齐方式，可选参数如下所示：
start | end | center | justify
HTML代码：
01
02
03
CSS代码：
.wrap{
width:600px;
height:108px;
border:1px solid red;
display:-moz-box;
display:-webkit-box;
display:box;
-moz-box-pack:end;
-webkit-box-pack:end;
-o-box-pack:end;
box-pack:end;
}
.wrap section{
width:100px;
}
.wrap .sectionOne{
background:orange;
}
.wrap .sectionTwo{
background:purple;
}
.wrap .sectionThree{
background:green;
}
start
在box-pack表示水平居左对齐，如下图所示
end
在box-pack表示水平居右对齐，如下图所示
center
在box-pack表示水平居中对齐，如下图所示
justify
在box-pack表示水平等分父容器宽度（唯一遗憾的是，firefox与opera暂时不支持，只有safari、chrome支持）
原文网址我忘掉了，sorry！
- 全面理解Javascript中Function对象的属性和方法
http://www.cnblogs.com/liontone/p/3970420.html 函数是 JavaScript 中的基本数据类型,在函数这个对象上定义了一些属性和方法,下面我们逐一来介绍这 ...
- 详解 Flexible Box 中的 flex 属性
导读: 弹性盒子是 CSS3 的一种布局模式,一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有适当的行为的布局方式.其中 flex 属性用于指定弹性子元素如何分配空间. flex 属性的值 ...
- 伸缩容器-display：flex设置flex属性的理解
1.flex属性 1.1 flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto. flex-grow: 定义项目的放大比例,默认为0,即 ...
- 深入理解css中的margin属性
深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及 ...
- 深入理解css中position属性及z-index属性
深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...
- 深入理解JavaScript中的属性和特性
深入理解JavaScript中的属性和特性 JavaScript中属性和特性是完全不同的两个概念,这里我将根据自己所学,来深入理解JavaScript中的属性和特性. 主要内容如下: 理解JavaSc ...
- DOM中元素节点、属性节点、文本节点的理解
DOM中元素节点.属性节点.文本节点的理解 节点信息 每个节点都拥有包含着关于节点某些信息的属性.这些属性是:nodeName(节点名称) nodeValue(节点值) nodeType(节点类型) ...
- Flex中如何通过showAllDataTips属性使鼠标移动到图表时显示所有的数据Tips的例子
原文 http://blog.minidx.com/2008/11/10/1616.html 接下来的例子演示了Flex中如何通过showAllDataTips属性,使鼠标移动到图表时显示所有的数据T ...
- 【JVM虚拟机】(8)--深入理解Class中--方法、属性表集合
#[JVM虚拟机](8)--深入理解Class中--方法.属性表集合 之前有关class文件已经写了两篇博客: 1.[JVM虚拟机](5)---深入理解JVM-Class中常量池 2.[JVM虚拟机] ...
随机推荐
- css3 一个简单的静态立方体
<meta charset="utf8"> <style> .cube { position: absolute; left: 50%; top: 250p ...
- 2014-04-17-网易有道-研发类-笔试题&參考答案
一套卷子,共10道小题,3道编程大题 一.填空&选择 1.选择:给了一个递归求Fibonacci的代码,问算法复杂度 指数复杂度 2.选择:忘记了,应该不难 3.选择:给你52张除掉大小王的扑 ...
- TArray数组
TArray<int32> arr; arr.Init(,); ; index < arr.Num(); index++) { FString str = FString(" ...
- Django admin 注册多个app
class game(models.Model): content = models.TextField() def __str__(self): return 'To game %s' % self ...
- 67、Fragment实现Tab
<LinearLayout .......... <FrameLayout android:id="@+id/id_content" android:layout_wi ...
- python 之 多进程
阅读目录 1. Process 2. Lock 3. Semaphore 4. Event 5. Queue 6. Pipe 7. Pool 序. multiprocessingpython中的多线程 ...
- Hadoop 2.0 NameNode HA和Federation实践【转】
Hadoop 2.0 NameNode HA和Federation实践 Posted on 2012/12/10 一.背景 天云趋势在2012年下半年开始为某大型国有银行的历史交易数据备份及查询提供基 ...
- 【BZOJ3207】花神的嘲讽计划Ⅰ Hash+主席树
[BZOJ3207]花神的嘲讽计划Ⅰ Description 背景 花神是神,一大癖好就是嘲讽大J,举例如下: “哎你傻不傻的![hqz:大笨J]” “这道题又被J屎过了!!” “J这程序怎么跑这么快 ...
- shiro权限笔记
shiro框架运行流程 认证:系统提供的用于识别用户身份的功能,通常就是登录功能.----让系统知道你是谁??授权:系统提供的为用户分配访问系统某些功能的能力.----让系统知道你能做什么?? 官网: ...
- Class.forName()用法
主要功能 Class.forName(xxx.xx.xx)返回的是一个类. Class.forName(xxx.xx.xx)的作用是要求JVM查找并加载指定的类,也就是说JVM会执行该类的静态代码段. ...
