CSS3实例教程:自适应的弹性布局


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;
}



相关阅读:
恶意批处理.bat
phpsocket技术研究
C# CUR类实现代码
读取apache的共享内存
js 正则使用方法
CSS background-position的使用说明详解
CSS网页布局实例 常见的12种网页布局
JavaScript 组件之旅(四):测试 JavaScript 组件
Oracle RAC之名词解惑
Oracle TimesTen和RAC助KTF提高客服水平
javascript 响应键盘特定按键(只响应数字键)
IE和Firefox的兼容性问题
快速掌握“外连接”的两种标准写法
活动目录在Windows Server 2008 中的改进:只读域控制器(RODC)
快速导航

Copyright © 2016 phpStudy | 皖ICP备18014864号-4