Home思洋影视事业部网站建设知识库
0 Comments

揭露CSS中margins折叠现象内幕(2)

发布于：2013-08-01  |   作者：广州网站建设  |   已聚集：人围观

为什么会折叠:

造成以上现象的原因是,我们在css中并没有声明id为ID1的元素div的height(高),因此它的高便被设为auto(自动)了.一旦其值被设为auto,那么浏览器就会认为它的高为子元素ID2的border-top到border-bottom之间的距离,即Fig.4中bc的长度,所以子元素ID2的margin-top/bottom(30px)就伸出到了父元素ID1之外,出现了Fig.4中ab与cd之间的空白区域.因此父元素ID1的margin-top/bottom因子元素的”红杏出墙”而被折叠消失了.

如何解决折叠问题:

可能大家最初想到的办法就是根据折叠发生的原因—auto,来解决问题.但是,在实际操作中,某些元素如div,h1,p等,我们是不可能预先知道它的高是多少的,因此在css文件中是不能常规通过声明元素的高来解决折叠问题.
广州网站建设,网站建设,广州网页设计,广州网站设计

我们需要在css文件中加入如下代码(红色部分): 



    
	
  1. 
		#ID1{  
    2. 
	
  2. 
		background-color:#333;  
    3. 
	
  3. 
		color:#FFF;  
    4. 
	
  4. 
		margin-top:10px;  
    5. 
	
  5. 
		margin-bottom:10px;  
    6. 
	
  6. 
		padding-top:1px;  
    7. 
	
  7. 
		padding-bottom:1px;  
    8. 
	
  8. 
		}  
    9. 
	
  9. 
		或是：  
    10. 
	
  10. 
		#ID1{  
    11. 
	
  11. 
		background-color:#333;  
    12. 
	
  12. 
		color:#FFF;  
    13. 
	
  13. 
		margin-top:10px;  
    14. 
	
  14. 
		margin-bottom:10px;  
    15. 
	
  15. 
		border-top:1pxsolid#333;  
    16. 
	
  16. 
		border-bottom:1pxsolid#333;  
    17. 
	
  17. 
		}  
    18. 
	
  18. 
		 
    19. 




	通过增加以上代码,便可使浏览器重新计算ID1的高,使其为子元素ID2的margin-top/bottom外缘(outertop/bottom)之间的距离,即Fig.3中be的距离.


			

			

					 标签：
					 
			

		
		
			  
	  
 
	

	 
	

	





	
	



飞机