注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

左岸

web前端

 
 
 

日志

 
 

弹性盒子  

2012-05-21 16:14:36|  分类: css |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

盒子模型布局对建立自适应布局的页面带来很大的好处,在通常的情况下,页面上所有容器的顺序都按照载入的顺序排列。而使用 CSS3 提供的功能后,我们可以在不改变 HTML 结构的前提下随意改变容器显示的位置,这样不但给排版带来极大的方便,我们也可以利用这些功能进行流量整形。
    在需用使用灵活盒子模型(Flexible Box Module)的时候,我们需要先把其父容器的 Display 属性设置为 box 或者 inline-box 。
    我们可以通过 box-orient 属性指定容器的分布轴,当这个属性的值为 vertical 时其子容器将垂直分布(也可以为 block-axis ),当值为 horizontal 时其子容器讲水平分布(也可以为 inline-axis )。(注:这个效果在 CSS2 里理论上也可以通过 Display: inline; 实现,但由于某些浏览器的 BUG ,没人会这样做。)
例子(水平分布为例,仅Firefox/Chrome/Safari浏览器支持弹性盒子模型(IE9不详,Opera尚未),且使用的时候,需要附带私有前缀。就是诸如-moz-, -webkit-之类。):

<div class="text_box">
  <div class="box box_1">1</div>
  <div class="box box_2">2</div>
  <div class="box box_3">3</div>
</div>
效果一:
<style type="text/css">  /*box-flex盒子分配比例,三个盒子均分成3份,每个占一份*/
.text_box{display:-moz-box; display:-webkit-box; display:box; width:400px; height:100px;-moz-box-orient:horizontal; -webkit-box-orient:horizontal; box-orient:horizontal;}
.box_1{-moz-box-flex:1; -webkit-box-flex:1; box-flex:1; background-color:#f00;}
.box_2{-moz-box-flex:1; -webkit-box-flex:1; box-flex:1; background-color:#0f0;}
.box_3{-moz-box-flex:1; -webkit-box-flex:1; box-flex:1; background-color:#00f;}
</style>


效果二:
<style type="text/css">
.text_box{display:-moz-box; display:-webkit-box; display:box; width:400px; height:100px;-moz-box-orient:horizontal; -webkit-box-orient:horizontal; box-orient:horizontal;}
.box_1{-moz-box-flex:2; -webkit-box-flex:1; box-flex:1; background-color:#f00;}  /*占text_box的2/4*/
.box_2{-moz-box-flex:1; -webkit-box-flex:1; box-flex:1; background-color:#0f0;}  /*占text_box的1/4*/
.box_3{-moz-box-flex:1; -webkit-box-flex:1; box-flex:1; background-color:#00f;}  /*占text_box的1/4*/
</style>


效果三:
<style type="text/css">
.text_box{display:-moz-box; display:-webkit-box; display:box; width:400px; height:100px;-moz-box-orient:horizontal; -webkit-box-orient:horizontal; box-orient:horizontal;}
.box_1{-moz-box-flex:2; -webkit-box-flex:1; box-flex:1; background-color:#f00;}  /*占text_box的2/4*/
.box_2{-moz-box-flex:1; -webkit-box-flex:1; box-flex:1; background-color:#0f0;}  /*(text_box的width-.box_3的width)的1/3*/
.box_3{width50px; background-color:#00f;}  /*所占宽度即为规定的width*/
</style>


关于父容器的几个属性box-orient, box-direction, box-align, box-pack, box-lines。
1、box-orient
用来确定子元素的方向。是横着排还是竖着走。可选的值有:
horizontal | vertical | inline-axis | block-axis | inherit
其中,inline-axis是默认值。且horizontal与inline-axis的表现似乎一致的,让子元素横排;而vertical与block-axis的表现也是一致的,让元素纵列。 
2、box-direction
用来确定子元素的排列顺序,可选值有:
normal | reverse | inherit
其中normal是默认值,表示按照正常顺序排列。所谓正常顺序,就是我们看书写文字的顺序,从左往右,由上至下,先出现的元素,就上面或是左边。而reverse表示反转,原本从左往右应该是1-2-3的,结果显示确实3-2-1。
例:
<style type="text/css">
.text_box{display:-moz-box; display:-webkit-box; display:box; width:400px; height:100px;-moz-box-orient:horizontal; -webkit-box-orient:horizontal; box-orient:horizontal;-moz-box-direction:reverse; -webkit-box-direction:reverse; box-direction:reverse;}
.box_1{-moz-box-flex:1; -webkit-box-flex:1; box-flex:1; background-color:#f00;}
.box_2{-moz-box-flex:1; -webkit-box-flex:1; box-flex:1; background-color:#0f0;}
.box_3{-moz-box-flex:1; -webkit-box-flex:1; box-flex:1; background-color:#00f;}
</style>

3、box-align
box-align与box-pack都是决定盒子内部剩余空间怎么使用的。在行为效果上就是表现为“对齐”。
其中box-align决定了垂直方向上的空间利用,也就是垂直方向上的对齐表现,而剩下的box-pack就是水平方向的了。
box的可选参数有:
start | end | center | baseline | stretch
其中stretch为默认值,为拉伸,也就是父标签高度多高,其孩子元素的高度就多高。start表示顶边对齐,end为底部对齐,center为居中对齐,baseline表示基线(英文字母o,m,n等的底边位置线)对齐。
在此不一一写例子,用几张图片展示效果吧。(看不到图就看这个网址:http://www.zhangxinxu.com/study/201012/css-box-align-demo.html

 

 

 

 

 

 

 

 

 

 

 


4、box-pack
决定了父标签水平遗留空间的使用,其可选值有:
start | end | center | justify
就大部分的行为表现来说分别对应text-align属性的值:left | right | center | justify;但是,之所以box-pack不使用”left”, 而是”start”,是因为box-direction属性,这玩意可以反转原本的排列,原本的“左对齐”反转后结果是“右对齐”了,此时”left”显然就词不达意了,所以使用”start”更具有概括性,就是与父标签的起始位置对齐,从而不会产生语义与行为上的困扰。
其中”start”是box-pack属性的默认值,justify表示两端对齐。
示例:(看不到图就看这个网址:http://www.zhangxinxu.com/study/201012/css-box-pack-demo.html

 

 

 

 


5、box-lines
用来决定子元素是可以换行显示还是单行显示,两个可选值:
single | multiple
(设置box-lines:multiple后,就多行显示了。不过我自己测试了下,貌似现在无论是Firefox浏览器还是Chrome都不认识box-lines:multiple属性,是暂不支持呢,还是什么什么?)
6、两个遗漏的属性
box-flex-group作用不详,貌似目前浏览器也不支持。box-ordinal-group的作用是拉帮结派。
box-ordinal-group数值越小,位置就越靠前。
例:
<style type="text/css">
.text_box{display:-moz-box; display:-webkit-box; display:box; width:400px; height:100px;-moz-box-orient:horizontal; -webkit-box-orient:horizontal; box-orient:horizontal;}
.box_1{-moz-box-flex:1; -webkit-box-flex:1; box-flex:1; background-color:#f00; -moz-box-ordinal-group:1; -webkit-box-ordinal-group:1; box-ordinal-group:1;}
.box_2{-moz-box-flex:1; -webkit-box-flex:1; box-flex:1; background-color:#0f0; -moz-box-ordinal-group:3; -webkit-box-ordinal-group:3; box-ordinal-group:3;}
.box_3{-moz-box-flex:1; -webkit-box-flex:1; box-flex:1; background-color:#00f; -moz-box-ordinal-group:2; -webkit-box-ordinal-group:2; box-ordinal-group:2;}
</style>

 

学无止境,跟上it行业的发展!
此文具体参考http://www.zhangxinxu.com/wordpress/2010/12/css-box-flex%E5%B1%9E%E6%80%A7%EF%BC%8C%E7%84%B6%E5%90%8E%E5%BC%B9%E6%80%A7%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B%E7%AE%80%E4%BB%8B/

  评论这张
 
阅读(117)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017