CSS盒模型实现网页宽度和高度设计

你是到CSS盒模型的原理吗，这里和大家分享一下用CSS盒模型原理设计网页的宽度和高度，当我们设计布局一个网页的时候，经常遇到最终网页成型的时候宽度或者高度会超出我们预先的设计大小，其实这种现象就是所谓的CSS的盒模型造成的。

用CSS盒模型原理设计网页的宽度和高度

当我们设计布局一个网页的时候，经常会碰到这样的一种情况，那就是最终网页成型的时候宽度或者高度会超出我们预先的设计大小，其实这种现象就是所谓的CSS的盒模型造成的。

 
 
 
 

  
  
  
  
#test{margin:10px;padding:10px;width:100px;height:100px;}  
  
  
  
  
 
 
 
 
 

如上一段的代码，很多时候我们会把它所占的位置计算成width:120px，height:120px，因为在正常的理解下，padding是内边距，应该是包括在width里面的，而margin是外边距，所以width＝margin-left+margin-right+width，但是浏览器对于CSS盒模型的解释却并非如此，所以最终我们会发现布局出来的网页宽度与高度都会超出我们预期的计算，***造成显示上的错位。

◆其实不然，对于test所占的位置的真正计算应该是width=margin-left+margin-right+padding-left+padding-right+width，也就是宽度真正所占的大小应该是内边距+外边距+宽度本身，也就是说test真正的大小应该是140px才对。高度的计算与宽度的计算是一样的。

◆而如果给test加上边框的话，这个宽度与高度的算法还应该加上边框的大小。

 
 
 
 

  
  
  
  
#test{margin:10px;padding:10px;border:5px;  
  
  
  
  
width:100px;height:100px;}  
  
  
  
  
 
 
 
 
 

这里的test的宽度就应该是外边框+内边框+边框+宽度本身，所以test的width是150px。

如下图所示，width与height真正所占的位置并不是它本身的那一小块，而应该是一直到最外面深蓝色的那个层为止。

详文参考：http://www.csschina.net/a/jc/css_825.html

文章题目：CSS盒模型实现网页宽度和高度设计
URL标题：http://www.shufengxianlan.com/qtweb/news11/337761.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联