经典CSS自适应布局

标签：

自适应之Margin负值布局之美：http://www.cnblogs.com/jscode/archive/2012/08/28/2660078.html

Float与流体布局：

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

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

<div class="wrap">
　　<div class="img">图片</div>
　　<div class="box">内容内容内容</div>
</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>

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">
　　<di class="mask"></di>
</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="" width="200" height="200"><span class="sc">收藏</span> <!--注意这里的span要紧跟在img标签后，不能换行-->
</div>

经典CSS自适应布局

标签：

原文地址：http://www.cnblogs.com/gyx19930120/p/4510172.html