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
投稿猜你喜欢
- 本文实例为大家分享了vue iview动态新增和删除的具体代码，供大家参考，具体内容如下<Form ref="capsule
- 在Python 2.7中,一个float的repr返回最接近十七位数的十进制数;这足以精确地识别每个可能的IEEE浮点值.浮点数的str类似
第一步、下载压缩包下载社区版的 MySQL，根据需求下载对应版本，其中有最小安装版本。具体各个版本的区别，可以上网查询，链接MySQL ::- 1. 概述在Numpy 1.24版本中，删除了像np.float、np.int 这样的 Python 内置类型的 alias，因此以后在代码
- 本文实例讲述了Python3.5装饰器原理及应用。分享给大家供大家参考，具体如下：1、装饰器：（1）本质：装饰器的本质是函数，其基本语法都是
- 前言之前说了怎么写机器码到内存，然后调用。现在说说怎么优化。用Python发送微信消息给好友第二次优化再看一遍c语言的代码void Send
- 一、前言分布式环境下数据库的读写分离策略是解决数据库读写性能瓶颈的一个关键解决方案，更是最大限度了提高了应用中读取 （Read）
- 在本节中，您将开始修改为电影控制器所新加的操作方法和视图。然后，您将添加一个自定义的搜索页。在浏览器地址栏里追加/Movies， 浏览到Mo
- 本文实例为大家分享了Python3定时发送邮件功能的具体代码，供大家参考，具体内容如下1、 导入模块import osimport date
- 有时候会遇到和上面类似的表单字段。我们可以给每个字段限制输入长度，当达到输入长度时自动切换焦点，以增强表单的易用性 <form id=
- Asyncore模块提供了以异步的方式写入套接字服务客户端和服务器的基础结构。只有两种方式使一个程序在单处理器上实现“同时做不止一件事”。多
- 目录1. 安装方法2. 简单示例3. 兼容字典的所有操作4. 设置返回默认值5. 工厂函数自动创建key6. 序列化的支持字典是 Pytho
- 最近关于HTML5吵得火热，很多人认为HTML5出现会秒杀Flash，以至于在各大web前端开 * 坛吵得不可开交。论坛里三言两语说的不够 尽
- 本文讲述了php版微信公众账号第三方管理工具开发方法。分享给大家供大家参考，具体如下：最近在捣鼓微信公共平台提供的API，等确实一个获取用户
- 所有软件的版本一直会升级，注意自己当时的版本是不是已经更新了。首先装centos7如果你忘了设置swap分区，下面的文章可以教你怎么补一个上
- 还有种片面的观点认为，做网站设计与平面差不多，比如老罗发布的这则招聘中提到：年薪十万招擅长做下列网站设计风格的平面设计师一名。在专业角度，网
- 在对excel的操作中，调整列的顺序以及添加一些列也是经常用到的，下面我们用pandas实现这一功能。1、调整列的顺序>>>
- 首先,大家先去下载一份dvbbs.php beta1的代码，解压后先抛开php代码，找出你的mysql手册，如果没有手册那么就直接看下面的实
- 动态规划是一种用来解决定义了一个状态空间的问题的算法策略。这些问题可分解为新的子问题，子问题有自己的参数。为了解决它们，我们必须搜索这个状态
- 本文实例讲述了JS实现匀速与减速缓慢运动的动画效果。分享给大家供大家参考，具体如下：<!DOCTYPE html><htm
