margin负值的应用总结-白红宇

margin负值的应用总结

阅读量：6860 次

发布时间：2019-06-26

本文共 1282 字，大约阅读时间需要 4 分钟。

margin负值之前一直应用都是定位和列表的时候，从来没有想着进行个总结，直到遇到了在项目中遇到了一个margin负值但是宽度增加的问题才想着研究下 margin负值的问题。现将网上找到资料和文章，加上自己理解整理如下

1.元素水平垂直居中


     
           这个弹框要绝对居中啊

tips:top和left都设置50%；margin-top 赋高度的一半的负值；margin-left 设置宽度一半的负值即可。

2.列表元素两端对齐


         
              
       第一个li啊
        
       第一个li啊
        
       第一个li啊
        
       第一个li啊
        
       第一个li啊
        
       第一个li啊
        
       第一个li啊
        
       第一个li啊

tips:元素不存在width属性或者（width：auto）的时候，负margin会增加元素的宽度 so 设置ul 负值，宽度变宽同时向右偏移20像素，oveflow用于清除浮动

3.左右两列固定中间自适应

tips:主体自适应的元素应该先定义，有两个div，外层div设置宽度（高度可选）和浮动；内部div设置margin值空出左右两侧的宽度（或宽度+间距）；左侧自适应左浮动后 margin-left 负 100%；右侧的 margin-left 负自身宽度

4.三列等高


         
      
       这里是左边，高度设置100
      
    
      
       这里是中间啊，高度设置150
      
    
      
       这里是右边，高度设置200

tips：padding-bottom填充元素高度，再用margin-bottom为负值减少css读取元素高度，父元素设置overflow:hidden

5.margin负值去除多余线


         
      第一行第一格
    
      第一行第二格
    
      第一行第三格
    
      第二行第一格
    
      第二行第二格
    
      第二行第三格
    
      第三行第一格
    
      第三行第二格
    
      第三行第三格

tips:li最右边和最后元素的右边框和下边框会和父元素的边框重合，需要用margin-right 负值和margin-bottom的负值隐藏

转载于:https://www.cnblogs.com/jolee/p/8979356.html

你可能感兴趣的文章