欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!

合计网页像素宽度是为了CSS网页布局错落和兼容。思空见贯的我们布局支配结构网页或应用padding、margin布局的时候将合计整页宽度,如果不算计岂论是宽渡过大过小就会涌现错位问题。

怎么样总计CSS宽度
例一:我们总计一个支配结构的布局名目。
假设总宽度为400px,那末支配加起来就该当小于400px,那我们可能左边为300px,右边为100px
粗略代码:


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

舛错: 假定我们在总宽度不变环境下,左边为300px,而右边为120px那总宽度逾越了20px,我们看看会出现什么标题问题,DIV+CSS代码下列:


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

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

咱们遵照上图可看出由于总宽度大要了20px,以是招致了摆布结构不克不及平齐,就呈现了右边往下掉。 如许就泛起了错位的兼容标题问题,多数在理论中因为咱们计较的忽略,一样平常相差小的时刻是1px-2px,那样就不会被咱们发现,以是清扫错位兼容可以从宽度计算下手。

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/shili/s52486.shtml