如何模块化页面布局

 

板块划分

1. 上中下结构
   1. 最常见
   2. 一般用于页面的主体布局
   3. 每个板块单独创建一个盒子，然后将它们以relative的方式定位在页面中方便其子元素后期浮动的需要
   4. 采用relative的好处在于可以根据需要调整其在页面中的位置，上下边距大小等问题
2. 左右结构
   1. 一般用于某个板块内部的布局
   2. 视情况而定是否使用浮动和哪种浮动
      1. 如果元素间没有特殊的排版需求，可以不浮动
      1. 采用浮动的时候因为父元素的已经添加了相对浮动所以参照的边界非常清晰，只需要找到父元素就可以了
3. 浮动结构
   1. 这种结构一般用在一些固定在页面某个位置或者在页面中不断移动的元素
   2. 在书写结构的时候单独写在主体结构的外部，将其父元素设置为body，方便其在整个页面中的位置操作

• 以上三种机构基本囊括结构布局的所有类型