1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>css3盒子模型</title> 5 <style> 6 .box3{ 7 width: 300px; 8 height: 100px; 9 /*设置css3盒子模型的父类*/ 10 display: -webkit-box; 11 display: -moz-box; 12 display: box; 13 14 background-color: #1d89cf; 15 } 16 .box3>section{ 17 /*设置css3盒子模型的子类，将他们平分*/ 18 -webkit-box-flex: 1; 19 -moz-box-flex: 1; 20 box-flex: 1; 21 22 border: 1px solid #fff; 23 text-align: center; 24 } 25 </style> 26 </head> 27 28 <body> 29 30 <div class="box3"> 31 <section>1</section> 32 <section>2</section> 33 <section>3</section> 34 </div> 35 36 </body> 37 </html>
上面就是css3盒子模型最基本的一个代码。
display:-*-box; 是定义盒子模型的父容器。
-*-box-flex: 1; 是定义盒子模型的子容器在父容器中的比例。
如是1,2,1，意思就是section1、2、3分别占25%，50%，25%。
而-*-box有如下属性：
-*-box-orient: horizontal | vertical | inline-axis | block-axis | inherit
用来确定父容器中的子容器的布局是水平布局还是垂直布局。（默认水平）
-*-box-direction: normal | reverse | inherit
用来确定子容器的排列顺序，如是reverse，就是将123在页面中变成了321的排列
-*-box-align:start（顶对齐） | end（底对齐） | center（居中对齐） | baseline | stretch（拉伸，拉伸到和父容器等高）
用来确定子容器的垂直对齐方式。
-*-box-pack: start | end | center | justify
用来确定子容器的水平对齐方式。