CSS3布局-灵活的盒子模型

2020-03-24 17:57:49

字体：大中小

来源：转载

供稿：网友

CSS3为前端设计人员提供了很大的方便，在CSS2的基础上它也增加了一些新的盒子模型参数，我们将能更灵活地调整页面上各个容器的大小和位置，对建立自适应布局的页面带来很大的好处。通过学习和测试，可以发现这种新的盒子模型布局对建立自适应布局的页面带来很大的好处。本文将介绍CSS3布局:灵活的盒子模型，文中所有例子都基于以下HTML代码： body dividdivid=”box1″ 1 /div dividdivid=”box2″ 2 /div dividdivid=”box3″ 3 /div /body 容器的排列在通常的情况下，页面上所有容器的顺序都按照载入的顺序排列。而使用CSS3提供的功能后，我们可以在不改变HTML结构的前提下随意改变容器显示的位置，这样不但给排版带来极大的方便，我们也可以利用这些功能进行流量整形。在需用使用灵活盒子模型(FlexibleBoxModule)的时候，我们需要先把其父容器的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;}我们不但可以让一组同级容器反序排列，而且还可以让它们按自己喜欢的顺序排列，box-ordinal-group属性可以帮我们做到这一点。通过box-ordinal-group为各个容器指定一个序号，默认情况下他们将会按照序号递增的顺序排列。要注意的是：没有指定序号的容器默认都为 1，并且序号相同的元素将按照加载顺序排列。大家可以看一下下面的CSS：#exemple3.content{
-moz-box-orient:vertical;
-moz-box-direction:reverse;
-webkit-box-orient:vertical;
-webkit-box-direction:reverse;
box-orient:vertical;
box-direction:reverse;
}
#exemple3.boite{
-moz-box-flex:1;
-webkit-box-flex:1;
box-flex:1;
}
#exemple3.v1{
-moz-box-ordinal-group:2;
-webkit-box-ordinal-group:2;
box-ordinal-group:2;
}
#exemple3.v2{
-moz-box-ordinal-group:2;
-webkit-box-ordinal-group:2;
box-ordinal-group:2;
}
#exemple3.v3{
-moz-box-ordinal-group:1;
-webkit-box-ordinal-group:1;
box-ordinal-group:1;
}效果大家可以看这个DEMO。可以发现，在不改变HTML结构的情况下，容器的排列顺序改变了。
按指定顺序排列在上面的CSS里，我把第一和第二个容器的序号都定为2，第三个容器序号为1，因此最终效果应该是v3排在第一，v1和v2则根据加载顺序，v1排在v2前面。效果可以看这个DEMO。后记CSS3真的非常强大，我相信在它普及以后，我们做网页的时候将可以减少大量的JavaScript
html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：CSS基础：了解闭合浮动元素

下一篇：利用HTML、CSS 实现带表情的评论框的制作教程