CSS 盒子模型(Box Model)所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>竖向显示三个栏目</title>
<style type="text/css">
.container {
display:-webkit-box;
display:-moz-box;
display:box;
-webkit-box-orient:vertical;
-moz-box-orient:vertical;
box-orient:vertical;
}
.container div {
color:#FFF;
font-size:12px;
padding:10px;
line-height:20px;
}
.container div ul {
margin:0;
padding-left:20px;
}
.container .left-aside {
background-color:#F63;
}
.container .center-content {
background-color:#390;
}
.container .right-aside {
background-color:#039;
}
</style>
<body>
<div class="container">
<div class="left-aside">
<h2>菜单</h2>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>活动沙龙</li>
</ul>
</div>
<div class="center-content">
<h2>内容</h2>
<p>盒布局是CSS3发展的新型布局方式，它比传统的浮动布局方式更加完善、更加灵活，而使用方法却极为简单。</p>
<p>开启盒布局方法，就是设置display属性值为box（或inline-box）。</p>
</div>
<div class="right-aside">
<h2>工具</h2>
<ul>
<li>天气预报</li>
<li>货币汇率</li>
</ul>
</div>
</div>
</body>
</html>
Processed:
0.028, SQL:
10
