CSS3盒模型新属性：box-flex实战教程

本文档是一篇关于CSS3中新增盒模型属性——`display:box`和`box-flex`的教程。CSS3引入的这些属性扩展了传统的盒模型，特别是对于实现更灵活和动态的布局至关重要。`box-flex`允许子元素在父容器中按照指定的比例分配空间，使得垂直等高、水平均分或自定义比例的布局成为可能。 `display:box`是CSS3中的一个实验性特性，虽然尚未被所有主流浏览器广泛支持，但Firefox、Opera和Chrome/Safari可以通过私有前缀 `-moz-`, `-o-`, 和 `-webkit-` 来实现类似的功能。在HTML示例中，作者使用以下结构： ```html <article> <section class="sectionOne">01</section> <section class="sectionTwo">02</section> <section class="sectionThree">03</section> </article> ``` CSS部分设置了`.wrap`类作为父容器，设置其宽度和高度，并且使用`display`属性来启用box模型： ```css .wrap { width: 600px; height: 200px; display: -moz-box; display: -webkit-box; display: box; } ``` 子元素`.sectionOne`, `.sectionTwo`, 和 `.sectionThree` 分别应用了不同的`box-flex`值：`.sectionOne`为3，`.sectionTwo`为2，`.sectionThree`为1。这意味着三个子元素会将父容器的600px宽度均匀地分成6份，每个子元素所占的宽度比例与其`box-flex`值相对应。 需要注意的是，当使用`display:box`时，由于内联元素的特性，设置`margin: 0 auto`无法实现居中对齐，这时需要调整父容器的`text-align`属性为`center`才能使子元素水平居中。 总结来说，这篇教程详细介绍了如何利用CSS3的盒模型扩展功能，尤其是`box-flex`属性，来实现更为灵活的页面布局。虽然目前存在浏览器兼容性问题，但通过了解这些新特性及其私有前缀，开发者可以提前为未来浏览器更新做好准备。