我們都知道ie瀏覽器的盒子模型跟以firefox為代表的標準盒子模型有差異，有差異就會影響我們的設計，首先來看一看他們的盒子到底是什麼樣的。
首先需要說明的是，如果想看每個瀏覽器的盒子模型的話，那麼我們頁面源**上就不能出現
否則，各瀏覽器將會按照w3c標準盒子模型來解析您的**。
請看**：
預覽效果前說明：
在ie環境下
width:300px,即該div的所有邊框，內邊距的寬度將被包含在width:300px中，除了margin的寬度在300px以外。好像所有邊框，內邊距向內凹陷，內容區域縮小。
css寬度公式：width=borderleft+paddingleft+content+paddingright+borderright(該公式中的width為css語法中的寬度)
元素寬度公式：allwidth=marginleft+width+marginright(該公式為該元素整體的寬度)
公式證明：
總結之後得出下圖：
在ff等標準瀏覽器環境下
width:300px,只是內容部分的寬度，並不包括內邊距，邊框，好像從內容區域向外擴充套件內邊距，邊框，外邊距。
css寬度公式：width=content(該公式中的width為css語法中的寬度)
元素寬度公式：allwidth=marginleft+borderleft+paddingleft+width+paddingright+borderright+marginright(該公式為該元素整體的寬度)
公式證明：
在標準環境下
首先在我們的源**的首行加上如下這行
所有公式均按照在火狐瀏覽器下的計算
效果如下圖：
總結：標準的盒子模型如下圖所示
盒子模型與怪異盒子模型
所有html元素可以看作盒子，在css中，box model 這一術語是用來設計和布局時使用。css盒模型本質上是乙個盒子，封裝周圍的html元素，它包括 邊距，邊框，填充，和實際內容。盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。下面的說明了盒子模型 box model content...
css盒子模型 CSS 盒子模型
css 盒子模型基本上是面試的必考題，因為實在是太重要了。以前寫 css 總是感覺元素的寬高十分難調，其中乙個很大的問題就是忽略了盒子模型的重要性。說到 css 盒子模型，你可能會說我知道呀，就是 margin 包 border,border 包 padding,padding 包 content ...
html盒子模型 jquery盒子模型
最近學了jquery的盒子模型之後，感覺真的顛覆我之前對盒子模型的看法，我在最初以為盒子模型只存在於html,我們就來看看他們有何區別。1.html盒子模型 如果說js裡面萬物皆是物件，那麼html裡面的萬物皆是盒子。不是盒子的我們也可以用dispiay block 變成盒子。那他的盒子是怎麼計算的...