1、對盒子模型的不同解釋
這裡ie6、ie8、ie9相同，火狐和谷歌、遨遊等相同。先說盒子模型，css將所有的html塊元素都看成是乙個盒子（box),每個盒子有以下幾個組成部分：content(內容）、padding（補白）、border（邊框）、margin（邊界）。火狐谷歌等較新的的瀏覽器實行加法運算，「向外擴張」。以高度為例，css中設定的高度為內容的高度，當增大padding或是border時，盒子變大，向外擴張，但內容的高度保持不變。盒子的實際高度=內容height+2*padding+2*border。在ie的各版本中則實行減法運算，「向內壓縮」。還是以高度為例，css中設定的高度為盒子的高度，當增大padding或是border時，盒子不變，內容被壓縮。內容height=容器height-2*padding-2*border。
解決方法：1、在html文件的開頭加上w3c制訂的解析標準
2、hack方法（給不同的瀏覽器寫乙個不同的height）
例如：height：200px;
*height:300px;
火狐等瀏覽器只認第乙個格式的height，ie版本的瀏覽器兩個都能認，但優先選擇第二種格式的height值。
2、子塊元素和父塊元素的巢狀
以塊級元素div為例，div2巢狀在div1內，其中div2與div1的間距是以div1的內容為基準的。當div內容的height
解決方法：1、放大父div的高度
2、縮小margin值
在設定高度之前需精確計算，確保不會出現這種情況，否則影響網頁的顯示效果。
3、float屬性對margin的影響
以向左漂浮為例，div設定float：left，若設定margin-left：10px，在ie6中會出現雙倍解析問題，也就是該div距離父div左邊緣的實際距離是20px，其他瀏覽器中則正常。注意該差異只是在父——子div中才存在，同一級的div中沒有差異。
這種情況也是標準化所不能約束的，解決方法是該子div的display：inline，可消除ie6的雙倍解析問題。
盒子模型（box model）是 css 的核心，現代 web 布局設計簡單說就是一堆盒子的排列與巢狀，掌握了盒子模型與它們的擺放控制，會發現再複雜的頁面也不過如此，然而，任何美好的事物都有缺憾，盒子模型有兩種不同的詮釋，一種來自 ie6，一種來自 w3c 標準瀏覽器。
下圖就是乙個典型的盒子模型示意圖
在內容區外面，依次圍繞著 padding 區，border 區，margin 區，這一模型結構在所有主流瀏覽器都是一致的。通過盒子模型，我們可以為我們的內容設定邊界，留白以及邊距，盒子模型最典型的應用是這樣：我們有一段內容，可以為這段內容設定乙個邊框，為了讓內容不至於緊挨著邊框，可以設定 padding ，為了讓這個盒子不至於和別的盒子靠得太緊，可以設定 margin。
到目前為止，一切都很完美，直到當我們想為這個盒子設定乙個尺寸的時候。
當我們試圖為乙個盒子設定尺寸的時候，問題出現了。ie6 和 w3c 標準瀏覽器對盒子模型有不同的解釋，這個不同解釋表現在盒子的尺寸上，下圖是兩種型別的瀏覽器對盒子尺寸的不同解釋示意圖：
可以看出，ie6 盒子模型中，盒子的尺寸包含了 內容區，padding， border 和 margin 這四個部分，而 w3c 的盒子模型中，盒子的尺寸只包含內容區，padding，border 和 margin 被排除在盒子尺寸之外。
在現實世界中，我們描述乙個物理盒子的時候，如果談到尺寸，是不會只計算其盛放的物體的尺寸的，我們還會算上空隙與盒體本身。拿貨櫃裝箱為例，我們有 100 只花瓶，每只花瓶用1個紙盒包裝，為了防止花瓶破碎，我們在花瓶周圍塞上泡沫，這相當於 padding，紙盒的外圍紙板相當於 border，在裝貨櫃的時候，為了防止紙盒之間相互碰撞，紙盒之間塞上稻草，這相當於 margin，很顯然，我們向貨運公司報告我們貨物尺寸的時候，是要將整個紙盒的尺寸，連同紙盒之間需要塞稻草的空隙都告訴他們的，倘若只報告花瓶的尺寸，貨運公司是沒有辦法裝箱的。
再舉乙個例子，假若我們有一面牆，要在上面掛10幅油畫，油畫是用相框裱糊的，相框的邊框相當於 border，油畫和邊框之間的距離相當於 padding，相框之間的間隔相當於 margin，這個例子和 web 布局設計已經很接近了，對任何人來說，使用 ie6 的盒子模型，將整個相框，包括油畫當做乙個整體更容易布局，當你知道了整個相框的尺寸後，不必再去考慮 padding, border, margin 這個因素的影響，每個相框就是乙個整體，至於 padding, border 與 margin，這是瀏覽器自己事，不需要設計者去關心。
在具體 web 設計中，尤其牽扯到複雜網格布局的時候，ie6 的盒子模型更容易控制，我們不妨看看以下幾個設計場景。
1. 面板式介面設計
頁面上包含幾個面板，比如乙個登入面板，乙個最新新聞面板，乙個投票面板，這類設計典型的做法是，用背景圖的方式，首先逐個設計出這些面板的外觀圖，將需要用具體內容替換的地方空著，這些面板，無非就是一些使用面板外觀做背景圖的盒子，然後，在這些盒子裡面，放上具體的內容，使用 padding 控制內容的擺放位置，使用 margin 調整面板本身的擺放位置，由於面板的尺寸是固定的，我們依此確立了盒子的尺寸之後，就無需再關心尺寸問題，然後，不論你怎樣調整 padding 和 margin，都不會影響面板本身的結構。這是 ie6 盒子模型。
而在 w3c 的盒子模型中，調整 padding 和 margin ，都會影響盒子的尺寸，你在調整內容擺放位置的同時，極有可能打亂面板本身的結構。
2. 百分比級尺寸 + 畫素級邊界問題
w3c 盒子模型在設計中最讓人頭疼的是，假如你有乙個不確定寬度的容器，想在裡面放置兩個同樣大小的盒子，最合理的的做法當時是設定每個盒子的寬度為 50%，這樣，不管你的容器寬度為多大，這兩個盒子總能自動適應這個寬度，然而，前提是你不要設定任何 padding 或 border，而，現實中，為了防止兩個盒子中的內容互相挨得太近，你肯定要設定 padding，一旦設定了 padding，就會發現你的容器被撐破了。
當然你會說，每個盒子的寬度不要設為 50%，可以設為 45%，然後為每個盒子再加乙個 5% 的 padding，這是乙個解決辦法，但我們在設計中經常有這樣的習慣，雖然一段內容的寬度可能不確定，但我們總喜歡它擁有固定 padding，我們並不希望 padding 自動適應，況且，在很多時候，我們希望為乙個自適應寬度的盒子，設定乙個 1 畫素的 border，在這種情形，w3c 盒子模型將陷入困境。
而遇到這種情形，ie6 盒子模型不需要任何周折，你只管將每個盒子的寬度設定為 50%，它們會自動適應容器的寬度，然後，不管你你怎樣設定 padding 和 border，都不會撐破你的容器。
雖然 w3c 永遠都不會承認，但他們顯然意識到了這個問題，重新定義盒子模型是不可能了，所以，在 css3 中，我們看到了下面這個屬性：
box-sizing
box-sizing 有兩個可選值，乙個是預設的 content-box 乙個是 border-box，選用後者，盒子模型將按 ie6 的方式進行處理。
css盒子模型 CSS 盒子模型
css 盒子模型基本上是面試的必考題，因為實在是太重要了。以前寫 css 總是感覺元素的寬高十分難調，其中乙個很大的問題就是忽略了盒子模型的重要性。說到 css 盒子模型，你可能會說我知道呀，就是 margin 包 border,border 包 padding,padding 包 content ...
css盒子模型 說說css盒子模型
引用mdn官方的解釋 當對乙個文件進行布局 lay out 的時候，瀏覽器的渲染引擎會根據標準之一的 css 基礎框盒模型 css basic box model 將所有元素表示為乙個個矩形的盒子 box css 決定這些盒子的大小 位置以及屬性 例如顏色 背景 邊框尺寸 每個盒子由四個部分 或稱區...
css 盒子模型 ie盒子模型
css盒子模型 網頁設計中css技術所使用的一種思維模型。css盒子模型組成 外邊距 margin 邊框 border 內邊距 padding 內容 content css盒子模型分為 標準w3c盒子模型，ie盒子模型，注意在兩種模型中寬 width 和高 height 包括屬性的不同。標準w3c盒...