二.7 页面化妆师CSS之布局基础

CSS网页布局

认识布局

• 以最适合浏览的方式将图片和文字排放在页面的不同位置
• 布局模式有多种，不同的制作者会有不同的布局设计

1.经典的行布局

• 1.1经典的行布局
  • 基础的行布局
  • 行布局自适应
  • 行布局自适应限制最大宽
  • 行布局垂直水平居中

• 1.2经典的行布局

  • 行布局固定宽

  • 行布局某部位自适应

  • 行布局导航随屏幕滚动

• 1.3经典的行布局

  • 两列布局固定

  • 两列布局自适应

  • 三列布局固定

  • 三列布局自适应

• 1.4混合布局

  • 混合布局固定

  • 含混布局自适应

• 1.5圣杯布局

  • 

  • 布局要求

    • 三列布局，中间宽度自适应，两边定宽

    • 中间栏要在浏览器中优先展示渲染

    • 允许任意列的高度最高

    • 用最简单的CSS、最少的HACK语句

• 1.6双飞翼布局

  • 经淘宝UED的工程师针对圣杯布局改良后得出双飞翼布局

  • 去掉相对布局只需浮动和负边距

  • 布局特色

    • 兼容所有浏览器（IE6、现代浏览器）的终极布局方案

    • 目的都是左右两栏固定宽度，中间部分自适应

2.总结

1. 行布局  
2. 圣杯布局的流程方式  
3. 双飞翼的流程方式  

3.代码示例