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

CSS盒模型（BoxModel）用法详解(2)

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

外层box自动计算高度的问题

根据W3C定义，没有float属性的外层box不会自动计算高度，要计算高度，必须在内层最后一个box加入clear:both。
Opera、netscape、mozilla等不会计算外层box高度，但是微软ie6会自动计算外层高度。比如：
广州网站建设,网站建设,广州网页设计,广州网站设计

ExampleSourceCode



    
	
  1. 
		<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"  
    2. 
	
  2. 
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    3. 
	
  3. 
		<htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
    4. 
	
  4. 
		<head> 
    5. 
	
  5. 
		<metahttp-equivmetahttp-equiv="Content-Type"
    6. 
	
  6. 
		content="text/html;charset=gb2312"/> 
    7. 
	
  7. 
		<title>www.52css.com</title> 
    8. 
	
  8. 
		<style> 
    9. 
	
  9. 
		.outer{  
    10. 
	
  10. 
		width:600px;  
    11. 
	
  11. 
		background:#000;  
    12. 
	
  12. 
		}  
    13. 
	
  13. 
		.inner1{  
    14. 
	
  14. 
		float:left;  
    15. 
	
  15. 
		width:200px;  
    16. 
	
  16. 
		height:100px;  
    17. 
	
  17. 
		margin:5px;  
    18. 
	
  18. 
		background:red;  
    19. 
	
  19. 
		}  
    20. 
	
  20. 
		.inner2{  
    21. 
	
  21. 
		float:left;  
    22. 
	
  22. 
		width:200px;  
    23. 
	
  23. 
		height:100px;  
    24. 
	
  24. 
		margin:5px;  
    25. 
	
  25. 
		background:yellow;  
    26. 
	
  26. 
		}  
    27. 
	
  27. 
		</style> 
    28. 
	
  28. 
		</head> 
    29. 
	
  29. 
		<body> 
    30. 
	
  30. 
		<divclassdivclass="outer"> 
    31. 
	
  31. 
		<divclassdivclass="inner1"></div> 
    32. 
	
  32. 
		<divclassdivclass="inner2"></div> 
    33. 
	
  33. 
		</div> 
    34. 
	
  34. 
		</body> 
    35. 
	
  35. 
		</html> 
    36. 




	居中问题



	需要定义元素的宽，并且定义横向的margin，如果你的布局包含在一个层(容器)中，就象这样： 你可以这样定义使它横向居中：



	ExampleSourceCode




    
	
  1. 
		#wrap{  
    2. 
	
  2. 
		width:760px;/*修改为你的层的宽度*/  
    3. 
	
  3. 
		margin:0auto;  
    4. 
	
  4. 
		}  
    5. 
	
  5. 
		 
    6. 




	但是IE5/Win不能正确显示这个定义，我们采用一个非常有用的技巧来解决：在外层用text-align属性。就象这样：

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



	ExampleSourceCode




    
	
  1. 
		#outer{  
    2. 
	
  2. 
		text-align:center;  
    3. 
	
  3. 
		}  
    4. 
	
  4. 
		#wrap{  
    5. 
	
  5. 
		width:760px;/*修改为你的层的宽度*/  
    6. 
	
  6. 
		margin:0auto;  
    7. 
	
  7. 
		text-align:left;  
    8. 
	
  8. 
		}  
    9. 




	第一个#outer的text-align:center;规则定义IE5/Win中#outer的所有元素居中(其他浏览器只是将文字居中)，第二个text-align:left;是将#warp中的文字居左。



	因此，在有居中元素的css中，外层css要定义text-align:center属性，内层居中用margin:xautoxauto定义，并重新定义text-align。


			

			

					 标签：网站建设(5654)广州网站设计(5620)广州网站建设(4075)广州网页设计(1868)
					 
			

		
		
			  
	  
 
	

	 
	

	





	
	



飞机