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 圆角效果
Jul 15 HTML / CSS
IE浏览器单独写CSS样式的几种方法
Oct 14 HTML / CSS
一款纯css3实现的漂亮的404页面的实例教程
Nov 27 HTML / CSS
css3实现3d旋转动画特效
Mar 10 HTML / CSS
CSS3田字格列表的样式编写方法
Nov 22 HTML / CSS
HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
Jan 30 HTML / CSS
HTML中fieldset标签概述及使用方法
Feb 01 HTML / CSS
简单的HTML5初步入门教程
Sep 29 HTML / CSS
html5如何在Canvas中实现自定义路径动画示例
Sep 18 HTML / CSS
canvas学习和滤镜实现代码
Aug 22 HTML / CSS
html5简介及新增功能介绍
May 18 HTML / CSS
在HTML中引入CSS的几种方式介绍
Dec 06 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单态设计模式(单例模式)实例
2014/11/18 PHP
php安装ssh2扩展的方法【Linux平台】
2016/07/20 PHP
PHP中如何判断exec函数执行成功?
2016/08/04 PHP
thinkPHP分页功能实例详解
2017/05/05 PHP
PHP Laravel中的Trait使用方法
2019/01/20 PHP
javascript框架设计读书笔记之字符串的扩展和修复
2014/12/02 Javascript
jQuery实现表格颜色交替显示的方法
2015/03/09 Javascript
javascript实现仿IE顶部的可关闭警告条
2015/05/05 Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
2015/10/16 Javascript
使用angularjs创建简单表格
2016/01/21 Javascript
jQuery中extend函数简单用法示例
2017/10/11 jQuery
js根据json数据中的某一个属性来给数据分组的方法
2018/10/08 Javascript
Vue路由之JWT身份认证的实现方法
2019/08/26 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
2019/10/28 Javascript
js实现百度淘宝搜索功能
2020/02/17 Javascript
用Python实现斐波那契(Fibonacci)函数
2016/03/25 Python
Python配置mysql的教程(推荐)
2017/10/13 Python
python爬虫之BeautifulSoup 使用select方法详解
2017/10/23 Python
Anaconda下安装mysql-python的包实例
2018/06/11 Python
python3连接kafka模块pykafka生产者简单封装代码
2019/12/23 Python
python实现提取str字符串/json中多级目录下的某个值
2020/02/27 Python
python中adb有什么功能
2020/06/07 Python
Python爬虫设置ip代理过程解析
2020/07/20 Python
Django+Uwsgi+Nginx如何实现生产环境部署
2020/07/31 Python
英国在线房屋中介网站:Yopa
2018/01/09 全球购物
微软瑞士官方网站:Microsoft瑞士
2018/04/20 全球购物
教师个人鉴定材料
2014/02/08 职场文书
国际贸易专业求职信
2014/06/04 职场文书
餐饮周年庆活动方案
2014/08/14 职场文书
四风个人对照检查材料思想汇报
2014/09/25 职场文书
夫妻双方自愿离婚协议书怎么写
2014/12/01 职场文书
酒店财务部岗位职责
2015/04/14 职场文书
详解RedisTemplate下Redis分布式锁引发的系列问题
2021/04/27 Redis
Python中的变量与常量
2021/11/11 Python
使用Redis实现点赞取消点赞的详细代码
2022/03/20 Redis
spring 项目实现限流方法示例
2022/07/15 Java/Android