一、HTML常用盒子模型
一般的HTML页面布局依次拥有以下几个板块：
页头header、滚动图片banner、主体部分main、页脚footer
其中页头包含logo及导航栏nav，主体部分左右排布分为左侧content主题内容板块及右侧sideBar侧边栏板块。
一般整个页面需要放入容器container中，以便调节居中、背景等样式。
以下是常用的div布局：
<body>
<div class="container"><!--整个页面主体-->
<div class="header"><!--页面上部页头-->
<div class="nav"><!--头部导航栏-->
</div>
</div>
<div class="banner"></div><!--页头下面的一个滚动图片位置-->
<div class="main"><!--页面主体-->
<div class="content"><!--内容-->
</div>
<div class="sideBar"><!--侧边栏-->
</div>
</div>
<div class="footer"></div><!--页脚-->
</div>
</body>
二、栅栏化
栅栏化布局可以很方便适配div盒子所占宽度的比例，一般用grid进行命名。
如将某一div分为1:4的两块。可用以下代码：
<style type="text/css">
.content{
background-color: green;
width: 960px;
height: 600px;
margin: 0 auto;
}
.aa1{
background-color: red;
height: 300px;
float: left;
}
.aa2{
background-color: blue;
height: 400px;
float: left;
}
.grid1{
width: 20%;
}
.grid4{
width: 80%;
}
</style>
<body>
<div class="content">
<div class="aa1 grid1">aa1</div>
<div class="aa2 grid4">aa2</div>
</div>
</body>
其中，grid的作用就是栅栏化后，按比例给div块横向切分，然后设置其宽度。