CSS学习笔记（十）网页布局

1、行布局

1. 基础的行布局
   页面由头部、banner、内容、底部组成。头部固定不动。
   
   
2. 行布局自适应
   设置width为100%，而不是固定值，则元素始终与窗口宽度一致。或者设置90%，使元素左右有间距。
3. 行布局自适应限制最大宽
   设置max-width属性，当窗口宽度大于max-width时，元素宽度为max-width；当窗口宽度小于max-width时，元素宽度为width。
4. 行布局垂直水平居中

水平居中：

margin:0 auto;

水平并垂直居中：

.container{
width:800px;
height:200px;
backgroung:red;
position:absolute;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-400px;
}

2、列布局

• 两列布局固定
  使用float使两个元素左右排列
  
• 两列布局自适应
  将两个元素的width由固定值改为百分比
  
  
• 三列布局固定
  与两列布局类似
  
  
• 三列布局自适应
  与两列布局类似

3、混合布局

• 混合布局固定
  
  
• 混合布局自适应
  将所有元素的width改为百分比

4、圣杯布局

常见于网站管理后台。

布局要求：

• 三列布局，中间宽度自适应，两边定宽
• 中间栏要在浏览器中优先展示渲染
• 允许任意列的高度最高
  
  
  
  

5、双飞翼布局

经淘宝UED的工程师对圣杯布局改良后得出。
去掉相对布局，只需要浮动和负边距。
如果把三栏布局比作一只大鸟，可以把main看作鸟的身体，sub和extra使鸟的翅膀。这个布局实现的思路是，先把最重要的身体部分放好，然后将翅膀移动到适当的地方，其实跟圣杯布局差不多。


双飞翼的好处：
1、主要的内容先加载优化；
2、兼容目前所有的主流浏览器，包括IE6；
3、实现不同的布局方式，可以通过调整相关的CSS属性即可实现。