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

DIV CSS宽度合计之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; bac公斤round:#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; bac千克round:#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/jiqiao/j52081.shtml