位置：首页>flash教程 > flex > 正文

css超出部分省略号_css margin叠加问题

时间：2016-03-10  来源：flex  阅读：

w3c认为margin叠加是合理的。不管是不是bug，但是这个问题真的存在。看下面这个例子：

  1. < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2.   
  3.   
  4. *{padding:0;margin:0;}  .box{background:#ccc; }  
  5. .content{background:#eee;margin: 20px auto;}  .an-box{ margin:50px auto;background:#999999;}  
  6.   
  7.   
  8. margin: 20px auto
 margin: 20px auto
 
  •   
  • margin: 20px auto  
  •  margin: 20px auto 
  •  margin: 50px auto 
  •   

    解决这个问题的方法有不少，先来看看这个，在外层的容器中加：overflow:hidden;zoom:1；

     

    1. < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    2.   
    3.   
    4. *{padding:0;margin:0;}  .box{background:#ccc; overflow:hidden;zoom:1 }  
    5. .content{background:#eee;margin: 20px auto; }  .an-box{ margin:50px auto;background:#999999;}  
    6.   
    7.   
    8. 这里两个还是存在叠加margin: 20px auto 这里两个还是存在叠加margin: 20px auto 
    9.   
    10. margin: 20px auto  
    11.  margin: 20px auto 
    12.  margin: 50px auto 
    13.   

    还有外层的容器中加边框属性，在叠加元素加空块状元素等等。。还有就是用padding来取代margin

    css超出部分省略号_css margin叠加问题

    http://m.bbyears.com/flash/22309.html

    推荐访问:cssci css3 cssci2019-2020

    上一篇：[css超出部分省略号]css div 实例三行三列教程

    下一篇：【css超出部分省略号】css 下拉菜单代码

    相关阅读 猜你喜欢
    本类排行 本类最新