CSS3弹性盒模型 - html/css语言栏目：html.css - 自学

2024/04/14 · admin

Css3引入了新的盒模型——弹性盒模型，该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间。这与XUL（火狐使用的用户交互语言）相似，其它语言也使用相同的盒模型，如XAML 、GladeXML。

使用该模型，可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局。本文的例子使用以下的HTML代码:

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

传统的盒模型基于HTML流在垂直方向上排列盒子。使用弹性盒模型可以规定特定的顺序，也可以反转之。要开启弹性盒模型，只需设置拥有子盒子的盒子的display的属性值为box（或inline-box）即可。

1.display: box;

水平或垂直分布

“box-orient”定义分布的坐标轴：vertical和horizional。这两个值定义盒子如何显示，

1.body{ 2. display: box; 3. box-orient: horizontal; 4.}

反向分布

“box-direction”可以设置盒子出现的顺序。默认情况下，只需定义分布坐标轴——box随html流分布。如果为水平坐标轴，则从左到右分布；垂直坐标轴则从上到下分布。定义“box-direction”的属性值为“reverse”，则反转盒子的排列顺序。

1.body {

提交

更多文章推荐