margin负值应用实例

1. 水平垂直居中

利用margin负值可以实现元素的水平垂直居中

html代码：

    

        

            
水平垂直居中
        
    
    

CSS代码

        .box {
            position: relative;
            width: 500px;
            height: 500px;
            background: #ddd;
        }
        .out {
            position: absolute;
            top: 50%;
            left: 50%;
        }
        .content {
            width: 100px;
            height: 100px;
            margin: -50px 0 0 -50px;
            background: #aaccdd;
        }

实现效果

image.png

2. 列表项两端对齐

利用margin负值视觉上消除列表两端的溢出
overflow：hidden;=》清除浮动

html代码

CSS代码

        .box {
            float: left;
            width: 400px;
            height: 400px;
            background: #ffeecc;
        }
        .list {
            overflow: hidden;
            margin-right: -20px; 
        }
        .item {
            float: left;
            width: 120px;
            height: 400px;
            margin-right: 20px;
            background: #acacab;
        }

实现效果

image.png

3. 等高布局

通过给所有item栏目设置超高padding撑开，再用相同的margin值消除的原理，实现等高布局

html代码

    

        

            
这边内容比较少，不会很高
            
这里的内容较少，高度不会被撑得很高。这里的内容较少，高度不会被撑得很高。
            
内容很多，撑开高度。内容很多，撑开高度。内容很多，撑开高度。内容很多，撑开高度。内容很多，撑开高度。
        
    

CSS代码

        .box {
            width: 400px;
            /* height: 400px; */
            background: #ffeecc;
        }

        .list {
            overflow: hidden;
            margin-right: -20px;
        }

        .item {
            float: left;
            width: 120px;
            margin-right: 20px;
            background: #acacab;
            padding-bottom: 9999px;
            margin-bottom: -9999px;
        }

实现效果

image.png

4. 三栏自适应布局

通过对三栏全部设置左浮动，使他们处于同一个文档流，再用margin负值调整位置。

HTML代码

    

        

            
中间内容
        
        
左侧内容
        
右侧内容
    
```css
#### CSS代码

    .main {
        float:left;
        width: 100%;
        height: 500px;   
    }
    .content {
        margin: 0 220px;
        height: 100%;
        background: #efacfb;
    }
    .left,.right {
        float: left;
        width: 200px;
        height: 500px;
        background: #abcdef;
    }
    .left {
        margin-left: -100%;
    }
    .right {
        margin-left: -200px;
    }

#### 实现效果

![image.png](http://upload-images.jianshu.io/upload_images/7574134-e1b3adbb30fc3379.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)