css3弹性盒模型实例介绍


Posted in HTML / CSS onMay 27, 2013

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

css3弹性盒模型实例介绍 
反向分布
“box-direction”可以设置盒子出现的顺序。默认情况下,只需定义分布坐标轴——box随html流分布。如果为水平坐标轴,则从左到右分布;垂直坐标轴则从上到下分布。定义“box-direction”的属性值为“reverse”,则反转盒子的排列顺序。
复制代码
代码如下:

body {
display: box;
box-orient: vertical;
box-direction: reverse;
}

css3弹性盒模型实例介绍
具体分布
属性“box-ordinal-group”定义盒子分布的顺序。可以随意的控制其分布顺序。这些组以一个从“1”开始的数字定义,盒模型将首先分布这些组,所有这些盒子将在每个组中。分布将从小到大排列。
复制代码
代码如下:

body {
display: box;
box-orient: vertical;
box-direction : reverse;
}
#box1 {box-flex:1;box-ordinal-group: 2;}
#box2 {box-flex:2;box-ordinal-group: 2;}
#box3 {box-flex:2;box-ordinal-group: 1;}

盒子尺寸
默认情况下,盒子并不具有弹性,如果box-flex的属性值至少为1时,则变得富有弹性。box-flex如何对父容器的宽度进行划分,三个子块分别设置了1、2、2,也就是把这个父容器分成5份,分别占据了父结构宽度的1/5(100px)、2/5(200px)、2/5(200px)。如果盒子不具有弹性,它将尽可能的宽使其内容可见,且没有任何溢出,其大小由“width”和“height”来决定(或min-height、min-width、max-width、max-height)。
HTML / CSS 相关文章推荐
基于CSS3制作立体效果导航菜单
Jan 12 HTML / CSS
CSS3 3D旋转rotate效果实例介绍
May 03 HTML / CSS
CSS3关于z-index不生效问题的解决
Feb 19 HTML / CSS
Html5移动端弹幕动画实现示例代码
Aug 27 HTML / CSS
使用canvas绘制超炫时钟
Dec 17 HTML / CSS
HTML5新增的8类INPUT输入类型介绍
Jul 06 HTML / CSS
使用phonegap进行本地存储的实现方法
Mar 31 HTML / CSS
Html5 Canvas动画基础碰撞检测的实现
Dec 06 HTML / CSS
HTML5自定义属性的问题分析
Aug 16 HTML / CSS
css3实现背景图片半透明内容不透明的方法示例
Apr 13 HTML / CSS
css中有哪些方式可以隐藏页面元素及区别
Jun 16 HTML / CSS
如何解决flex文本溢出问题小结
Jul 15 HTML / CSS
深入CSS3 动画效果的总结详解
May 09 #HTML / CSS
基于CSS3特效之动画:animation的应用
May 09 #HTML / CSS
纯CSS3实现手风琴风格菜单具体步骤
May 06 #HTML / CSS
CSS3——齿轮转动关键代码
May 02 #HTML / CSS
如何利用CSS3制作3D效果文字具体实现样式
May 02 #HTML / CSS
使用JS+CSS3技术:让你的名字动起来
Apr 27 #HTML / CSS
CSS3 绘制BMW logo实的现代码
Apr 25 #HTML / CSS
You might like
php入门学习知识点一 PHP与MYSql连接与查询
2011/07/14 PHP
服务器变量 $_SERVER 的深入解析
2013/07/02 PHP
PHP学习笔记(二) 了解PHP的基本语法以及目录结构
2014/08/04 PHP
php实现概率性随机抽奖代码
2016/01/02 PHP
PHP单例模式应用示例【多次连接数据库只实例化一次】
2018/12/18 PHP
网上应用的一个不错common.js脚本
2007/08/08 Javascript
游览器中javascript的执行过程(图文)
2012/05/20 Javascript
实现动画效果核心方式的js代码
2013/09/27 Javascript
纯Javascript实现Windows 8 Metro风格实现
2013/10/15 Javascript
js获取url参数代码实例分享(JS操作URL)
2013/12/13 Javascript
iframe实用操作锦集
2014/04/22 Javascript
关于Vue.js一些问题和思考学习笔记(1)
2016/12/02 Javascript
js实现小窗口拖拽效果
2016/12/03 Javascript
如何制作幻灯片(代码分享)
2017/01/06 Javascript
bootstrapValidator.min.js表单验证插件
2017/02/09 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
2017/03/09 Javascript
vue+vue-validator 表单验证功能的实现代码
2017/11/13 Javascript
Angular实现的简单查询天气预报功能示例
2017/12/27 Javascript
Vue中jsx不完全应用指南小结
2019/11/01 Javascript
element-ui点击查看大图的方法示例
2020/12/14 Javascript
centos 下面安装python2.7 +pip +mysqld
2014/11/18 Python
Python RuntimeError: thread.__init__() not called解决方法
2015/04/28 Python
python中的反斜杠问题深入讲解
2019/08/12 Python
Tensorflow tf.tile()的用法实例分析
2020/05/22 Python
python基于socket模拟实现ssh远程执行命令
2020/12/05 Python
美国在线鲜花速递:ProFlowers
2017/01/05 全球购物
Loreto Gallo英国:欧洲领先的在线药房
2021/01/21 全球购物
诺思信科技(南京)有限公司.NET笔试题答案
2013/07/06 面试题
创先争优宣传标语
2014/10/08 职场文书
欢迎词怎么写
2015/01/23 职场文书
导游词欢迎词
2015/02/02 职场文书
项目建议书
2015/02/04 职场文书
仓库保管员岗位职责
2015/02/09 职场文书
教学督导岗位职责
2015/04/10 职场文书
导游词之新疆尼雅遗址
2019/10/16 职场文书
六年级作文之自救
2019/12/19 职场文书