合计网页像素宽度是为了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; background:#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>
实例成绩截图
咱们遵照上图可看出由于总宽度大要了20px，以是招致了摆布结构不克不及平齐，就呈现了右边往下掉。 如许就泛起了错位的兼容标题问题，多数在理论中因为咱们计较的忽略，一样平常相差小的时刻是1px-2px，那样就不会被咱们发现，以是清扫错位兼容可以从宽度计算下手。
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/shili/s52486.shtml
