css3弹性盒模型
作者：dishuipiaoxiang 来源：Denis'Blog 发布时间：2010-05-10 20:47:00
标签：CSS3,弹性盒,模型,html
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;
}
0
投稿猜你喜欢
- 进行访问MySQL数据库的方法有很多种，下面将向大家介绍一些很简单实用的用的方法和示例与大家一起分享。方法一：使用MYSQL推出的MySQL
- 好了，看看我们的代码吧：upload.htm' 上传页面<html> <body>&nb
- 概要本文分步介绍了如何在运行 SQL Server 的计算机之间移动 Microsoft SQL Server 用户数据库和大多数常见的 S
这一段时间，我在进行“09帮助中心升级”项目，负责其中的白板和视觉设计，总算和Axure有了第一次的正式会晤。由于之前已经零散地学习过一些A- 第一步：创建转向控制页面创建网站默认的首页文件（通常为"index.asp"或"default.asp&quo
- 了兑现我对大家的承诺，我们现在立即就将“借助数据库和ASP程序”编写出来的，可以同时适用于IIS和P
- asp抓取网页。偶要实现实实更新天气预报。利用了XMLHTTP组件，抓取网页的指定部分。很多小偷查询都是使用这个方法来实现的。需要分件htm
- 通过XML使系统之间的数据交换变得更简单，因为它与编程语言无关，刚引入XML的概念时，是通过一个脚本或应用程序解析XML数据，将其转换为适合
- js表单验证只能是写限定的东西大收集 代码如下：ENTER键可以让光标移到下一个输入框<input onkeydown=&q
- 译者newstart写的简介：Ross Dawson所在的Future Exploration Network于2007年5月发布的web2
- CSS圆角的现实一直是大家所热衷的话题，我们进行CSS布局一直强调语义，强调文档的结构。圆角作为页面的外面表现，应该分离到CSS文件中，可以
- 也许光从字面上来说，版式设计中的“亲密性”似乎不太好理解，正常的情况下，我们都会把“亲密性”理解为人与人之间的关系的一种表现，事实上在版式设
- Linux Journal 发表了一篇优化 Oracle 数据库的文章，感觉十分的有用。简要介绍其摘要和大家共同分享 Linux 在企业级数
- XML和XSLT的转换使Web设计受益无穷。借助XML和 XSLT转换，你可以实现将动态用语(dynamic verbiage)和网站内容存
- 原来sql还有个stuff的函数，很强悍。 一个列的格式是单引号后面跟着4位的数字，比如'0003,'0120,'4
- 垃圾评论，垃圾留言，人见人憎，用了验证码，效果也好不到哪里去，还影响用户体验。有的网站甚至不惜牺牲用户体验，而构造强悍的惨不忍睹的超级验证码
- 在本节描述的示例代码，提供真实的例子来示范在 FileSystemObject 对象模式中可用的许多功能。该代码显示了如何一起使用对象模式的
- 总结了部分所学、所听、所看、所问的一些CSS写作经验，书写高效的CSS - 漫谈CSS的渲染效率，它们与渲染效率及所占用
- 先看看单条 SQL 语句的分页 SQL 吧。 方法1： 适用于 SQL Server 2000/2005 代码如下:SELECT TOP 页
- DEMO:var testobj = document.getElementById("test&q
