盒布局：
代码：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>三栏网页</title> 6 <style type="text/css"> 7 .container{ 8 /*开启盒布局 */ 9 display: -webkit-box; 10 display: -mox-box; 11 display: box; 12 -webkit-box-orient: horizontal; 13 -moz-box-orient: horizontal; 14 box-orient:horizontal; 15 /* -webkit-box-direction:reverse; 16 -moz-box-direction:reverse; 17 box-direction:reverse;*/ 18 } 19 /*盒的总体布局 */ 20 .container div{ 21 color: #FFFFFF; 22 font-size: 12px; 23 padding: 10px; 24 line-height: 20px; 25 } 26 /*通过设置盒的ul来设置盒子宽度 */ 27 .container div ul{ 28 margin: 0; 29 padding-left: 20px; 30 } 31 /*左栏*/ 32 .container .left-aside{ 33 background-color: #40E0D0; 34 /* -webkit-box-ordinal-group: 4; 35 -moz-box-ordinal-group: 4; 36 box-ordinal-group: 4;*/ 37 /*弹性边框，自动补齐缺少的 */ 38 -webkit-box-flex:5; 39 -moz-box-flex:5; 40 box-flex:5; 41 } 42 /*中间栏*/ 43 .container .center-content{ 44 background-color: #FF3321; 45 width: 400px; 46 -webkit-box-flex:2; 47 -moz-box-flex:2; 48 box-flex:2; 49 } 50 /*右栏*/ 51 .container .right-aside{ 52 background-color: #C0C0C0; 53 /*-webkit-box-ordinal-group: 3; 54 -moz-box-ordinal-group: 3; 55 box-ordinal-group: 3;*/ 56 -webkit-box-flex:5; 57 -moz-box-flex:5; 58 box-flex:5; 59 } 60 </style> 61 </head> 62 <body> 63 <div class="container"> 64 <div class="left-aside"> 65 <h2>菜单</h2> 66 <ul> 67 <li>HTML５</li> 68 <li>CSS 3</li> 69 <li>活动沙龙</li> 70 <li>研发小组</li> 71 </ul> 72 </div> 73 74 <div class="center-content"> 75 <h2>内容</h2> 76 <p>盒布局是CSS 3发展的新型布局方式，它比传统的浮动布局更加完善、更加灵活、 77 而使用这种方法却极为简单。</p> 78 <p>开启盒布局方法，就是设置display属性值为box（或lnline-box）。</p> 79 </div> 80 81 <div class="right-aside"> 82 <h2>工具</h2> 83 <ul> 84 <li>天气预报</li> 85 <li>货币汇率</li> 86 </ul> 87 </div> 88 89 </div> 90 </body> 91 </html>
开启盒布局：display:box
布局方向：box-orient : horizontal | vertical | inline-axis | block-axis | inherit
horizontal：水平方向，从左到右
vertical：垂直方向，从上到下
inline-axis：默认值，表示盒子元素沿着内联轴编排它的子元素，表现为横向编排
block-axis：表示元素沿着块轴编排它的子元素，表现为垂直编排
布局顺序：box-direction：normal | reverse | inherit
normal：默认值，正常顺序，从左到右，从上到下
原文：http://www.cnblogs.com/chenluomenggongzi/p/5185469.html
