css实现左边定宽，右边自适应布局

在布局中，常常出现左边定宽，右边自适应布局的情况，抽象出来的代码是：

//css代码
* {
            padding: 0;
            margin: 0;
            color: #fff;
            font-size: 30px;
            font-weight: bold;
            text-align: center;
            box-sizing: border-box;
        }
        aside {
            width: 200px;
            height: 200px;
            padding-top: 75px;
            background: #5A6A94;
        }
        section {
            height: 200px;
            padding-top: 75px;
            background: #BE4F4F;
        }
 
//html代码
<!-- 左边定宽 -->
    <aside class="left">Left</aside>
    <!-- 右边自适应 -->
    <section class="right">Right</section>

效果图：

那么，要实现如下图的效果，应该怎么做那：

1.浮动布局

• 左边设置左浮动，右边宽度设置100%

.left{
    float:left;
}
.right{
     width:100%;
}

• 左边浮动，右边加上一个margin-left值

        .left{
            float:left;
        }
        .right{
            margin-left: 200px; /*等于左边栏宽度*/
        }

2.flex布局

父容器设置 display：flex；Right部分设置 flex：1

        body{
            display: flex;
        }
        .right{
            flex:1
        }

3.使用负margin

首先修改页面结构，为自适应部分添加容器 .container, 同时改变左右部分的位置，如下：

<div class="container">
    <section class="right">Right</section>
</div>
<aside class="left">Left</aside>

设置样式:

        .left{
            float:left;
            margin-left: -100%;
        }
        .right{
            margin-left: 200px;
        }
        .container{
            float:left;
            width:100%
        }

4.绝对定位

左右两边都绝对定位

        .left{
            position: absolute;
            left:0;
        }
        .right{
            position: absolute;
            left:200px;
            width:100%
        }

5.table布局

        body{
            display: table;
            width:100%;
        }
        .left{
            display: table-cell;
        }
        .right{
            display: table-cell;
        }

使用table-cell还可以实现很多的布局，需要自己去发挥想象。总结下来也就需要记住几点，设置了display:table-cell的元素具有以下特性。

• text-align、vertical-align等对齐属性起作用，margin不起作用。宽高百分比值不起作用。
• 会生成虚拟的table、tr把自己包裹住，如果有相邻的兄弟元素也被设置了table-cell,则会跟兄弟元素一起生成虚拟的table、tr把自己包裹住，并一行等高显示
• 多个table-cell元素会占满被设置了display: table的元素的宽度，如果一个元素被设置了宽度，那么其他剩余的table-cell元素会占满剩下的宽度。当然，如果只有一个table-cell元素，就算设置了宽度也会占满table元素的宽度。
• 对设置了float、absolute的元素不起作用。且IE6、7不支持