CSS3 灵活的盒子模型(Flexible Box Module)–1
|
CSS3 标准里引入了一些新的盒子模型参数，在 CSS2 的基础上，我们将能更灵活地调整页面上各个容器的大小和位置。详细的说明可以看这个文档。 通过学习和测试，我发现这种新的盒子模型布局对建立自适应布局的页面带来很大的好处。在这篇文章中，我的所有例子都基于以下 HTML代码： <body><div id="box1">1</div> <div id="box2">2</div> <div id="box3">3</div> </body> 容器的排列在通常的情况下，页面上所有容器的顺序都按照载入的顺序排列。而使用 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 结构的情况下，容器的排列顺序改变了。 （编辑：辽源站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |