html弹性盒模型,Css3 弹性盒模型
我们来介绍一下Css3 弹性盒模型。Css3引入了新的盒子模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间。这与XUL(火狐使用的用户交互语言)相似,其它语言也使用相同的盒模型,如XAML 、GladeXML。
使用该模型,可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局。本文的例子使用以下的HTML代码:
view sourceprint?
1.
2.
3.
4.
5.
传统的盒模型基于HTML流在垂直方向上排列盒子。使用弹性盒模型可以规定特定的顺序,也可以反转之。要开启弹性盒模型,只需设置拥有子盒子的盒子的display的属性值为box(或inline-box)即可。
view sourceprint?
1.display: box;
水平或垂直分布
“box-orient”定义分布的坐标轴:vertical和horizional。这两个值定义盒子如何显示,
view sourceprint?
1.body{
2. display: box;
3. box-orient: horizontal;
4.}
反向分布
“box-direction”可以设置盒子出现的顺序。默认情况下,只需定义分布坐标轴——box随html流分布。如果为水平坐标轴,则从左到右分布;垂直坐标轴则从上到下分布。定义“box-direction”的属性值为“reverse”,则反转盒子的排列顺序。
view sourceprint?
1.body {
2. display: box;
3. box-orient: vertical;
4. box-direction: reverse;
5.}
具体分布
属性“box-ordinal-group”定义盒子分布的顺序。可以随意的控制其分布顺序。这些组以一个从“1”开始的数字定义,盒模型将首先分布这些组,所有这些盒子将在每个组中。分布将从小到大排列。
view sourceprint?
01.body {
02. display: box;
03. box-orient: vertical;
04. box-direction : reverse;
05.}
06.#box1 {
07. box-ordinal-group: 2;
08.}
09.#box2 {
10. box-ordinal-group: 2;
11.}
12.#box3 {
13. box-ordinal-group: 1;
14.}
盒子尺寸
默认情况下,盒子并不具有弹性,如果box-flex的属性值至少为1时,则变得富有弹性。
如果盒子不具有弹性,它将尽可能的宽使其内容可见,且没有任何溢出,其大小由“width”和“height”来决定(或min-height、min-width、max-width、max-height)。
如果盒子是弹性的,其大小将按下面的方式计算:具体的大小声明(width、height、min-width、min-height、max-width、max-height);
父盒子的大小和所有余下的可利用的内部空间
如果盒子没有任何大小声明,那么其大小将完全取决于父box的大小。即:盒子的大小等于父级盒子的大小乘以其box-flex在所有子盒子box-flex总和中的百分比(子盒子的大小=父盒子的大小*子盒子的box-flex/所有子盒子的box-flex值的和)。
如果一个或更多的盒子有一个具体的大小声明,那么其大小将计算其中,余下的弹性盒子将按照上面的原则分享剩下的可利用空间。
看看下面的例子,理解起来更容易。
所有盒子都是弹性的
下面的例子中,box1的大小为box2的两倍,box2与box3大小一样。看起来好像是用百分比定义盒子的大小,但是有一个区别:使用弹性盒模型,增加一个盒子,无须重新计算其大小。
view sourceprint?
01.body {
02. display: box;
03. box-orient: horizontal;
04.}
05.#box1 {
06. box-flex: 2;
07.}
08.#box2 {
09. box-flex: 1;
10.}
11.#box3 {
12. box-flex: 1;
13.}
一些盒子有固定大小
下面的例子中,box3并不是弹性的,宽度为160px;这样box1和box2将有240px的可利用空间。因此,box1的宽度为160px(240*2/3),box2的宽度为80px(240*1/3)。
view sourceprint?
01.body {
02. display: box;
03. box-orient: horizontal;
04. width: 400px;
05.}
06.#box1 {
07. box-flex: 2;
08.}
09.#box2 {
10. box-flex: 1;
11.}
12.#box3 {
13. width: 160px;
14.}
溢出管理
因为是弹性盒子、非弹性盒子混排,有可能所有盒子的尺寸大于或小于父盒子的尺寸。这样就有可能空间太多或空间不足。
空间太多如何处理
可利用空间的分布取决于两个属性值:box-align 和 box-pack。
属性“box-pack”管理水平方向上的空间分布,有以下四个可能属性:start、end、 justify、 or center。start 所有盒子在父盒子的左侧,余下的空间在右侧;
end所有盒子在父盒子的右侧,余下的空间在左侧;
justify 余下的空间在盒子间平均分配;
center 可利用的空间在父盒子的两侧平均分配。
属性“box- align”管理垂直方向上的空间分布,有以下五个可能属性之:start、 end,、center、 baseline和 stretch。
start 每个盒子沿父盒子的上边缘排列,余下的空间位于底部;
end 每个盒子沿父盒子的下边缘排列,余下的空间位于顶部;
center 可用空间平均分配,上面一半,下面一半;
baseline 所有盒子沿着它们的基线排列,余下的空间可前可后;
stretch 每个盒子的高度调整到适合父盒子的高度
view sourceprint?
01.body {
02. display: box;
03. box-orient: horizontal;
04. /* The content of the body is horizontally centered */
05. box-pack: center;
06. /* and vertically as well ... o/ */
07. box-align: center;
08. width: 100%;
09. height : 100%;
10.}
空间不足怎么办
与传统的盒模型一样,overflow属性用来决定其显示方式。为了避免溢出,你可以设置box-lines为multiple使其换行显示。
弹性盒模型看起来很不错,Gecko 和 WebKit对该模型都有一些尝试性的测试。在这些属性之前加上-moz和-webkit即可使用该属性。也即是说,firefox、safari、chrome可以使用这些特性。作为前端开发者来说,该模型对我们解决网页设计中一些常见的问题非常方便,如:表单布局、垂直居中、视觉上分离html流,等等。不就的将来它将成为一个web标准,早早熟悉它不是什么坏事。
html弹性盒模型,Css3 弹性盒模型相关推荐
- css3的弹性盒子模型,css3弹性盒子模型——回顾。
1.box-flex属性规定框的子元素是否可伸缩其尺寸. 父元素必须要声明display:box;子元素才可以用box-flex. 语法:box-flex:value; 示例: .test_box { ...
- css怪异盒子模型,CSS3弹性盒---怪异盒
怪异盒模型 box-sizing:content-box 标准盒模型 总宽/高度=width+左右/上下padding+左右/上下border box- ...
- html弹性盒子垂直排列,css3弹性盒子布局
css3弹性盒子布局 CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式. 引入弹性盒布局模型的目的是 ...
- CSS3弹性盒模型布局模块介绍
来源:Robert's talk 原文:http://robertnyman.com/2010/12/02/css3-flexible-box-layout-module-aka-flex-box-i ...
- CSS3 弹性布局盒模型 Flex布局
Web 应用中,布局设计是非常重要的一部分.随着响应式设计的盛行,一般都要求 Web 应用能够适配不同尺寸的设备.响应式设计中最重要的一环就是布局,需要根据窗口尺寸来调整布局,从而改变元素的尺寸和位置 ...
- 响应式布局:CSS3弹性盒flex布局模型
tip:有问题或者需要大厂内推的+我脉脉哦:丛培森 ٩( 'ω' )و 页面布局一直都是web应用样式设计的重点 我们传统的布局方式都是基于盒模型的 利用display.position.float来 ...
- css3弹性盒模型兼容性,彻底弄懂css3的flex弹性盒模型
由于在日常工作中使用css或者bootstrap的栅格系统已经能很好的满足业务需求,所以一直以来对css3的弹性布局不是很感冒. 近日有幸在一篇文章中领略了flex的魅力--简洁优雅.随试之. /*容 ...
- CSS3 弹性盒布局模型和布局原理
在CSS 3中,CSS Flexible Box模块为一个非常重要的模块,该模块用于以非常灵活的方式实现页面布局处理. 虽然可以使用其他CSS样式属性来实现页面布局处理,但是如果使用CSS Flexi ...
- html盒子标准模型,CSS标准盒模型与IE盒子模型以及弹性盒模型
CSS2.1中提出了盒模型的概念,盒模型高度提炼了所有元素的基本特征,即标准盒模型,CSS3中进一步扩展,提出了弹性盒模型的概念 什么是盒模型,我们可以先直观的看一个东西 打开Chrome浏览器,F1 ...
最新文章
- Webwork 学习之路(四)Configuration 详解
- ExtJs选项卡,求大神解答
- 计算机科学与技术python方向是什么意思-计算机科学与技术专业大学应该掌握什么样的基本技能?...
- [SIGMOD 10] Pregel 基于BSP的大规模图处理系统 学习总结
- Java 最坑爹的 10 大功能点!
- Boost:验证atomic <>不会在成员指针上提供算术运算
- [转]sqlserver转换为Mysql工具使用
- liferay-ui:search-container 用法
- php中节点值怎么获取,php – 节点更新:获取旧值
- Python的matplotlib库画图不能显示中文问题解决
- typecho 全站ajax,Typecho全站启用HTTPS教程
- django中配置多个mongodb数据库
- 从业务到技术weibo link card快速接入思考-2014.09.20
- origin函数绘图_资料|史上最全10套Origin科研必备绘图教学,无需代码
- 证书制作,各个环节的原理以及推送证书制作,和如何为推送服务器提供证书
- 将CSDN文章下载为markdown文档
- php三D立体模拟,CSS3使用3D环境实现立体魔方效果的实例代码分享
- Prege(图计算框架)
- 贷后评分模型的三种细分应用
- 你要学习,你要学习,你要学习
热门文章
- 五、医院决策支持系统
- 数据加解密基础知识介绍,及Java实现Base64加密(详细)
- 全域散列概念理解(try)
- bat脚本通用按键交互控制函数-onkeydown函数
- 什么是数字化?为什么需要数字化?数字化的未来?
- 第七节 Html字体样式,HTML学习笔记 CSS文本及字体及连接及列表 第七节 (原创)(示例代码)...
- Spring使用注解的方式来实现简单的打印机功能,附完整代码,菜鸟教程
- h3c390服务器硬盘驱动,产品技术-H3C UIS B390 G3刀片式服务器-新华三集团-H3C
- 对于KSWEB使用心得
- 5种常用开源协议解释