CSS网页布局错位原因宽度计算

为甚么算计宽度
计算网页像素宽度是为了CSS网页结构整洁与兼容。常见的咱们组织摆布结构网页或运用padding、margin构造的时候将较量争论整页宽度，如果不计较岂论是宽渡过大过小就会出现错位标题问题。

怎么共计CSS宽度
例一：我们计较一个摆布结构的机关款式。
假设总宽度为400px，那末左右加起来就理应小于400px，那咱们可能左边为300px，右侧为100px
精确代码：

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>支配结构宽度较量争论css5.com.cn</title>
<style type="text/css">
.yangshi{width:400px;}
.zuo{ float:left; width:300px; bac公斤round:#CCC;}
.you{ float:right; width:100px; bac千克round:#999}
</style>
</head>
<body>
<div class="yangshi">
<div class="zuo">左边300px</div>
<div class="you">右侧100px</div>
</div>
</body>
</html>

以上为切确的支配结构总宽度恰恰即是400px

纰谬：假设我们在总宽度摇动状况下，左边为300px，而右侧为120px那总宽度超越了20px，我们看看会泛起什么标题问题，DIV+CSS代码如下：

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>支配结构宽度算计css5.com.cn</title>
<style type="text/css">
.yangshi{width:400px;}
.zuo{ float:left; width:300px; background:#CCC;}
.you{ float:right; width:120px; bac公斤round:#999}
</style>
</head>
<body>
<div class="yangshi">
<div class="zuo">左边300px</div>
<div class="you">左边100px</div>
</div>
</body>
</html>

DIV CSS布局错位诊断实例成就截图

咱们依据上图可看出因为总宽度兴许了20px，以是导致了左右结构不克不及平齐，就呈现了右侧往下掉。多么就涌现了错位的兼容题目，多在实际中由于我们合计的忽略，通常相差小的时辰是1px-2px，那样就不会被我们创造，以是破除错位兼容可以从宽度共计动手。

例二：左右结构中有1px边框实例通常左右结构中有1px边框，今后再加之有些边框这时咱们设置装备摆设摆布结构时分就需要将此边框宽度与摆布结构宽度共计在一起。粗略例子： CSS与html代码如下：

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>摆布结构宽度合计css5.com.cn</title>
<style type="text/css">
.yangshi{width:400px;}
.zuo{ float:left; width:298px; border:1px solid #F00; bac千克round:#CCC;}
.you{ float:right; width:98px; background:#999; border:1px solid #F00;}
</style>
</head>
<body>
<div class="yangshi">
<div class="zuo">左边300px</div>
<div class="you">左侧100px</div>
</div>
</body>
</html>

结果图：

宽度设置截图因摆布结构都有1px的宽度这个时分各重要减去支配2像素的边框宽度，以是左边结尾是298px，右边为98px的宽度

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

DIV+CSS网页布局错位更改演示图 DIV+CSS网页结构错位更改演示图

DIV+CSS设置装备摆设百分比宽度算计无心候咱们也重要应用百分近来较量争论宽度，通常环境也是总的百分比宽度，不克不及跨越100%

CSS宽度总计时辰把稳总结：无论是左右结构、多列的组织照旧径自一个DIV宽度的布局设置装备摆设都须要注意宽度的驾驭与较量争论，特别是使用了padding、margin、边框等CSS属性，这个时候咱们都重要将它们设置的占用宽度总计入内，牢牢驾御同排各宽度之和小于或就是总宽度，如果大于总宽度将会涌现错位的兼容标题问题。以是一样平常错位时咱们即可以从计算宽度脱手，诚然错位还有良多原由这里也是办理错位兼容题目的门径之一。

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