移动端：左侧固定，右侧自适应

今天我们来总结一下移动端：左侧固定，右侧自适应布局的方法。
我们首先来看一下效果图。

移动端

接下来我们来分析实现移动端的四种方法。

• 方法一：浮动布局

#aside{
        float:left;
        width:200px;
        background-color: #f30;
    }
#content{
        margin-left:200px;
        background-color: #0f0;
    }

知识点
1.先让固定宽度的DIV浮动，使其脱离文档流
2.margin-left的值与固定DIV的宽度相等

• 方法二：margin负值

 #aside {
            float: left;
            margin-right: -200px;
            width: 200px;
            background-color: #f30;
        }
#content {
            float: right;
        }

#content #inner {
            margin-left: 200px;
            background-color: #0f0;
        }

知识点
1.使固定宽度的DIV脱离文档流
2.利用margin负值，可以使得后面的DIV与前面的DIV保持同行显示

• 方法三：calc()计算属性

  #aside {
            float: left;
            width: 200px;
            background-color: #f30;
        }
 #content {
            float: right;
            width: calc(100% - 200px);
            background-color: #0f0;
        }

知识点
1.使用calc计算属性的时候 运算符(- + 等等) 两边必须有空格
2.注意两个DIV必须一左一右浮动
3.calc的宽度必须要与固定宽度保持一致
4.此方法慎用，兼容性不强

• 方法四：flex

body {
            display: flex;
        }

 #aside {
            flex: 0 0 200px;
            background-color: #f30;
        }

#content {
            /* 等比例缩小 */
            flex: 1;
            background-color: #0f0;
        }

知识点
1.需要给父级DIV设置display:flex属性
2.固定宽度的DIV设置flex:0 0 200px即可
3.内容区域的DIV直接写flex:1即可

好了，今天的分享就到这里了！
愿你三冬暖，愿你春不寒；愿你天黑有灯，下雨有伞。

小晴天