css3弹性盒模型
作者：dishuipiaoxiang 来源：Denis'Blog 时间：2010-05-10 20:47:00
Css3引入了新的盒模型——弹性盒模型，该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间。这与XUL（火狐使用的用户交互语言）相似，其它语言也使用相同的盒模型，如XAML 、GladeXML。
使用该模型，可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局。本文的例子使用以下的HTML代码：
<body>
<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>
</body>
传统的盒模型基于HTML流在垂直方向上排列盒子。使用弹性盒模型可以规定特定的顺序，也可以反转之。要开启弹性盒模型，只需设置拥有子盒子的盒子的display的属性值为box（或inline-box）即可。
display: box;
水平或垂直分布
“box-orient”定义分布的坐标轴：vertical和horizional。这两个值定义盒子如何显示
body{
display: box;
box-orient: horizontal;
}
反向分布
“box-direction”可以设置盒子出现的顺序。默认情况下，只需定义分布坐标轴——box随html流分布。如果为水平坐标轴，则从左到右分布；垂直坐标轴则从上到下分布。定义“box-direction”的属性值为“reverse”，则反转盒子的排列顺序。
body {
display: box;
box-orient: vertical;
box-direction: reverse;
}
具体分布
属性“box-ordinal-group”定义盒子分布的顺序。可以随意的控制其分布顺序。这些组以一个从“1”开始的数字定义，盒模型将首先分布这些组，所有这些盒子将在每个组中。分布将从小到大排列。
body {
display: box;
box-orient: vertical;
box-direction : reverse;
}
#box1 {
box-ordinal-group: 2;
}
#box2 {
box-ordinal-group: 2;
}
#box3 {
box-ordinal-group: 1;
}
标签：CSS3,弹性盒,模型,html
0
投稿猜你喜欢
SQL中JOIN和UNION区别、用法及示例介绍
2012-08-21 10:47:22
Mysql中日期和时间函数介绍
2008-05-24 08:16:00
js检查全角字符正则表达式[\\uFE30-\\uFFA0]
2008-10-30 12:39:00
ASP六大对象介绍
2007-09-08 12:28:00
超轻量级MSXML多功能测试程序
2009-05-19 12:38:00
归纳万恶IE6的HACK方法
2010-02-04 17:17:00
数据库的选择原则是什么？
2010-07-14 21:05:00
W3C网页内容无障碍指南2.0(WCAG)
2008-11-20 13:40:00
关于CSS学习——写给初学者
2008-07-25 19:17:00
关于获取HTML元素的CSS属性值函数
2008-09-01 13:20:00
SQL Server开发过程中的的常见问题总结
2009-01-06 11:16:00
三种SQL分页查询的存储过程代码
2012-01-05 19:31:32
js金额浮点格式化控件
2008-08-01 16:52:00
终结IE6下背景图片闪烁问题
2009-03-04 10:11:00
asp多关键词查询方案
2008-05-09 12:24:00
SQL Server数据库查询优化3种技巧
2008-10-17 10:10:00
怎样从旧版本SQL Server中重新存储数据
2009-01-15 13:23:00
解决在Dreamweaver中不支持中文文件名的方法
2010-09-02 12:35:00
Oracle 外连接实现代码
2009-08-08 23:08:00
CSS3创建惊艳多重边框色
2010-07-23 10:13:00