<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>盒模型display:box;</title> </head> <body> <article class="wrap"> <section class="section sectionOne">01</section> <section class="section sectionTwo">02</section> <section class="section sectionThree">03</section> </article> </body> </html>
.wrap { width: 600px; height: 200px; border: 1px solid #000000; display: -webkit-box; /*这样元素就会内联化*/ display: -moz-box; display: box; -webkit-box-orient:horizontal; -moz-box-orient:horizontal; box-orient: horizontal; -webkit-box-direction: reverse; box-direction: reverse; -webkit-box-align: center; box-align: center; /*子容器的水平对其方式*/ -webkit-box-pack: justify; } .section { width: 50px; height: 80px; } .sectionOne { background: orange; /* -webkit-box-flex:1; box-flex:1; */ } .sectionTwo { background: purple; /* -webkit-box-flex:2; box-flex:2; */ /*margin: 0 50px;*/ height: 108px; } .sectionThree { background: green; width: 100px; }
注意：
给box设置vertical或block-axis属性(此属性是默认值)其效果似乎表现一致，
都可将子容器垂直排列，具体两者有什么实质差别暂时还没有搞清楚。
如果父容器选择vertical或block-axis属性对子容器进行垂直排列，
其是对父容器的高度进行分配划分。此时如果父容器定义了宽度值，
其子容器的宽度值设置则无效状态；如果父容器不设置宽度值，
其子容器的宽度值才有效并且取最大宽度值的子容器的宽度。
效果：
