在设计每个页面的时候，我们先要想好页面的整体框架后再写，这样思路清晰，页面也整齐，不容易出错且容易找到出现的问题。一般我们是将页面分为上、中、下三个大容器里面。再往容器里面添加小块。小块与小块、小块与大块之间的关系就要用到浮动与定位的组合排版。
上面的布局是一个思路的例子，布局调整的时候，我们应该先按先后顺序完成上、中、下三部分，还应该用border描出边框线帮助我们定位，做好了之后再取消掉边框做下个部分，以免边框太多误导我们定位。定位的时候可能用到的工具有 border、margin、padding。下面我先用一张图来表示他们之间的关系。
margin：
外边距：以边框为参考对象，边框到边缘的距离（边框到其父级间的距离），允许有负值。
padding：
内边距：以边框为参考对象，块级容器到边框的距离，当改变内边距的时候，内部块级不会改变，而边框的面积会改变大小。padding的值不允许有负值。
border：
边框：是围绕元素内容和内边距的一条或多条线。
布局时，我们还会用到的工具有浮动float、和定位position。
float：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。当元素被浮动后，其原来的位置消失，会被其他内容填充。
position：分为相对定位（relative）与绝对定位（absolute）。
相对定位：设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。
绝对定位：设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。