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 布局的环境下，容器的分列次序改变了。 （编辑：河北网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
