HTML+CSS纯静态页面布局的理解（一）

总结：
一，总的来说就是一个拆解的过程。类比于树状结构，不断划分板块。层层细化，然后把每个板块作好。
二，板块或者元素的布局，依据我目前掌握的知识，有以下几点：
1，利用文档流的基本性质。
2，利用浮动float。
3，利用定位position。
当然这三种都得基于理解了盒模型之后再进行，利用盒模型配合着这三种方式进行。

接下来展开说明这两点感悟。
第一点：将总的页面划分为几个板块，然后每个板块又划分为几个部分，以此类推，一直划分下去。

例如上图，拿过来之后，就可以划分为：header,content,footer三个大的部分。

然后再拿头部来划分：依旧是划分为三个部分

接着再拿顶部来划分：可以划分为一个居中的盒子，里面左浮动一个，右浮动一个子盒子。

再把左边的子盒子进行划分：

又划分为左右两个小盒子，左边的小盒子里面放上三个a标签，右边的放5个li标签。每个盒子的高度设置好，或者让子元素把高度撑开。就可以把这一小单元的写好。其他划分的小单元以此类推。
把握好整体与局部的关系，这种思路，就是先整体，后局部，当全部局部构建完成时，整体就出来了。

第二点，结合盒模型的知识，综合利用文档流的性质，浮动的性质，以及定位的性质，来布局。

例如上图这种，多个盒子并列一行的，明显有高度，但又并列，则可以设置类型为inline-block或者是float来解决，不过值得注意的是float之后，元素的宽度不再具有流动性，而是表现为包裹性了，当然也可以自行设定宽高属性。

而类似于上图这种的，当然前两行是利用文档流，块状元素独占一行的属性来进行了！
而对于定位，它的定义，会使得元素脱离文档流，想要定义到盒子的哪个位置你自己说了算。