利用Div + CSS快速布局页面
在各类智能手机和平板出现前的很长一段时间里，Web网页都是通过表格进行布局的。
目前最为广泛采用的网页布局方式——Div + CSS
所谓Div + CSS,是指通过HTML「层」标签——<div></div>,辅以CSS中对该「层」宽度、排列等样式的定义，来实现网页布局的一种方式
用Div布局就远为灵活。首先，每一个<div></div>中都可以嵌入另外一个或几个<div></div>,子子孙孙可无穷尽也。另外，要修改某个Div的布局位置，也只需要相应的调整其CSS样式即可。
但是Div所谓的灵活也并非随心所欲、胡乱排布，它也是遵守一定的排布规则的
具体来说，Table的排布方式一般如下。
<table> <tr> <td></td> <td></td> </tr> </table>
而一般Div的排布方式也与之类似，只不过并没有表格<table></table>、行<tr></tr>、单元格<td></td>这许多层级，只是单一层级的<div></div>而已。
<div> <div> <div></div> <div></div> </div> </div>
那么问题来了，这些Div长得一毛一样啊，我怎么让浏览器知道它们是在什么位置的？这里就轮到CSS出场了。我们通过CSS样式的定义，再在HTML的<div></div>中调用这些样式，就可以实现Div和CSS的连接。
举例来说，如果我们在CSS中声明了一个样式——.row{width:100%;}，那么在HTML中就可以注明某一或某些Div适用这一类，来调用这一样式。如下，第二层的Div就使用了row这个样式。
<div> <div class=“row”> <div></div> <div></div> </div> </div>
将页面等分成12栏
分栏布局是使用Div+CSS布局网页的一种主要布局方式，主要通过把页面等分成12栏来实现
一般你看到的网站都会分成几栏？一栏？有的。两栏？也有。三栏？这个好像还比较常见。四栏？这个也比较常见。栏数再加下去也不是没有
那么这几个数字和12有什么关系呢？很简单，都能整除12。所以说，把页面分成12栏的好处就是——能利用合并栏来将页面等分成2、3、4栏，如下图
首先我们在CSS中，定义如下样式
.row {width:100%; display: flex; /*为了让同一row中的div横向排列，而非默认的纵向*/}
.col-1 {width: 8.33%; }
.col-2 {width: 16.67%; }
.col-3 {width: 25%; }
.col-4 {width: 33.33%;}
.col-5 {width: 41.67%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.64%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
有了这些不同宽度的column样式定义，我们就可以开始自由地排列页面中的Div啦，举例来说，假设下边图中的黑框就是我们网页中要布局的层，那我们就可以用其下的代码来实现。
<html>
<head>
<link rel="stylesheet"href="demo.css">
</head>
<bodystyle="text-align:center; ">
<!--第一个布局 -->
<div>
<divclass="col-7">first column</div>
<div>secondcolumn</div>
</div>
<!--第二个布局 -->
<divclass="row">
<divclass="col-12"></div>
</div>
<!--第三个布局 -->
<divclass="row">
<divclass="col-3">1</div>
<divclass="col-3">2</div>
<divclass="col-3">3</div>
<divclass="col-3">4</div>
</div>
</body>
</html>