你的位置:首页 > 网页设计

[网页设计]Box model小心得


最近在研究css~当设置一个元素width后~有时候也会对他设定padding,margin,border值,

每次这样我就心里琢磨,那这个元素的width会变吗,js获取元素的宽度width()指的是哪个宽度,还有innerWidth()?outerWidth()?outerWidth(true)?

还有CSS中Box model是分为两种,第一种是W3C的标准模型,另一种是IE的传统模型。

他们相同之处都是对元素计算尺寸的模型,具体说就是对元素的width,height,padding,border以及元素实际尺寸的计算关系,那他们的不同呢?
各种问题纠结在了一起,为了解决这个困惑,我做了如下调试:

复制代码

测试环境 :ie6 ie7 ie8 chrome firefox

俗语(自己设定):元素:此例子中的div[class='con']    内容宽度:元素中的内容,例子中的“抢火车票啦”~ 最近公司最疯狂的事情咕~~(╯﹏╰)


/******很简单的一个demo*********/
<style> *{margin:0;padding:0} .con{width:300px;height:200px;margin:0 auto;background:#6c6eff;padding:50px;margin-top:10px;border:4px #FFFF00 dashed} .log{width:300px;border:1px red solid;height:100px;margin:0 auto}</style><script> $(function(){ var ss=[]; ss.push("width:"); ss.push($(".con").width()+"<br>"); ss.push("innerWidth:"+$(".con").innerWidth()+"<br>"); ss.push("outerWidth:"+$(".con").outerWidth()+"<br>"); ss.push("outerWidth(true):"+$(".con").outerWidth(true)); $(".log").html(ss.join("")) })</script></head><body>  <div >抢火车票啦</div>  <div ></div></body>  
复制代码

得出结论
   1:在ie6及ie6以上版本还有谷歌,火狐中他们都遵循的都是w3c盒子模型,估计只有ie6以下版本是遵循传统盒子模型吧~

    ps:那什么是w3c盒子模型呢?我就白话文加上个人的理解解说下
      con设定width:300px;padding:50px;margin-top:10px;border-width:4px;
      con的页面实际展示宽度是:300+50*2+4*2 = 408
      我想大家应当有所领悟了吧,width(300px)是指的内容宽度,当设置padding值时,con向外扩张, 设置border宽度同理;
     
      $(".con").width():300px;其实就是我们经常说的con宽度width多少,我觉得这个说法有点误解,应当说这个元素的内容宽度才对味嘛
      $(".con").innerWidth():400px;元素的内容宽度+内距padding值
      $(".con").outerWidth():408px;元素的内容宽度+内距padding值+边框boderWidth,这个说成是元素的宽度才对嘛,你觉得呢?

      $(".con").outerWidth(true):元素的内容宽度+内距padding值+边框boderWidth+margin(在chrome才有效),其他浏览器里同上面的那个值一样;
    
    配图:
          ie6 ie7 ie8 firefox

         chrome:


  
    2:说说ie跟firefox的调试工具的区别
      大家看图说话吧~有点时候我会搞混,ie的这个408其实是指outerWidth,而不是里面那个方框的宽度哦,里面的那个是300哦
       ie:

     firefox:

      
      
       
      
终于搞清楚了,虽然很简单,但之前老是听别人讲,我还以为很麻烦呢,原来也还好。
学css最重要的就是兼容性了,我以后会把我碰到的一些兼容问题总结出来。
我一定要把css+div学的很精通~!