CSS 3布局体验:灵活的盒子模型

开发 前端
CSS 3标准里引入了一些新的盒子模型参数,在CSS 2的基础上,我们将能更灵活地调整页面上各个容器的大小和位置,对建立自适应布局的页面带来很大的好处。

CSS 3为开发人员带来了很多期待已久的炫目功能,同时在CSS 2的基础中,它也增加了一些新的盒子模型参数。通过学习和测试,可以发现这种新的盒子模型布局对建立自适应布局的页面带来很大的好处。在这篇文章中,所有例子都基于以下HTML代码:

51CTO相关文章推荐:定义未来Web样式 CSS 3最新特性一览  CSS 3备受期待的8大功能

  1. <body> 
  2.  <dividdivid="box1">1</div> 
  3.  <dividdivid="box2">2</div> 
  4.  <dividdivid="box3">3</div> 
  5. </body> 

容器的排列

在通常的情况下,页面上所有容器的顺序都按照载入的顺序排列。而使用CSS 3提供的功能后,我们可以在不改变HTML结构的前提下随意改变容器显示的位置,这样不但给排版带来极大的方便,我们也可以利用这些功能进行流量整形。在需用使用灵活盒子模型(FlexibleBoxModule)的时候,我们需要先把其父容器的Display属性设置为box或者inline-box。

水平分布和垂直分布

我们可以通过box-orient属性指定容器的分布轴,当这个属性的值为vertical时其子容器将垂直分布(也可以为block-axis),当值为horizontal时其子容器讲水平分布(也可以为inline-axis)。在本文的第一个例子里我们使用以下的CSS:

  1. #exemple1.content{  
  2.  -moz-box-orient:horizontal;  
  3.  -webkit-box-orient:horizontal;  
  4.  box-orient:horizontal;  
  5. }  
  6.  
  7. #exemple1.boite{  
  8.  -moz-box-flex:1;  
  9.  -webkit-box-flex:1;  
  10.  box-flex:1;  

具体的效果可以看这个DEMO,三个子Div容器都横向并列了。

注:这个效果在CSS 2里理论上也可以通过Display:inline;实现,但由于某些浏览器的BUG,没人会这样做。

反序排列

box-direction属性可以让我们随意改变容器的显示顺序。我们知道,在默认的情况下,block级元素是按照加载顺序从上到下排列,inline级元素是从左到右排列的,但现在通过box-direction属性我们可以让最后加载的block级元素显示在最顶部,最后加载的inline级元素显示在左边。

但在使用这个属性的时候要注意它可能会改变元素的某些属性,产生一些不能控制的效果。在第二个例子里,我们使用以下的CSS:

  1. #exemple2.content{  
  2.  -moz-box-orient:vertical;  
  3.  -moz-box-direction:reverse;  
  4.  
  5.  -webkit-box-orient:vertical;  
  6.  -webkit-box-direction:reverse;  
  7.  
  8.  box-orient:vertical;  
  9.  box-direction:reverse;  
  10. }  
  11.  
  12. #exemple2.boite{  
  13.  -moz-box-flex:1;  
  14.  -webkit-box-flex:1;  
  15.  box-flex:1;  

效果大家可以看这个DEMO。可以发现,在不改变HTML结构的情况下,容器的排列顺序改变了。

按指定顺序排列

我们不但可以让一组同级容器反序排列,而且还可以让它们按自己喜欢的顺序排列,box-ordinal-group属性可以帮我们做到这一点。通过box-ordinal-group为各个容器指定一个序号,默认情况下他们将会按照序号递增的顺序排列。要注意的是:没有指定序号的容器默认都为1,并且序号相同的元素将按照加载顺序排列。大家可以看一下下面的CSS:

  1. #exemple3.content{  
  2.  -moz-box-orient:vertical;  
  3.  -moz-box-direction:reverse;  
  4.  
  5.  -webkit-box-orient:vertical;  
  6.  -webkit-box-direction:reverse;  
  7.  
  8.  box-orient:vertical;  
  9.  box-direction:reverse;  
  10. }  
  11.  
  12. #exemple3.boite{  
  13.  -moz-box-flex:1;  
  14.  -webkit-box-flex:1;  
  15.  box-flex:1;  
  16. }  
  17.  
  18. #exemple3.v1{  
  19.  -moz-box-ordinal-group:2;  
  20.  -webkit-box-ordinal-group:2;  
  21.  box-ordinal-group:2;  
  22. }  
  23.  
  24. #exemple3.v2{  
  25.  -moz-box-ordinal-group:2;  
  26.  -webkit-box-ordinal-group:2;  
  27.  box-ordinal-group:2;  
  28. }  
  29.  
  30. #exemple3.v3{  
  31.  -moz-box-ordinal-group:1;  
  32.  -webkit-box-ordinal-group:1;  
  33.  box-ordinal-group:1;  

在上面的CSS里,我把第一和第二个容器的序号都定为2,第三个容器序号为1,因此最终效果应该是v3排在第一,v1和v2则根据加载顺序,v1排在v2前面。效果可以看这个DEMO。

后记

CSS 3真的非常强大,我相信在它普及以后,我们做网页的时候将可以减少大量的JavaScript。

文章转自Bolo的博客,

原文地址:http://blog.imbolo.com/the-css3-flexible-box-model/

【编辑推荐】

  1. 定义未来Web样式 CSS 3最新特性一览
  2. 揭秘HTML 5和CSS3 Web实现飞跃的踏板
  3. 检测浏览器是否支持CSS3的方法
  4. CSS 3中的炫目新功能抢先预览
  5. CSS 3备受期待的8大功能

 

责任编辑:王晓东 来源: 博客
相关推荐

2012-08-31 09:36:01

CSS

2023-09-11 06:12:31

盒子模型CSS

2022-09-10 19:26:37

HTMLCSS

2010-09-08 09:44:17

CSS盒子模式

2012-04-06 13:18:58

IE6W3CDIV

2017-05-24 10:12:54

前端FlexboxCSS3

2022-09-28 23:25:14

项目CSS定位选择器

2010-08-25 11:05:03

CSSpaddingmargin

2010-09-08 11:06:49

CSSpaddingmargin

2018-02-25 16:35:32

前端CSS面试题

2012-06-27 14:12:45

CSS

2010-09-02 13:53:58

CSS Sprites

2019-04-03 13:00:27

CSSBFC前端

2023-05-22 10:09:21

FlexboxCSS3

2014-07-14 12:37:36

jQueryCSS3

2010-08-23 15:22:56

CSSfloat

2021-07-31 23:25:34

CSS布局UI

2022-10-13 09:01:24

GridCSS二维布局

2010-09-02 09:59:52

CSS SpritesCSS

2012-03-29 09:35:32

WEBCSS
点赞
收藏

51CTO技术栈公众号