利用CSS实现一边固定一边自适应的盒子H5写法

使用五种方法来实现DIV的一边固定一边自适应写法，并分析各自特点。

第一种（CSS3）：

.wrapper1, .wrapper2, .wrapper3, .wrapper4, .wrapper5{
     width: 100%;
     height: 100%;
     min-height: 300px;
     line-height: 200px;
     overflow: hidden;
     margin: 30px 0;
     position: relative;
}
.wrapper1 .custom{
    width: 200px;
    border-right: 1px solid white;
}
.wrapper1 .auto{
    width: calc(100% - 201px);
}
.wrapper1 .custom, .wrapper1 .auto{
    height: 200px;
    float: left;
    color: white;
    background: black;
}

现在CSS3都已经普及了，移动端更是，通常使用CSS3较多，所以第一种就是利用CSS3来写了。

CSS3中新增一种新的属性  CALC  ：

使用方法：   width: calc(100% - 200px);

这一功能通俗易懂，简单的加减乘除谁不会啊，只需要了解盒子宽高（padding + margin + border），若使用border-box除外。

自适应盒子一个100%宽  -  固定盒子宽  =  自适应的宽。

第二种（CSS3）：

.wrapper2 .custom, .wrapper2 .auto{
    height: 200px;
    color: white;
    background: black;
    position: absolute;
    top: 31px;
}
.wrapper2 .custom{
    width: 200px;
    border-right: 1px solid white;
    left: 0;
    z-index: 1;
}
.wrapper2 .auto{
    left: 0;
    width: 100%;
    padding-left: 200px;
    box-sizing: border-box;
}

利用绝对定位来写，给父元素一个相对定位，固定与自适应盒子各一个绝对定位，当然你也可以只给第二个盒子。

没太多要点，需要注意的就是在box-sizing这里需设置borde-box。

脱离了文档流的DIV宽度100%是等于设备像素宽，