欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术！
CSS手册 CSS3手册 CSS论坛 CSS培训 CSS任务 网闻
DIVCSS5培训 系统快速学会CSS布局技术！
DIVCSS5首页 > CSS hack >

DIV CSS宽度计算之CSS网页布局错位

为何总计宽度
较量争论网页像素宽度是为了CSS网页机关规正和兼容。思空见贯的我们布局支配结构网页或应用padding、margin组织的时刻将合计整页宽度，如果不算计无论是宽渡过大过小就会泛起错位问题。

怎样共计CSS宽度
例一：我们计算一个摆布结构的构造花样。
假如总宽度为400px，那末摆布加起来就应当小于400px，那咱们可能左边为300px，左侧为100px
准确代码：


	
    
		
  1. 
			<!DOCTYPE html> 
    2. 
		
  2. 
			<head> 
    3. 
		
  3. 
			<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    4. 
		
  4. 
			<title>支配结构宽度较量争论css5.com.cn</title> 
    5. 
		
  5. 
			<style type="text/css"> 
    6. 
		
  6. 
			.yangshi{width:400px;} 
    7. 
		
  7. 
			.zuo{ float:left; width:300px; bac千克round:#CCC;} 
    8. 
		
  8. 
			.you{ float:right; width:100px; background:#999} 
    9. 
		
  9. 
			</style> 
    10. 
		
  10. 
			</head> 
    11. 
		
  11. 
			<body> 
    12. 
		
  12. 
			<div class="yangshi"> 
    13. 
		
  13. 
			<div class="zuo">左边300px</div> 
    14. 
		
  14. 
			<div class="you">左边100px</div> 
    15. 
		
  15. 
			</div> 
    16. 
		
  16. 
			</body> 
    17. 
		
  17. 
			</html> 
    18. 
	

	

		网页错位之CSS宽度计算 以上为精确的左右结构总宽度恰恰即是400px

	

		错误： 假设我们在总宽度执拗情况下，左边为300px，而左侧为120px那总宽度超过了20px，我们看看会呈现甚么问题，DIV+CSS代码下列：

	

	
    
		
  1. 
			 <!DOCTYPE html> 
    2. 
		
  2. 
			<head> 
    3. 
		
  3. 
			<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    4. 
		
  4. 
			<title>摆布结构宽度计较css5.com.cn</title> 
    5. 
		
  5. 
			<style type="text/css"> 
    6. 
		
  6. 
			.yangshi{width:400px;} 
    7. 
		
  7. 
			.zuo{ float:left; width:300px; bac公斤round:#CCC;} 
    8. 
		
  8. 
			.you{ float:right; width:120px; background:#999} 
    9. 
		
  9. 
			</style> 
    10. 
		
  10. 
			</head> 
    11. 
		
  11. 
			<body> 
    12. 
		
  12. 
			<div class="yangshi"> 
    13. 
		
  13. 
			<div class="zuo">左边300px</div> 
    14. 
		
  14. 
			<div class="you">左侧100px</div> 
    15. 
		
  15. 
			</div> 
    16. 
		
  16. 
			</body> 
    17. 
		
  17. 
			</html> 
    18. 
	

	

		DIV CSS布局错位诊断 实例造诣截图

	

		我们依据上图可看出因为总宽度梗概了20px，以是导致了摆布结构不能平齐，就呈现了右边往下掉。 何等就出现了错位的兼容标题，多数在理论中由于咱们算计的忽略，一样平常相差小的时辰是1px-2px，那样就不会被咱们缔造，所以拂拭错位兼容可以从宽度算计着手。

	

		例二：支配结构中有1px边框实例 一样平常摆布结构中有1px边框，今后再加上有些边框这时咱们设置摆布结构时辰就重要将此边框宽度和摆布结构宽度共计在一起。 准确例子： CSS与html代码以下：

	

	
    
		
  1. 
			 <!DOCTYPE html> 
    2. 
		
  2. 
			<head> 
    3. 
		
  3. 
			<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    4. 
		
  4. 
			<title>支配结构宽度较量争论css5.com.cn</title> 
    5. 
		
  5. 
			<style type="text/css"> 
    6. 
		
  6. 
			.yangshi{width:400px;} 
    7. 
		
  7. 
			.zuo{ float:left; width:298px; border:1px solid #F00; bac公斤round:#CCC;} 
    8. 
		
  8. 
			.you{ float:right; width:98px; bac公斤round:#999; border:1px solid #F00;} 
    9. 
		
  9. 
			</style> 
    10. 
		
  10. 
			</head> 
    11. 
		
  11. 
			<body> 
    12. 
		
  12. 
			<div class="yangshi"> 
    13. 
		
  13. 
			<div class="zuo">左边300px</div> 
    14. 
		
  14. 
			<div class="you">右边100px</div> 
    15. 
		
  15. 
			</div> 
    16. 
		
  16. 
			</body> 
    17. 
		
  17. 
			</html> 
    18. 
	

	

		结果图：  

	

		CSS布局错位样式图 宽度配置截图 因左右结构都有1px的宽度这个时刻各需要减去支配2像素的边框宽度，以是左边收尾是298px，左边为98px的宽度

	

		如果不减去边框将会组成一下成就：  

	

		DIV+CSS网页布局错位更改演示图 DIV+CSS网页组织错位变换演示图






     
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css-hack/c52957.shtml

						

						
						

							
						

						

							

								
必备CSS教程Essential CSS Tutorials

							

							

								
							

						

						

							

								
必备HTML基础教程Essential HTML Tutorials

							

							

								
							

						

					

				

				

					

						

							
最新文章 NEWS

						

						

							
						

					

					

						

							
CSS 特效 CSS EFFECTS

						

						

							
						

					

					

						

							
相关文章 RELATED

						

						

							
						

					

					

						

							
热点文章 HOT