布局
1.页面居中
html： <body>
<div class="wrapper"></div>
</body>
css: body{text-align:center;}<!--IE6及以下不支持margin：0 auto；-->
wrapper{width:920px;margin:0 auto;text-align:left;}
2.基于浮动
两栏：
<div class="content">
<div class="main"></div><!--先写，利于主要内容优先加载（下同）-->
<div class="side"></div>
</div>
css: .content .main{width:600px;padding-right:20px;float:right;display:inline;}<!--display:inline;用于防止IE下浮动元素的双边距bug（下同）-->
.content .side{width:300px;float:left;display:inline;}
三栏：
<div class="content">
<div class="main">
<div class="main"></div>
<div class="side"></div>
</div>
<div class="side"></div>
</div>
css: .content .main{width:600px;padding-right:20px;float:right;display:inline;}
.content .side{width:300px;float:left;display:inline;}
.cintent .main .main{width:350px;float:left;display:inline;}
.content .main .side{width:200px;padding-right:20px;float:right;display:inline;}
3.流式布局
流式布局：能够相对于浏览器窗口进行伸缩的布局（使用百分数设置窗口尺寸）
<div class="content">
<div class="main">
<div class="main"></div>
<div class="side"></div>
</div>
<div class="side"></div>
</div>
设计宽度：920px，大多数浏览器窗口：1250px；百分数为：（920/1250）*100%=73.6%
css:body{text-align:center;}
.content{width:73.6%;margin:0 auto;text-align:left;max-width:125em;min-width:62em;}<!--max-width:125em;用于确保文本行的长度适合阅读；min-width:62em;用于适应比较小的窗口，使布局不会太挤-->
.content .main{width:75.2%;float:right;display:inline;}
.content .side{width:32.6%;float:left;display:inline;}
.cintent .main .main{width:58.3%;float:left;display:inline;}
.content .main .side{width:33.3%;padding-right:3.3%;float:right;display:inline;}
4.弹式布局
弹式布局：使字号变大时整个布局随之变大，使行长保持在可阅读状态。（相对于字号来设置尺寸）
<div class="content">
<div class="main">
<div class="main"></div>
<div class="side"></div>
</div>
<div class="side"></div>
</div>
将固定宽度布局转换为弹性布局的技巧是设置基字号，让1em大致等于10px，大多浏览器默认字号为16px，10/26*100%=62.5%
css：body{font-size:62.5%;text-align:center;}
.content{width:92em;margin:0 auto;text-align:left;max-width:95%;min-width:47%;}
.content .main{width:75.2%;float:right;display:inline;}
.content .side{width:32.6%;float:left;display:inline;}
.cintent .main .main{width:58.3%;float:left;display:inline;}
.content .main .side{width:33.3%;padding-right:2em;float:right;display:inline;}
5.布局中的图像
在流式与弹式布局中，图像宽度是固定的，所以对布局会有影响
1.大区域图像，可考虑将图像设置为背景图像；
2.将容器元素宽度设置为100%，并且设置overflow：hidden；
3.如果是窄的图像列，可以给图像设置百分数宽度，然后添加max-width属性值为图像尺寸；
