设为首页 - 加入收藏 甘南站长网 (http://www.0941zz.com)- 国内知名站长资讯网站,提供最新最全的站长资讯,创业经验,网站建设等!
热搜: 苹果 如何 网络 美国
当前位置: 首页 > 创业 > 经验 > 正文

CSS3 灵活的盒子模型(Flexible Box Module)–1

发布时间:2018-09-18 01:15 所属栏目:[经验] 来源:站长网
导读:CSS3 标准里引入了一些新的盒子模型参数,在 CSS2 的基础上,我们将能更灵活地调整页面上各个容器的大小和位置。详细的说明可以看 这个文档 。 通过学习和测试,我发现这种新的盒子模型布局对建立自适应布局的页面带来很大的好处。在这篇文章中,我的所有

CSS3 标准里引入了一些新的盒子模型参数,在 CSS2 的基础上,我们将能更灵活地调整页面上各个容器的大小和位置。详细的说明可以看这个文档

通过学习和测试,我发现这种新的盒子模型布局对建立自适应布局的页面带来很大的好处。在这篇文章中,我的所有例子都基于以下 HTML代码:


1

2

3

容器的排列

在通常的情况下,页面上所有容器的顺序都按照载入的顺序排列。而使用 CSS3 提供的功能后,我们可以在不改变 HTML 结构的前提下随意改变容器显示的位置,这样不但给排版带来极大的方便,我们也可以利用这些功能进行流量整形。

在需用使用灵活盒子模型(Flexible Box Module)的时候,我们需要先把其父容器的 Display 属性设置为 box 或者 inline-box 。

水平分布和垂直分布

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

#exemple1 .content{
-moz-box-orient : horizontal;
-webkit-box-orient : horizontal;
box-orient : horizontal;
}

#exemple1 .boite{
-moz-box-flex : 1;
-webkit-box-flex : 1;
box-flex : 1;
}

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

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

反序排列

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

但在使用这个属性的时候要注意它可能会改变元素的某些属性,产生一些不能控制的效果。

在第二个例子里,我使用了以下的 CSS :

#exemple2 .content{
-moz-box-orient : vertical;
-moz-box-direction : reverse;

-webkit-box-orient : vertical;
-webkit-box-direction : reverse;

box-orient : vertical;
box-direction : reverse;
}

#exemple2 .boite{
-moz-box-flex : 1;
-webkit-box-flex : 1;
box-flex : 1;
}

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

【免责声明】本站内容转载自互联网,其相关言论仅代表作者个人观点绝非权威,不代表本站立场。如您发现内容存在版权问题,请提交相关链接至邮箱:bqsm@foxmail.com,我们将及时予以处理。

网友评论
推荐文章