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

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

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

本文和大家重点讨论一下CSS中margins折叠现象，margins折叠现象只存在于临近或有从属关系的元素，垂直方向的margin中。

Margin简介

包括margin-top,margin-right,margin-bottom,margin-left,控制块级元素之间的距离,它们是透明不可见的。

Collapsingmargins:

margins折叠现象只存在于临近或有从属关系的元素,垂直方向的margin中.文字说明可能让人费解,下面用一个例子说明margin-collapsing现象.

例:在html文件的之间写入如下代码: 



    
	
  1. 
		<dividdivid=”ID1″> 
    2. 
	
  2. 
		<h1idh1id=”ID2″>MarginsofID1andID2collapsevertically.<br/> 
    3. 
	
  3. 
		元素ID1与ID2的margins在垂直方向折叠.h1> 
    4. 
	
  4. 
		div> 
    5. 
	
  5. 
		 
    6. 




	在与其外联的css文件中写入: 

	广州网站建设,网站建设,广州网页设计,广州网站设计




    
	
  1. 
		*{  
    2. 
	
  2. 
		padding:0;  
    3. 
	
  3. 
		margin:0;  
    4. 
	
  4. 
		}  
    5. 
	
  5. 
		#ID1{  
    6. 
	
  6. 
		background-color:#333;  
    7. 
	
  7. 
		color:#FFF;  
    8. 
	
  8. 
		margin-top:10px;  
    9. 
	
  9. 
		margin-bottom:10px;  
    10. 
	
  10. 
		}  
    11. 
	
  11. 
		#ID2{  
    12. 
	
  12. 
		font:normal14px/1.5Verdana,sans-serif;  
    13. 
	
  13. 
		margin-top:30px;  
    14. 
	
  14. 
		margin-bottom:30px;  
    15. 
	
  15. 
		border:1pxsolid#F00;  
    16. 
	
  16. 
		}  
    17. 
	
  17. 
		 
    18. 




	代码解释:



	1.在html写入的代码表示,在html中插入id分别为ID1和ID2的两个块级元素div,h1; 2.*{padding:0;margin:0;}:使浏览器默认的元素padding和margin值均归零; 3.#ID1{…}:使id为ID1的元素div的背景颜色为#333,字体颜色为#FFF,margin-top/bottom为10px; 4.#ID2{…}:使id为ID2的元素h1的字体大小为14px,verdana字体,行高为字体高的150%,正常粗细.margin-top/bottom为30px,边框为1px宽,红色实线.



	依据以上解释,我们应该得到如下效果(Fig.3):



	



	即ID1的margin-top/bottom=ab=ef=10px; ID2的margin-top/bottom=bc=de=30px; 但用浏览器打开html文件,却得到Example4的效果,如下图(Fig.4):

	广州网站建设,网站建设,广州网页设计,广州网站设计



	



	即ab=cd=30px,ID1的margin-top/bottom=10px被折叠了,而且ID1应有的margin黑色背景也一同被折叠消失了。


			

			

					 标签：
					 
			

		
		
			  
	  
 
	

	 
	

	





	
	



飞机