最近在研究css~當設置一個元素width後~有時候也會對他設定padding,margin,border值， 每次這樣我就心裡琢磨，那這個元素的width會變嗎，js獲取元素的寬度width()指的是哪個寬度，還有innerWidth()?outerWidth()?outerWidth(true)
最近在研究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 class="con">搶火車票啦</div> <div class="log"></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學的很精通~！
