div+css布局记扎

实际开发网站过程当中边碰壁边积累了一些div+css布局相关的小技巧，在这里作一些整理与你们一块儿探讨。本文章将间歇性更新。

1.div+css布局综述

div+css布局我的观点就是“盒子套盒子”的关系，body做为整个页面是最大的盒，而在这个最大的盒里面的第一层子盒们构成了全局布局，在这些子盒内部，又可能分出若干个盒以造成局部布局。所以，在规划一个网页的布局时，先区分出有哪些大的板块做为处于全局布局一级的大盒，再在这些大盒内部进行局部小盒子的布局以最终实现想要达到的页面布局效果。

例如，上面的布局图是比较常见的网页布局方式，A表明body，也即整个页面。这里强调整个页面是由于随着浏览器大小在用户的拖放下发生变化，body的大小长宽也在跟着改变，注意这一点有利于咱们避免一些问题（如使用绝对定位（position:absolute）却忽略了body的可变性致使在拖放下网页结构发生变化），同时这一点也能够被咱们所利用（下面会讲到）。其次，咱们能够比较明显地知道第一层子盒总共有三个，分别为B、C、D盒，他们占据了网页的上、中和下部分。

通常而言，B部分经常使用于网页的页眉，显示logo和导航菜单等，C部分做为网页主体，是网页主要内容所在的位置，D部分做为页尾，提供关于版权备案信息及相关链接等信息。咱们注意到，这三个部分并无占满整个body，这是正常的，咱们没法假设用户的屏幕大小以及其浏览器的实际显示大小，所以，合理的解决方案应该是让全局布局中的这些盒子居中放置，并给予呈现内容所须要的而且是合适的宽度值（为何不须要高度值呢，由于网页是容许下拉滚动浏览的，而横向的滚动每每会引发用户的不满）。那么什么是合适的宽度值呢，笔记本电脑/台式机的屏幕通常横向的像素均可以达到1024px以上，所以，只要在这个范围内(好比980px这个经常使用的数值)，均可以认为是合适的，而后让他们居中（经过设置margin:auto（或具体设置margin-left和margin-right:auto，在当前行只有一个元素时，设置auto可让left和right同样大））。至于那些没有填满的部分，能够对body使用恰当的背景色或背景图片解决。

三个全局盒内部的布局一般称为局部布局（其实咱们会发现，全局和局部都是相对而言的），他们是真正考验布局能力的地方，而这其间所涉及到的一些技巧也是我写这篇博客的缘由。

2.关于div

div标签的用途在于将一个或若干个元素组合成一个块级（有关块级与非块级元素能够参考http://www.cnblogs.com/double-bin/archive/2011/12/19/2293090.html）总体，从而咱们能够在布局中把一些元素做为一个总体集合来操纵（好比这些元素之间的相对位置要求固定，且他们与集合外元素之间的位置关系是经过这个集合来反应的），同时，这也有利于咱们对这些元素之间的相对位置采起更方便的布局策略(好比，有一个<a>但愿跟着一个<span>动而动，那么咱们就应该为它们创建一个div以包裹他们从而实现对他们的绑定)。

注意到html/css中的不少属性都是相对父元素而言的(如使用百分比定义width、height时，与父元素直接接触元素的margin属性等)，所以用一个div包裹一些元素也为利用这一点提供了条件(好比有时咱们但愿两个按钮(也能够是<a>)保持必定比率的大小关系，那么给他们一个div包裹起来，让width、height属性是父元素的百分比便可控制这一点)。此外，局部布局中，一个元素的定位也每每是经过跟父元素的margin关系获得。