经典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;}


　　
图片
　　
内容内容内容


或

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

内容栏要在前面利于SEO
侧边栏用了绝对定位

或

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


    

        内容栏要在前面利于SEO,添加了一个外层WARP层，用于左浮动，
        
warp层
        
内容层
    

侧边栏:使用负外边距离

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

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


　　
图片
　　
内容


或

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


　　

    
内容
    
　　
图片


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

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


　　
内容
　　
图片



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


　　
左边
　　
右边
　　
中间


或
.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;}


　　

        
中间
    
    
左边
　　
右边



绝对定位方法：
.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;}
顺序1、自适应
顺序2、使用绝对定位
顺序3、使用绝对定位


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 
 　　
　　
 



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


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平级 
 　　
　　
头部
 　　
　　
主体内容
 　　
　　
侧边栏
 　　
　　
尾部
 

遮罩层
 


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;} 
 　　
　　推荐 　　
　　收藏  


9、移动端等分布局

    

    

    

    ...

// 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;
}

转载于:https://www.cnblogs.com/gyx19930120/p/4510172.html