使用盒模型实现多栏布局
前面讲解display属性时介绍过多个属性值，这些属性值分别用于定义不同的“盒模型”。CSS 3还提供了一个box属性值，通过该属性值可以更好地实现多栏布局。需要指出的是，主流浏览器目前暂不支持标准的box属性值，因此实际使用时需要添加浏览器厂商前缀，例如-moz-、-webkit-等。
通过float、inline-box方式实现的多栏布局相比，使用box属性值来实现多栏布局可以让多个栏目的底部对齐。
例子
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 盒模型实现多栏布局 </title>
<style type="text/css">
body{
margin:0px;
}
div#container {
display: box;
display: -moz-box;
display: -webkit-box;
width: 960px;
text-align: left;
}
#container>div {
border: 1px solid #aaf;
/* 设置HTML组件的width属性包括边框 */
box-sizing: border-box;
-moz-box-sizing: border-box;
border-radius: 12px 12px 0px 0px;
background-color: #ffc;
padding:5px;
}
</style>
</head>
<body>
<div style="margin:auto;text-align:center;">
<div id="container">
<div style="width:220px">
<h2>疯狂软件开班信息</h2>
<ul>
<li>2011年11月10日 已满已开班</li>
<li>2011年12月02日 爆满已开班</li>
<li>2012年02月08日 已满已开班</li>
</ul>
</div>
<div style="width:500px;">
<h2>疯狂软件介绍</h2>
疯狂Java品牌专注高级软件编程，以“十年磨一剑”的心态打造全国最强（不是之一）疯狂Java学习体系：包括疯狂Java体系原创图书，疯狂Java学习路线图，这些深厚的知识沉淀已被大量高校、培训机构奉为经典。<br/>
疯狂Java怀抱“软件强国”的理想，立志以务实的技术来改变中国的软件教育。经过八年沉淀，疯狂Java强势回归。疯狂Java创始人李刚，携疯狂Java精英讲师团队肖文吉、李韩飞、黄勇、陈辉等老师将带给广大学习者“非一般”的疯狂。
</div>
<div style="width:240px">
<h2>公司动态</h2>
<ul>
<li>《疯狂Java讲义》(第2版)上市</li>
<li>泰豪电网软件公司来校召开现场招聘会</li>
<li>疯狂学子赴武汉光谷软件园入职</li>
<li>新华南方来校现场招聘</li>
</ul>
</div>
</div>
</div>
</body>
</html>
分栏布局与多栏布局的区别
分栏布局与多栏布局是不同的，分栏布局只是将一篇文章分成多个栏目显示，HTML元素对内容的分栏位置是不确定的，因此分栏布局只适合显示单篇文章；多栏布局则是由开发者自己控制将页面分成多栏，分栏位置可以自己控制，因此更适合页面布局效果。
垂直排列的子布局
CSS 3为box盒模型提供了如下属性。
➢ box-orient：设置box盒模型里子元素的排列方向。该属性支持如下两个属性值。
□ horizontal：box盒模型里的子元素水平排列。如果没有为子元素指定高度，水平排列的box盒模型里子元素的高度等于父容器的高度。
□ vertical：box盒模型里的子元素垂直排列。如果没有为子元素指定宽度，垂直排列的box盒模型里子元素的宽度等于父容器的宽度。
➢ box-ordinal-group：设置box盒模型里子元素的显示顺序。
➢ box-flex：设置box盒模型里子元素自适应宽度的比例。例如，box盒模型多余的空白宽度为150px，其中第一个子元素设置box-flex为1，第二个子元素设置box-flex为2，那么多余的空白宽度将会分给第一个元素的宽度为1501/（1＋2）即50px，分给第二个子元素的宽度为1502/（1＋2）即100px。
例子
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 垂直排列 </title>
<style type="text/css">
div#container {
border: 1px solid black;
padding: 5px;
width: 600px;
height: 140px;
display: box;
display: -moz-box;
display: -webkit-box;
box-orient: vertical;
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
}
div>div {
border: 1px solid #aaf;
/* 设置HTML组件的width属性包括边框 */
box-sizing: border-box;
-moz-box-sizing: border-box;
border-radius: 12px 12px 0px 0px;
padding:5px;
}
</style>
</head>
<body>
<div id="container">
<div>栏目一</div>
<div>栏目二</div>
<div>栏目三</div>
</div>
</body>
</html>
水平排列的子布局
将box盒模型里子元素的排列方式改为水平排列，并使用box-ordinal-group属性指定元素的显示顺序。
例子
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 水平排列 </title>
<style type="text/css">
div#container {
border: 1px solid black;
padding: 5px;
width: 600px;
height: 140px;
display: box;
display: -moz-box;
display: -webkit-box;
box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-box-orient: horizontal;
}
div>div {
border: 1px solid #aaf;
/* 设置HTML组件的width属性包括边框 */
box-sizing: border-box;
-moz-box-sizing: border-box;
border-radius: 12px 12px 0px 0px;
padding:5px;
}
</style>
</head>
<body>
<div id="container">
<div style="box-ordinal-group:2;-moz-box-ordinal-group:2;
-webkit-box-ordinal-group:2;">栏目一</div>
<div style="box-ordinal-group:1;-moz-box-ordinal-group:1;
-webkit-box-ordinal-group:1;">栏目二</div>
<div style="box-ordinal-group:2;-moz-box-ordinal-group:3;
-webkit-box-ordinal-group:3;">栏目三</div>
</div>
</body>
</html>
通过使用box-flex属性则可让box盒模型中的子元素自动占满整个父容器。例如，将页面中第一个子元素的box-flex设为1，第三个box-flex设为3。
例子
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 水平排列 </title>
<style type="text/css">
div#container {
border: 1px solid black;
padding: 5px;
width: 600px;
height: 140px;
display: box;
display: -moz-box;
display: -webkit-box;
box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-box-orient: horizontal;
}
div>div {
border: 1px solid #aaf;
/* 设置HTML组件的width属性包括边框 */
box-sizing: border-box;
-moz-box-sizing: border-box;
border-radius: 12px 12px 0px 0px;
padding:5px;
}
</style>
</head>
<body>
<div id="container">
<div style="box-flex:1;-moz-box-flex:1;
-webkit-box-flex:1;">栏目一</div>
<div>栏目二</div>
<div style="box-flex:3;-moz-box-flex:3;
-webkit-box-flex:3;">栏目三</div>
</div>
</body>
</html>
注：本博客内容节选自李刚编著的疯狂HTML 5/CSS 3/JavaScript讲义 ，详细内容请参阅书籍。