css负边距可以实现的布局(上)左固定右自适应，多行多列，等高布局

css负边距原来有这么大的妙用。
今天看了一篇大大的博文：
css的负边距（margin负值）的绝招

负边距可以做的事有很多。

• 可以增大元素的宽度
• 可以实现多列多行布局
• 左侧固定右侧自适应布局
• 等高布局
• 圣杯布局
• 双飞翼布局

1.左侧固定，右侧自适应布局

实现效果:左侧200px宽，右侧自适应，中间间隔10px。请用两种方法来实现。先不考虑兼容性

<div class="parent">
    <div class="side"></div>
    <div class="mid"></div>
</div>

法一：

左侧浮动，父盒子overflow:hidden（把塌陷撑开），右侧写margin-left：210px（因为浮动元素已经脱离文档流了）即可。

插播一个absolute和float的区别

A：共同点： 对内联元素设置float和absolute属性，可以让元素脱离文档流，并且可以设置其宽高。 B：不同点：
float仍会占据位置，position会覆盖文档流中的其他元素。

代码：

.parent{
    overflow:hidden;
}
.side{
    width:200px;
    height:200px;
    background-color:red;
    float:left;
}
.mid{
    width:100%;
    height:200px;
    background-color:blue;
    margin-left:210px;
}

法二：

两个子div全都浮动，但是设置左边的浮动元素margin-right:-100%

margin-right:-100%。主要解决浮动元素防错行的问题。
可以让渲染引擎计算盒子的大小为后面元素布局时，计算为真正的大小减去100%，那不就是0嘛。盒子的真实显示大小还是那么大，却在后面元素定位计算大小时计算成0了。后面元素不就当作这个盒子不存在了嘛，就可以覆盖啦。只要将后面元素margin-left:210px就完美没解决了。

代码：

.parent{
    overflow:hidden;
}
.side,.mid{
    float:left;
}
.side{
    width:200px;
    height:200px;
    background-color:red;
    margin-right:-100%;
}
.mid{
    width:100%;
    height:200px;
    background-color:blue;
    margin-left:210px;
}

2.等高布局

实现效果:左侧330px宽，右侧330px宽，中间自适应，中间间隔10px。散列不管内容多少，一定要等高。请用两种方法来实现。先不考虑兼容性

法一：

使用padding-bottom: 100%;margin-bottom: -100%;对冲。

<div class="wrap">
    <div class="left"></div>
    <div class="right"></div>
    <div class="mid"></div>//注意这里的顺序，mid在最后面
</div>

.wrap{
    overflow:hidden
}
.left{
    float:left;
    background-color:red;
}
.right{
    float:right;
    background-color:blue;  
}
.left,.right{
    width:330px;
    margin-bottom:-100%;
    padding-bottom:100%;
}
.mid{
    height:500px;
    margin:0 340px 0 340px;
    background-color:yellow;
}

法二 ：

使用display:table-cell。
模拟成表格了嘛。所以一定是等高的啦。

<div class="wrap">
    <div class="left"></div>
     <div class="mid"></div>
    <div class="right"></div>   
</div>

      .left,.right,.mid{
           display: table-cell;
             width: 33%;
       }
        .left{
            background-color: violet;     
        }
        .right{
            background-color: aqua; 
        }
        .mid{
            background-color: antiquewhite;
        }

3.多行多列布局

这里有一堆商品图片，要求宽高是50px ，左右间隔5
px，上下间隔5px。4个一行居中显示。注意只有元素中间有间隔。边界不许多出间隔什么的。

思路： 使用float实现多个div一行显示。div套ul套li。div使用计算好的宽度：4*50+3*5。 ul使用margin-right：-5px实现向右扩大5px，四个li就可以容纳进来不会换行了。最外层div再overflow:hidden把ul的右侧5px多出来的抹掉。来实现边界消失。

<div class="wrap">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
        </ul>
</div>

*{
    margin:0;
    padding:0;
}
.wrap{
    overflow:hidden;
    width:215px;
    height:105px;
    margin:0 auto;
}
ul{
    margin-right:-5px;
    background-color:yellow;
    overflow:hidden;
    list-style-type: none;
}
li{
    width:50px;
    height:50px;
    margin-right:5px;
    margin-bottom:5px;
    float:left;
    background-color:red;

}