css3弹性盒模型(2)
作者:dishuipiaoxiang 来源:Denis'Blog 发布时间:2010-05-10 20:47:00
盒子尺寸
默认情况下,盒子并不具有弹性,如果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大小一样。看起来好像是用百分比定义盒子的大小,但是有一个区别:使用弹性盒模型,增加一个盒子,无须重新计算其大小。
body {
display: box;
box-orient: horizontal;
}
#box1 {
box-flex: 2;
}
#box2 {
box-flex: 1;
}
#box3 {
box-flex: 1;
}
一些盒子有固定大小
下面的例子中,box3并不是弹性的,宽度为160px;这样box1和box2将有240px的可利用空间。因此,box1的宽度为160px(240*2/3),box2的宽度为80px(240*1/3)。
body {
display: box;
box-orient: horizontal;
width: 400px;
}
#box1 {
box-flex: 2;
}
#box2 {
box-flex: 1;
}
#box3 {
width: 160px;
}
溢出管理
因为是弹性盒子、非弹性盒子混排,有可能所有盒子的尺寸大于或小于父盒子的尺寸。这样就有可能空间太多或空间不足。
空间太多如何处理
可利用空间的分布取决于两个属性值: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 每个盒子的高度调整到适合父盒子的高度
body {
display: box;
box-orient: horizontal;
width: 400px;
}
#box1 {
box-flex: 2;
}
#box2 {
box-flex: 1;
}
#box3 {
width: 160px;
}
空间不足怎么办
与传统的盒模型一样,overflow属性用来决定其显示方式。为了避免溢出,你可以设置box-lines为multiple使其换行显示。
弹性盒模型看起来很不错,Gecko 和 WebKit对该模型都有一些尝试性的测试。在这些属性之前加上-moz和-webkit即可使用该属性。也即是说,firefox、safari、chrome可以使用这些特性,可以看看这个弹性盒模型的demo。
作为前端开发者来说,该模型对我们解决网页设计中一些常见的问题非常方便,如:表单布局、垂直居中、视觉上分离html流,等等。不就的将来它将成为一个web标准,早早熟悉它不是什么坏事。
更多参考
Shawn J. Goff: CSS3 Flexible Box Layout Module
CSS3.info: Introducing the flexible box layout module
猜你喜欢
- 最近,我在做网页的时候,经理老是反应网页中一些栏目中没有背景图片。我说:背景图片有的,你刷新看看。但是他说:我可以刷新看看,但是你不能老是让
- 1、给滚动条换色 好多网站的滚动条不是系统默认的灰色,而是一些红色、蓝色的,请问这是如何做的?答:这个很好实现,插入下面的代码:<&n
- 一、基本思想本文思想是基于用asp和DOM来读取和存储XML数据,并利用XML数据来存储留言信息,达到同用数据库存储数据的功能。二、XML留
- 不知道有多少人清楚的知道,在Oracle中,如果一个复合索引,假定索引(a,b,c)三个字段,删除了(包括unused)其中一个字段,Ora
- 可扩展标记语言 (XML) 是用于描述数据集内容以及应如何将数据输出到设备上或如何在 Web 页上显示数据的语言。标记语言的创建来源于出版商
- 问题:如何在报表中每隔N行显示一条粗线如何为报表增加一个行号列?回答:1、在设计模式里打开该报表,在报表主体里面加一个TextBox,把Na
- AXObject可用来解决IE需要激活 ActiveX 控件和生成控件调用代码 AXObjec
- 标志是一种简单的工具,就象铁锤,简单实用。如果一种工具功能太多导致其效用减弱,那就让它保持简单。你并不需要一把有太多装饰的精美铁锤。对于象征
- MySQL使用环境变量TMPDIR的值作为保存临时文件的目录的路径名。如果未设置TMPDIR,MySQL将使用系统的默认值,通常为/tmp、
- 像在下拉菜单中选择省、市这样的操作,我一直用ASP来创建生成列表函数,把它们保存在一个Include文件中,用的时候就加载。这样做确实有个不
- 【eval()函数】JavaScript有许多小窍门来使编程更加容易。其中之一就是eval()函数,这个函数可以把一个字符串当作一个Java
- 我们都知道在9i之前,要想获得建表和索引的语句是一件很麻烦的事。我们通常的做法都是通过export with rows=no来得到,但它的输
- 正确使用字体和颜色可以让网页内容更易阅读,下面我们来看看具体的优化措施。留意颜色的对比对于视力不太好的人或者对于不太好的显示设备来说,黑地白
- 版本 0.9来自 http://onewww.net说明:当焦点不在表格内的input时,回车键复制最后一行,delete删除键最后一行选择
- 在封装自己的FileSystemObject库的时候,测试的时候发现在文件夹或文件很多的时候,效率很低,显示一个文件夹需要2秒甚至更多,这让
- 数据库服务器主要用于存储、查询、检索企业内部的信息,因此需要搭配专用的数据库系统,对服务器的兼容性、可靠性和稳定性等方面都有很高的要求。下面
- -- 任意的测试表 代码如下:CREATE TABLE test_delete( name varchar(10), value INT )
- 这个问题我在给新云CMS升级时遇到了,按照升级步骤做完,后台登录时,出现“HTTP 错误 500.100 - 内部服务器错误 - ASP 错
- GetRows 方法 将 Recordset 对象的多个记录复制到数组中。 语法 代码如下: array = recordset.GetR
- Web网站可用性的关键指标是速度,更确切地说,是页面能以多快的速度出现在访问者的浏览器窗口里。影响速度的因素有很多种,包括Web服务器的速度