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线性渐变简单实现以及该属性在浏览器中的不同
Dec 12 HTML / CSS
如何利用CSS3制作3D效果文字具体实现样式
May 02 HTML / CSS
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
Apr 24 HTML / CSS
CSS3中线性颜色渐变的一些实现方法
Jul 14 HTML / CSS
CSS3制作彩色进度条样式的代码示例分享
Jun 23 HTML / CSS
利用纯CSS3实现动态的自行车特效源码
Jan 20 HTML / CSS
CSS3制作轮播图的一种方法
Nov 11 HTML / CSS
HTML5 本地存储实现购物车功能
Sep 07 HTML / CSS
HTML5的语法变化介绍
Aug 13 HTML / CSS
浅谈HTML5 &amp; CSS3的新交互特性
Jul 19 HTML / CSS
HTML5基于flash实现播放RTMP协议视频的示例代码
Dec 04 HTML / CSS
HTML CSS 一个标签实现带动画的抖音LOGO
Apr 26 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下实现农历日历的代码
2007/03/07 PHP
php 中英文语言转换类
2011/09/07 PHP
php去除数组中重复数据
2014/11/18 PHP
PHP删除指定目录中的所有目录及文件的方法
2015/02/26 PHP
php使用CURL不依赖COOKIEJAR获取COOKIE的方法
2015/06/17 PHP
Laravel中前端js上传图片到七牛云的示例代码
2017/09/04 PHP
PHP unlink与rmdir删除目录及目录下所有文件实例代码
2018/02/07 PHP
载入进度条 效果
2006/07/08 Javascript
jquery中的sortable排序之后的保存状态的解决方法
2010/01/28 Javascript
C#中TrimStart,TrimEnd,Trim在javascript上的实现
2011/01/17 Javascript
鼠标划过实现延迟加载并隐藏层的js代码
2013/10/11 Javascript
jquery使用hide方法隐藏指定id的元素
2015/03/30 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
2015/06/19 Javascript
JavaScript多线程详解
2015/08/12 Javascript
浅谈javascript alert和confirm的美化
2016/12/15 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
2017/02/06 Javascript
javascript实现Java中的Map对象功能的实例详解
2017/08/21 Javascript
Angular4学习教程之HTML属性绑定的方法
2018/01/04 Javascript
详解JavaScript事件循环机制
2018/09/07 Javascript
使用jQuery如何写一个含验证码的登录界面
2019/05/13 jQuery
vue data对象重新赋值无效(未更改)的解决方式
2020/07/24 Javascript
python解析模块(ConfigParser)使用方法
2013/12/10 Python
利用Python脚本在Nginx和uwsgi上部署MoinMoin的教程
2015/05/05 Python
python中requests和https使用简单示例
2018/01/18 Python
Django重置migrations文件的方法步骤
2019/05/01 Python
浅析Windows 嵌入python解释器的过程
2019/07/26 Python
Python绘制动态水球图过程详解
2020/06/03 Python
解决Keras使用GPU资源耗尽的问题
2020/06/22 Python
Python如何创建装饰器时保留函数元信息
2020/08/07 Python
如何用Python绘制3D柱形图
2020/09/16 Python
Boom手表官网:瑞典手表品牌,设计你的手表
2019/03/11 全球购物
法国在线药房:DoctiPharma
2020/10/21 全球购物
上海世博会志愿者口号
2014/06/17 职场文书
会计学专业求职信
2014/07/17 职场文书
代办出身证明书
2014/10/21 职场文书
MySQL into_Mysql中replace与replace into用法案例详解
2021/09/14 MySQL