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的新特性介绍
Oct 31 HTML / CSS
CSS3 icon font完全指南(CSS3 font 会取代icon图标)
Jan 06 HTML / CSS
CSS3 3D旋转rotate效果实例介绍
May 03 HTML / CSS
使用CSS3实现SVG路径描边动画效果入门教程
Oct 21 HTML / CSS
Html5内唤醒百度、高德APP的实现示例
May 20 HTML / CSS
input元素的url类型和email类型简介
Jul 11 HTML / CSS
基于Modernizr 让网站进行优雅降级的分析
Apr 21 HTML / CSS
用HTML5中的Canvas结合公式绘制粒子运动的教程
May 08 HTML / CSS
HTML5 history新特性pushState、replaceState及两者的区别
Dec 26 HTML / CSS
借助HTML5 Canvas API制作一个简单的猜字游戏
Mar 25 HTML / CSS
HTML5拖拽API经典实例详解
Apr 20 HTML / CSS
详解Canvas实用库Fabric.js使用手册
Jan 07 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数据库连接
2006/10/09 PHP
PHP中date与gmdate的区别及默认时区设置
2014/05/12 PHP
destoon安全设置中需要设置可写权限的目录及文件
2014/06/21 PHP
JQuery与JSon实现的无刷新分页代码
2011/09/13 Javascript
鼠标经过显示二级菜单js特效
2013/08/13 Javascript
解析javascript中鼠标滚轮事件
2015/05/26 Javascript
AngularJs Managing Service Dependencies详解
2016/09/02 Javascript
简单实现js浮动框
2016/12/13 Javascript
基于JavaScript实现弹幕特效
2020/08/27 Javascript
Angular移动端页面input无法输入的解决方法
2017/11/14 Javascript
Vue 拦截器对token过期处理方法
2018/01/23 Javascript
Node.js中DNS模块学习总结
2018/02/28 Javascript
微信小程序实现红包雨功能
2018/07/11 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
2018/09/10 Javascript
vue路由插件之vue-route
2019/06/13 Javascript
解决layui页面按钮点击无反应,也不报错的问题
2019/09/29 Javascript
原生js实现无缝轮播图
2020/01/11 Javascript
vue-video-player 断点续播的实现
2021/02/01 Vue.js
[01:14:05]《加油DOTA》第四期
2014/08/25 DOTA
[48:46]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第二场 11.19
2020/11/19 DOTA
Tornado Web服务器多进程启动的2个方法
2014/08/04 Python
用Python编写简单的微博爬虫
2016/03/04 Python
django批量导入xml数据
2016/10/16 Python
Python调用C# Com dll组件实战教程
2017/10/12 Python
python 接口测试response返回数据对比的方法
2018/02/11 Python
python 在屏幕上逐字显示一行字的实例
2018/12/24 Python
浅谈python 中类属性共享的问题
2019/07/02 Python
在交互式环境中执行Python程序过程详解
2019/07/12 Python
python实现的生成word文档功能示例
2019/08/23 Python
TensorFlow实现checkpoint文件转换为pb文件
2020/02/10 Python
numpy的Fancy Indexing和array比较详解
2020/06/11 Python
欧舒丹比利时官网:L’OCCITANE比利时
2017/04/25 全球购物
运输企业安全生产责任书
2014/07/28 职场文书
2014班子“三严三实”对照检查材料思想汇报
2014/09/18 职场文书
2014年效能监察工作总结
2014/11/21 职场文书
python pyhs2 的安装操作
2021/04/07 Python