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 相关文章推荐
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
Mar 09 HTML / CSS
CSS3实战第一波 让我们尽情的圆角吧
Aug 27 HTML / CSS
CSS3 制作绽放的莲花采用效果叠加实现
Jan 31 HTML / CSS
html5音频_动力节点Java学院整理
Aug 22 HTML / CSS
html5 拖拽上传图片实例演示
Apr 01 HTML / CSS
基于HTML5 Canvas的3D动态Chart图表的示例
Nov 02 HTML / CSS
HTML5 canvas 瀑布流文字效果的示例代码
Jan 31 HTML / CSS
html5 figure和figcaption的使用方法
Sep 10 HTML / CSS
canvas实现扭蛋机动画效果的示例代码
Oct 17 HTML / CSS
HTML5 Blob 实现文件下载功能的示例代码
Nov 29 HTML / CSS
canvas绘制树形结构可视图形的实现
Apr 03 HTML / CSS
Canvas 文本填充线性渐变的使用详解
Jun 22 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 json_encode奇怪问题说明
2011/09/27 PHP
php中curl使用指南
2015/02/05 PHP
ThinkPHP使用Smarty第三方插件方法小结
2016/03/19 PHP
PHP动态地创建属性和方法, 对象的复制, 对象的比较,加载指定的文件,自动加载类文件,命名空间
2016/05/06 PHP
微信利用PHP创建自定义菜单的方法
2016/08/01 PHP
thinkphp3.2实现跨控制器调用其他模块的方法
2017/03/14 PHP
Yii中特殊行为ActionFilter的使用方法示例
2020/10/18 PHP
javascript控制swfObject应用介绍
2012/11/29 Javascript
ajax的hide隐藏问题解决方法
2012/12/11 Javascript
js将long日期格式转换为标准日期格式实现思路
2013/04/07 Javascript
使用JSLint提高JS代码质量方法分享
2013/12/16 Javascript
node.js中的emitter.emit方法使用说明
2014/12/10 Javascript
jQuery中before()方法用法实例
2014/12/25 Javascript
javascript实现类似超链接的效果
2014/12/26 Javascript
nodejs中的fiber(纤程)库详解
2015/03/24 NodeJs
JavaScript数组对象赋值用法实例
2015/08/04 Javascript
总结JavaScript设计模式编程中的享元模式使用
2016/05/21 Javascript
基于Angularjs实现分页功能
2016/05/30 Javascript
javascript实现随机抽奖功能
2020/12/30 Javascript
[01:32]2016国际邀请赛中国区预选赛CDEC战队教练采访
2016/06/26 DOTA
[01:38]【DOTA2亚洲邀请赛】Sumail——梦开始的地方
2017/03/03 DOTA
[32:26]EG vs IG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
对于Python编程中一些重用与缩减的建议
2015/04/14 Python
使用Python搭建虚拟环境的配置方法
2018/02/28 Python
python创建n行m列数组示例
2019/12/02 Python
matplotlib 对坐标的控制,加图例注释的操作
2020/04/17 Python
Perry Ellis官网:美国男士品味服装
2016/12/09 全球购物
MYPROTEIN澳大利亚官方网站:欧洲运动营养品牌
2019/06/26 全球购物
NHL官方在线商店:Shop.NHL.com
2020/05/01 全球购物
学校十一活动方案
2014/02/01 职场文书
考试保密承诺书
2014/08/30 职场文书
2014年护士工作总结范文
2014/11/11 职场文书
领导欢迎词致辞
2015/01/23 职场文书
班干部学习委员竞选稿
2015/11/20 职场文书
2016年百日安全生产活动总结
2016/04/06 职场文书
SpringBoot 集成短信和邮件 以阿里云短信服务为例
2022/04/22 Java/Android