1.什麼是盒子模型?

在我們HTML頁面中,每一個元素都可以被看作一個盒子,而這個盒子由:內容區(content)、填充區(padding)、邊框區(border)、外邊界區(margin)四部分組成。

2.盒子模型有兩種

1.標準盒模型:一個塊的總寬度(頁面中佔的寬度)=width+margin(左右)+padding(左右)+border(左右)

2.怪異盒模型:一個塊的總寬度=width+margin(左右)(即width已經包含了padding和border值)(IE瀏覽器)

3.標準和怪異模型的轉換

box-sizing:content-box;將採用標準模式的盒子模型標準

box-sizing:border-box;將採用怪異模式的盒子模型標準

box-sizing:inherit;規定應從父元素繼承box-sizing屬性的值

4.js盒模型

怎麼獲取和設定box的內容寬高
IE： dom.currentStyle.width/height

非IE: window.getComputedStyle(dom).width/height

var obj = document.getElementById("box");

var style = null;
if (window.getComputedStyle) {
    style = window.getComputedStyle(obj, null);    // 非IE
} else { 
    style = obj.currentStyle;  // IE
}
alert("width=" + style.width + "\nheight=" + style.height);

 

5.盒模型產生的雙邊距重合問題解決