解释一下你对盒模型的理解,以及如何在 CSS 中告诉浏览器使用不同的盒模型来渲染你的布局。

 盒子模型分为两类:W3C标准盒子模型和IE盒子模型 (微软确实不喜欢服从他家的标准)

这两者的关键差别就在于:

  • W3C盒子模型——属性高(height)和属性宽(width)这两个值不包含 填充(padding)和边框(border)
  • IE盒子模型——属性高(height)和属性宽(width)这两个值包含 填充(padding)和边框(border)

我们在编写页面代码的时候应该尽量使用标准的W3C盒子模型(需要在页面中声明DOCTYPE类型)。

   

各浏览器盒模型的组成结构是一致的,区别只是在"怪异模式"下宽度和高度的计算方式,而“标准模式”下则没有区别。组成结构以宽度为例:总宽度=marginLeft+borderLeft+paddingLeft+contentWidth+paddingRight+borderRight+marginRightW3C标准盒子模型。页面在“怪异模式”下,css中为元素的width和height设置的值在标准浏览器和ie系列(ie9除外)里的代表的含义是不同的IE盒子模型。 

   因而解决兼容型为题最简洁和值得推荐的方式是:下述的第一条。 
一、将页面设为“标准模式”。 
添加对应的dtd标识,如: 
Html代码   收藏代码
  1. <!DOCTYPE html>  

经测试,ie6/7/8/9,ff,chrome,opera均表现一致: 
Html代码   收藏代码
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5. #box {width:100px;padding:0 10px;border:20px solid blue;margin:70px;}  
  6. </style>  
  7. <script type="text/javascript" src="../js/jquery-1.6.4.js"></script>  
  8. </head>  
  9. <body>  
  10. <div id="box">  
  11. </div>  
  12. <script>  
  13. var box = $('#box');  
  14. var boxboxWidth=box[0].offsetWidth;//包括补白、边框和内容宽度  
  15. alert(boxWidth+":"+box.width());//专指内容的宽度  
  16. </script>  
  17. </body>  
  18. </html>  

注意:offsetWidth=borderLeft+paddingLeft+contentWidth+paddingRight+borderRight。 
此时alert的值是160:100。即,各浏览器均认为css中的width就是100px即内容的宽度,和padding+border最终相加结果是:160px。 
如果把doctype去掉,即进入“怪异模式”,此时,ie6/7/8的值均为100:40,证明它们认为css中width指的和offsetWidth是同一个值,除了内容的宽度外还都包含补白和边框,而内容的宽度则被压缩为40。而ie9,ff,chrome,opera这样的标准浏览器则依然是160:100。 
二、使用hack或者在外面套上一层wrapper。 
前提是页面处于“怪异模式”,“标准模式”不存在兼容性问题。 
1、hack 
   依然使用上例:假设内容的宽度必须固定为100px。 
Html代码   收藏代码
  1. #box {  
  2. width:100px !important; // ie9,ff,chrome,opera这样的标准浏览器
  3. width:160px; //所有的浏览器;它的本意是只对不认识!important的设置。可是ie7、ie8也认识
  4. +width:160px!important;//ie7
  5. width:160px/0!important;//ie8
  6. padding:0 10px;border:20px solid blue;margin:70px;  
  7. }  
//不太正确

2、wrapper 
Html代码   收藏代码
  1. #box {  
  2. width:100px;  
  3. margin:70px;  
  4. float:left;  
  5. }  
  6. .wrapper {  
  7. padding:0 10px;border:20px solid blue;  
  8. }  

Html代码   收藏代码
  1. <div class="wrapper">  
  2. <div id="box"></div>  
  3. <div style="clear:both"></div>  
  4. </div>  


    总结:使用“标准模式”即可实现兼容,不兼容只发生在“怪异模式”下。而且正常的页面基本上都选择前者,如果选择后者,麻烦不止于此,一些css技巧也将失灵,如将div居中: 
Html代码   收藏代码
  1. div {margin:0 auto;}  
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值