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
投稿猜你喜欢
Flask使用SQLAlchemy实现持久化数据
2023-02-23 07:47:19
python中使用enumerate函数遍历元素实例
2021-05-08 04:56:41
Python实例详解递归算法
2023-05-17 02:25:06
python学生管理系统代码实现
2023-10-31 07:55:04
.NET5控制台程序使用EF连接MYSQL数据库的方法
2024-01-25 08:07:43
Python多线程编程（三）：threading.Thread类的重要函数和方法
2021-04-22 09:02:47
css有趣而诡异的数组
2009-02-04 16:06:00
在Asp程序中取得表单所有内容的方法
2010-04-24 16:07:00
Python中.py文件打包成exe可执行文件详解
2023-06-10 19:11:00
排序与检索
2008-05-18 13:09:00
Matplotlib绘制条形图的方法你知道吗
2022-12-05 15:23:59
MySQL 的模块不能安装的解决方法
2024-01-29 13:15:36
MySql 安装时的1045错误
2024-01-21 23:02:47
ASP（JScript）构建SQL语句“类”
2008-04-30 07:12:00
js实现的全国省市二级联动下拉选择菜单完整实例
2023-09-09 05:21:01
巧用mysql提示符prompt清晰管理数据库的方法
2024-01-24 14:05:07
如何在golang中使用shopspring/decimal来处理精度问题
2024-05-21 10:24:12
meta标签之详解
2008-01-13 18:48:00
网页设计详细教程之XML简便省力技巧五则
2008-05-23 14:37:00
python保存字典和读取字典的实例代码
2023-05-12 14:17:54