IE大叔的杀马特审美之—CSS盒子模型

作者: 来源: 更新时间:2013-03-07 13:57:01 点击:

干前端,跑不了和IE大叔打交道.....有句话叫存在即合理,IE大叔在前端界是灰常的NB啊,既然咱改变不了世界,就只能改变自己。

先上定义:为了给浏览器上各个元素排版定位,浏览器会根据渲染模式为元素生产4个矩形框,分别从外到内为margin、border、

       padding、content,它们不可分割,但可能重合,这就是所谓的盒子模型,即CSS对一个元素渲染后的抽象形态。

 

来一起看看大叔的眼里的盒子。

 

总结一哈

       盒子模型的范围也包括 margin、border、padding、content

              但W3C认为:content = content       

      IE认为:       content =(border + padding

 

小学应用题

      一个盒子, margin 为 20px,border 为 1px,padding 为 10px,content 的宽为 200px、高为 50px,

                 求盒子在W3C和IE中,占据大小和实际大小。

           解:W3C占据:宽 20*2+1*2+10*2+200=262px   高 20*2+1*2*10*2+50=112px

      W3C实际:宽 1*2+10*2+200=222px            高 1*2+10*2+50=72px

      IE占据:    宽 20*2+200=240px                    高 20*2+50=90px

      IE实际:    宽 200px                   高 50px

 

解决方案

      为了统一渲染布局,在页面第一行要进行DOCTYPE声明,也就是DTD(文档类型定义),声明成标准模式即可。