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

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

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

4. 支配结构宽度较量争论css5.com.cn
6. .yangshi{ width:400px; }
7. .zuo{ float:left; width:300px; bac公斤round:#CCC; }
8. .you{ float:right; width:100px; bac千克round:#999}
13. 左边300px
14. 右侧100px

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

4. 支配结构宽度算计css5.com.cn
6. .yangshi{ width:400px; }
7. .zuo{ float:left; width:300px; background:#CCC; }
8. .you{ float:right; width:120px; bac公斤round:#999}
13. 左边300px
14. 左边100px

实例成就截图

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

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

4. 摆布结构宽度合计css5.com.cn
6. .yangshi{ width:400px; }
7. .zuo{ float:left; width:298px; border:1pxsolid#F00; bac千克round:#CCC; }
8. .you{ float:right; width:98px; background:#999; border:1pxsolid#F00; }
13. 左边300px
14. 左侧100px

结果图：

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

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

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

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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！