文件中每個元素都會被描述為乙個矩形盒子，盒子有乙個邊界，分別為margin edge，border edge，padding edge，content edge。盒子模型分為標準盒子模型和ie盒子模型（微軟沒有遵從w3c標準）
這兩者的關鍵差別在於：w3c盒子模型——屬性高（height）和屬性寬（width）這兩個值不包括（padding）和邊框（border）；ie盒子模型——屬性高（height）和屬性寬（width）這兩個值包含填充（padding）和邊框（border）。
css如何設定這兩種模型？
（1）」標準模式」下各個瀏覽器是沒有區別的，以寬度為例：
總寬度=marginleft+borderleft+paddingleft+contentwidth+paddingright+borderright+marginright（w3c標準盒子模型）。頁面在」怪異模式」下，css中為元素的width和height設定的值在標準瀏覽器和ie系列（ie9除外）裡的代表的含義是不同的（ie盒子模型）。也就是說在「怪異模式」下ie瀏覽器使用的ie盒子模型。
在html和css的標準化未完成之前，各個瀏覽器對於html和css的解析有各自不同的實現，而有很多舊的網頁都是按照這些非標準的實現去設計的。在html和css標準確定以後，瀏覽器一方面要按照標準去實現對html和css的支援，另一方面又要保證對非標準的舊網頁設計的後向相容性。因此，現代的瀏覽器一般都有兩種渲染模式：標準模式和怪異模式。在標準模式下，瀏覽器按照html和css標準對文件進行解析和渲染；在怪異模式下，瀏覽器則按照舊有的非標準的實現方式對文件進行解析和渲染。這樣的話，對於舊有的網頁，瀏覽器啟動怪異模式，就能夠使得舊網頁正常顯示；對於新的網頁，則可以先啟動標準模式，使得新網頁能夠用html和css標準特性。知道了這兩種渲染模式的來由，那剩下的問題就是瀏覽器如何能夠確定應該使用哪種模式了。其實歸根結底就是，瀏覽器如何能將舊網頁和新網頁區分開來。前提是頁面處於」怪異模式」，「標準模式」不存在相容性問題。假設內容的寬度必須固定為100px
#box#box
box-sizing有兩個值乙個是content-box， 另乙個是border-box。
當設定為box-sizing:content-box時，將採用標準模式解析計算，也是預設模式；
當設定為box-sizing:border-box時，將採用怪異模式解析計算；
js如何設定獲取盒模型對應的寬和高？
dom.style.width/height
dom.currentstyle.width/height //渲染之後的寬高 只ie支援
window.getcomputedstyle(dom).width/height //所有瀏覽器支援 渲染之後的寬高
dom.getboundingclientrect().width/height //計算元素的絕對位置，根據viewport左上角確定，會得到left top width height
CSS盒模型（標準模型和IE模型）
css盒模型就是乙個盒子，封裝周圍的html元素，包括border 邊框 padding 內邊距 margin 外邊距 content 實際內容 css盒模型 標準模型和ie模型 標準盒模型 width是內容區的寬度，width會跟隨padding margin，border變化而變化,元素真正的寬...
標準盒模型和IE盒模型
盒子模型是css中乙個重要的概念，理解了盒子模型才能更好的排版。其實盒子模型有兩種，分別是ie 盒子模型和標準 w3c 盒子模型。他們對盒子模型的解釋各不相同，先來看看我們熟知的標準盒子模型 從上圖可以看到標準w3c 盒子模型的範圍包括 margin border padding content，並...
標準盒模型和 IE 盒模型
盒模型講解 我們今天只會提到 標準盒模型，和 ie 盒模型，兩種盒模型模式講解。首先來看標準盒模型。只要是盒模型都會有這四個屬性 margin,border,padding,content 這四個部分。也就是說乙個基本的盒模型由著四部分組成。樣子如下 這裡要說明的是，為了體現出盒模型的層次感。這裡的...