absolute定位实现移动布局

今天再次拜读了一遍张大神的文章，读到可以用绝对定位实现移动端fiex效果的布局，于是在拜读完之后动手实践了一下。
先上图。

效果描述：头尾固定，侧边栏固定，中间内容块自适应，自由滑动。

html结构

<div class="top"></div><div class="content"></div><div class="side"></div><div class="bottom"></div>

css样式

<style type="text/css">    html,body{        width: 100%;        height: 100%;        margin: 0;        padding: 0;        font-size: 100px;           }    .top{        position: absolute;        height: 1rem;        top: 0;        left: 0;        right: 0;        background-color: #000;    }    .content{        position: absolute;        top: 1rem;        bottom: .8rem;        left: 1.5rem;        right: 0;        background-color: #fff;        overflow: auto;    }    .side{        position: absolute;        width: 1.5rem;        left: 0;        top: 1rem;        bottom: .8rem;        background-color: #333;    }    .bottom{        position: absolute;        height: .8rem;        bottom: 0;        left: 0;        right: 0;        background-color: #666;    }</style>

实现中间内容区的自由滑动是：overflow: auto;的效果。
侧边栏当然也是可以去掉实现整体网站布局啦。

其实里面我不仅仅是简单的塞了一些文字和图片，这些其实也是一个个的小例子。

1.图像与文字的流体布局（图一）

<div class="auto">    <img src="lovers_0.png" alt="">这次来成都的网球大咖里，迪米特洛夫1米91、凯文·安德森身高2米03、超级新星克耶高斯1米93、这里面最矮的是蒂姆，身高有1米85，他们都是真正的“网球巨人”。当下，网球球手的身高都可以叫板篮球明星了，那他们的身高优势是什么概念？网球尤其注重发球，而身高对于发球至关重要，高个选手</div>

.auto{    margin-left: .8rem;//给图片空出位置}.auto img{    width: .64rem;    height: .64rem;    float: left;    margin-left: -0.8rem;//图片浮动之后位置调整}

或者是这种布局

<img src="lovers_0.png" alt=""><div class="auto">    这次来成都的网球大咖里，迪米特洛夫1米91、凯文·安德森身高2米03、超级新星克耶高斯1米93、这里面最矮的是蒂姆，身高有1米85，他们都是真正的“网球巨人”。当下，网球球手的身高都可以叫板篮球明星了，那他们的身高优势是什么概念？网球尤其注重发球，而身高对于发球至关重要，高个选手</div>

img{    float: left;    width: .64rem;    height: .64rem;} .auto{    margin-left: .8rem;}

实现很简单，就不多说了，看下一条。

2.利用padding形成标准的正方形（自适应）（图二上）

<div class="square"></div>

.square{    padding: 50%;    background-color: rgba(0,0,0,.1);}

3.利用定位形成水平垂直居中（图二上）

<li class="imgc">    <img class="center" src="lovers_0.png" alt=""></li>

.imgc{    position: relative;}.center{    position: absolute;    top: 0;    bottom: 0;    left: 0;    right: 0;    margin: auto;//定位之后，一定要设置margin属性，不然不会居中。原理是margin填充空白。}

4.利用padding实现两栏等高布局（图二下）

<li class="box">    <!-- 等高布局-->    <div class="orange">左黄 这次来成都的网球大咖里，迪米特洛夫1米91、凯文·安德森</div>    <div class="green">右绿 这次来成都的网球大咖里，迪米特洛夫1米91、凯文·安德森</div></li>

.box{    overflow: hidden;    resize: vertical;//调整大小，其实我没发现有什么影响}.orange{    float: left;    background-color: orange;}.green{    float: left;    background-color: green;}.orange,.green{    width: 50%;    margin-bottom: -10rem;    padding-bottom: 10rem;//主要是元素要给一个比较大的padding值和一个比较大的margin负值，相当于抵消了，模拟等高，具体其他等高方法可以参考 [http://www.cnblogs.com/xiaohuochai/archive/2016/05/04/5457127.html]}

5.利用行高和对齐方式，实现不定大小的图片和不定行数的文字垂直居中

<li class="box2">    <!-- 图片垂直居中 利用行高 文字处理的话，转化为inline-block-->    <img src="lovers_0.png" alt=""></li>

.box2{    text-align: center;    line-height: 3rem;}.box2>img{    vertical-align: middle;}

因为img默认就是inline-block显示，所以不用转化，如果是div或者span等，都需要转化，这样容器中就可以放文字了。
如果需要兼容IE8-的话，就需要调整一下了，在img或其他标签后面添加 i 标签，设置

i{    display:inline-block;    height:100%;    vertical-align: middle;}

好了，这是我今天早上的学习实践成果，分享给大家，keep learing！