经典CSS自适应布局

自适应之Margin负值布局之美：http://www.cnblogs.com/jscode/archive/2012/08/28/2660078.html
史上最全HTML与CSS布局技巧：http://www.imooc.com/article/2235
内滚动布局：http://mp.weixin.qq.com/s?__biz=MjM5NjA3ODI3Ng==&mid=206479284&idx=2&sn=b1f43f147853ebfe621929f64f568fcb&scene=1&srcid=0914q2ZkQjqortmszDh4ZO1k&key=dffc561732c2265153abe7529abb7c69b3c8ee84479d1c851b3263fff23bf9098a08cdcad3d378755aec4b702d27a85e&ascene=1&uin=MzEyNDk0Mjc1&devicetype=Windows+7&version=6102002a&pass_ticket=RLKRL57jQqYuFqasXRnC2segLF47qU98O7Mxh0rNVed5l7R%2Bf0Mut3%2F7mVudlHnN
两端对齐布局：http://www.zhangxinxu.com/wordpress/2011/03/displayinline-blocktext-alignjustify%E4%B8%8B%E5%88%97%E8%A1%A8%E7%9A%84%E4%B8%A4%E7%AB%AF%E5%AF%B9%E9%BD%90%E5%B8%83%E5%B1%80/
flex布局代码生成工具：https://ximan.github.io/mobile-lesson/lesson03/flexbox.html

Float与流体布局：

1、浮动与单侧尺寸固定的流体布局

.wrap{overflow: hidden;}
.img{width: 56px;float: left;}
.text{margin-left: 76px;}

<div class="wrap">
　　<div class="img">图片</div>
　　<div class="text">内容内容内容</div>
</div>

或

.view{ height: 200px; background: #ccc;}
#id2{margin-left: 200px; background: #666;}
#id1{position: absolute; left: 0;top:0; width: 200px;}

<div class="view" id="id2">内容栏要在前面利于SEO</div>
<div class="view" id="id1">侧边栏用了绝对定位</div>

或

#wrap{float: left;width: 100%}
#id2{margin-left: 200px; background: #666;}
#id1{float: left; margin-left: -100%; width: 200px;}

<div id="wrap">
    <div class="view" id="id2">
        内容栏要在前面利于SEO,添加了一个外层WARP层，用于左浮动，
        <br>warp层
        <br>内容层
    </div>
</div>
<div class="view" id="id1">侧边栏:使用负外边距离</div>

2、浮动与右侧尺寸固定的流体布局

.wrap{overflow: hidden;}
.img{width: 56px;float: right;}
.text{margin-right: 76px;}

<div class="wrap">
　　<div class="img">图片</div>
　　<div class="text">内容</div>
</div>

或

.wrap{overflow: hidden;}
.text-wrap{float: left;width: 100%;}
.text{margin-right: 76px;}
.img{float: left;width: 56px;margin-left: -56px;}

<div class="wrap">
　　<div class="text-wrap">
    <div class="text">内容</div>
    </div>
　　<div class="img">图片</div>
</div>

3、浮动与两侧皆自适应的流体布局

.text{float: left; margin-right: 20px;}
.img{display: table-cell;*display: inline-block;/*兼容IE7*/}

<div class="wrap">
　　<div class="text">内容</div>
　　<div class="img">图片</div>
</div>


4、常见的三列布局
浮动方法：
.left{float: left;}
.right{float: right;}
.center{text-align: center;}

<div class="wrap">
　　<div class="left">左边</div>
　　<div class="right">右边</div>
　　<div class="center">中间</div>
</div>

或
.wrap{overflow: hidden;}
.center{float: left;width: 100%;}
.center .middle{margin: 0 210px;height: 200px;}
.left, .right{float: left;width: 200px;height: 200px;}
.left{margin-left: -100%;}
.right{margin-left: -200px;}

<div class="wrap">
　　<div class="center">
        <div class="middle">中间</div>
    </div>
    <div class="left">左边</div>
　　<div class="right">右边</div>
</div>


绝对定位方法：
.view{ height: 200px; background: #ccc;}
#id3{margin-left:200px; margin-right:200px; background:red; min-width:200px;}
#id1{position:absolute; left:0; top:0; width:200px;}
#id2{float:right; width:200px; position:absolute; right:0; top:0;}
<div class="view" id="id3">顺序1、自适应</div>
<div class="view" id="id1">顺序2、使用绝对定位</div>
<div class="view" id="id2">顺序3、使用绝对定位</div>


5、遮罩层布局 
.wrap{width: 200px;height: 200px;background: #fff;position: relative;} 
.mask{position: absolute;left: 0;right: 0;top: 0;bottom: 0;background: rgba(0,0,0,0.6);}//不兼容IE6 
<div class="wrap"> 　　
　　<div class="mask"></div> 
</div>


6、百分比高度自适应布局(常见的移动端九宫格单页应用布局) 
.wrap{position: absolute;left: 0;right: 0;top: 0;bottom: 0;} 
.wrap li{position: relative;float: left;width: 33.3%;height: 33.3%;} 
<ul class="wrap"> 　　
　　<li>111</li> 　　
　　<li>222</li> 　　
　　<li>333</li> 　　
　　<li>444</li> 　　
　　<li>555</li> 　　
　　<li>666</li> 　　
　　<li>777</li> 　　
　　<li>888</li> 　　
　　<li>999</li> 
</ul> 


7、移动端absolute与整体页面布局(头部、尾部和侧边栏都是fixed效果，这样可以有效地避免position: fixed出现的诸多问题) 
html, body, .page {height: 100%; width: 100%;overflow: hidden;} 
.page {position: absolute; left: 0; top: 0;} //body降级，div全屏拉伸 
header,footer{position: absolute;left: 0;right: 0;} 
header{height: 48px;top: 0;} 
footer{height: 52px;bottom: 0;} aside{width: 200px;position: absolute;left: 0;top: 0;bottom: 0;} 
.content{position: absolute;top: 48px;bottom: 52px;left: 200px;(如果右侧栏)overflow: hidden;} 
.mask{position: absolute;left: 0;right: 0;top: 0;bottom: 0;background-color: rgba(0,0,0,0.5);z-index: 9;} //全屏覆盖必须与page平级 
<div class="page"> 　　
　　<header>头部</header> 　　
　　<div class="content">主体内容</div> 　　
　　<aside>侧边栏</aside> 　　
　　<footer>尾部</footer> 
</div>
<div class="mask">遮罩层</div> 


8、无依赖的绝对定位布局 
.wrap{width: 200px;height: 200px;border: 1px solid #000;} 
.tj, .sc{padding: 0 5px;line-height: 20px;background-color: orange;color: #fff;position: absolute;} 
.sc{background-color: blue;margin-left: -42px;} 
<div class="wrap"> 　　
　　<span class="tj">推荐</span> 　　
　　<img src="" alt="" width="200" height="200"><span class="sc">收藏</span> <!--注意这里的span要紧跟在img标签后，不能换行--> 
</div>

9、移动端等分布局
<ul class="equal-list">
    <li></li>
    <li></li>
    <li></li>
    ...
</ul>
// flex
.equal-list{
    display: flex;
}
.equal-list li{
    flex: 1;
}

// table-cell
.equal-list{
    display: table;
    table-layout: fixed;
    width: 100%;
}
.equal-list li{
    display: table-cell;
}