css盒子模型：網頁設計中css技術所使用的一種思維模型。
css盒子模型組成：外邊距（margin）、邊框（border）、內邊距（padding）、內容（content）。
css盒子模型分為：標準w3c盒子模型，ie盒子模型，注意在兩種模型中寬（width）和高（height）包括屬性的不同。
標準w3c盒子模型：
w3c模型中：
css中的寬（width）=內容（content）的寬
css中的高（height）=內容（content）的高
eg:w3c模型
則此div的實際大小：
div高=height+（padding+border+margin）*2=50+(2+1+3)*2=62px;
div寬=width+（padding+border+margin）*2=50+(2+1+3)*2=62px;
div內容佔大小：
div高=height=50px;
div寬=width=50px;
ie盒子模型：
ie模型中：
css中的寬（width）=內容（content）的寬+（border+padding）*2
css中的高（height）=內容（content）的高+（border+padding）*2
eg:w3c模型
則此div的實際大小：
div高=height+margin*2=50+3*2=56px;
div寬=width+margin*2=50+3*2=62px;
div內容佔大小：
div高=height-（border+padding）*2=50-（1+2）*2=44px;
div寬=width-（border+padding）*2=50-（1+2）*2=44px;
解決辦法：
在**頂部加如下的 doctype 宣告，
使頁面以w3c盒子模型渲染。
eg：
為了讓網頁能相容各個瀏覽器，讓我們用標準 w3c 盒子模型。
ie 盒子模型和標準 w3c 盒子模型
盒子模型是css中乙個重要的概念，理解了盒子模型才能更好的排版。其實盒子模型有兩種，分別是 ie 盒子模型和標準 w3c 盒子模型。他們對盒子模型的解釋各不相同，先來看看我們熟知的標準盒子模型 從上圖可以看到標準 w3c 盒子模型的範圍包括 margin border padding content...
w3c盒子模型與ie盒子模型
盒子模型是css的專有名詞，用來描述頁面設定中的各種屬性，如內容 content 填充 padding 邊框 border 邊界 margin 由於這些屬性拼在一起，與日常生活中的 盒子 很相像，因而稱作盒子模型 盒子模型是分為兩類的，一類是w3c盒子模型，另一類是ie盒子模型，最根本區別就是 屬性...
IE盒子模型和標準的W3C標準的盒子模型
利用css來布局頁面布局div有點邏輯性 重點理解盒子模型,標準流和非標準流的區別,還有定位原理 把這3個攻破了,就非常簡單了 多實踐多參考 最後就是相容問題了,在實踐中自然就有經驗了 這些相容技巧都是經驗來的 盒子模型有兩種，分別是ie 盒子模型和標準 w3c 盒子模型。他們對盒子模型的解釋各不相...