利用css來布局頁面布局div有點邏輯性!
重點理解盒子模型,標準流和非標準流的區別,還有定位原理!把這3個攻破了,就非常簡單了!多實踐多參考!
最後就是相容問題了,在實踐中自然就有經驗了!這些相容技巧都是經驗來的!
盒子模型有兩種，分別是ie 盒子模型和標準 w3c 盒子模型。他們對盒子模型的解釋各不相同，
先來看看我們熟悉的標準盒子模型：
看不清楚？這裡檢視原圖（大圖）。
從上圖可以看到標準w3c
盒子模型的範圍包括
margin
、border
、padding
、content
，並且content
部分不包含其他部分。
看不清楚？這裡檢視原圖（大圖）。
從上圖可以看到
ie 盒子模型的範圍也包括
margin
、border
、padding
、content
，和標準
w3c
盒子模型不同的是：
ie 盒子模型的
content
部分包含了
border
和pading
。
例：乙個盒子的 margin 為 20px，border 為 1px，padding 為 10px，content 的寬為 200px、高為 50px，如果用標準 w3c 盒子模型解釋，那麼這個盒子需要佔據的位置為：寬20*2+1*2+10*2+200=262px、高20*2+1*2*10*2+50=112px，盒子的實際大小為：寬1*2+10*2+200=222px、高1*2+10*2+50=72px；如果用ie盒子模型，那麼這個盒子需要佔據的位置為：寬20*2+200=240px、高20*2+50=70px，盒子的實際大小為：寬200px、高50px。
那應該選擇哪中盒子模型呢？當然是「標準 w3c 盒子模型」了。怎麼樣才算是選擇了「標準 w3c 盒子模型」呢？很簡單，就是在網頁的頂部加上doctype 宣告。如果不加doctype 宣告，那麼各個瀏覽器會根據自己的行為去理解網頁，即ie 瀏覽器會採用 ie 盒子模型去解釋你的盒子，而 ff 會採用標準 w3c 盒子模型解釋你的盒子，所以網頁在不同的瀏覽器中就顯示的不一樣了。反之，如果加上了doctype 宣告，那麼所有瀏覽器都會採用標準w3c 盒子模型去解釋你的盒子，網頁就能在各個瀏覽器中顯示一致了。
再用 jquery 做的例子來證實一下。
**1：
上面的**沒有加上 doctype 宣告，在 ie 瀏覽器中顯示「ie盒子模型」，在 ff 瀏覽器中顯示「標準 w3c 盒子模型」。
**2：
**2 與**1 唯一的不同的就是頂部加了 doctype 宣告。在所有瀏覽器中都顯示「標準 w3c 盒子模型」。
ie 盒子模型和標準 w3c 盒子模型
盒子模型是css中乙個重要的概念，理解了盒子模型才能更好的排版。其實盒子模型有兩種，分別是 ie 盒子模型和標準 w3c 盒子模型。他們對盒子模型的解釋各不相同，先來看看我們熟知的標準盒子模型 從上圖可以看到標準 w3c 盒子模型的範圍包括 margin border padding content...
標準W3C盒子模型和IE盒子模型 錯了無數次
css盒子模型 網頁設計中css技術所使用的一種思維模型。css盒子模型組成 外邊距 margin 邊框 border 內邊距 padding 內容 content css盒子模型分為 標準w3c盒子模型，ie盒子模型，注意在兩種模型中寬 width 和高 height 包括屬性的不同。標準w3c盒...
w3c盒子模型與ie盒子模型
盒子模型是css的專有名詞，用來描述頁面設定中的各種屬性，如內容 content 填充 padding 邊框 border 邊界 margin 由於這些屬性拼在一起，與日常生活中的 盒子 很相像，因而稱作盒子模型 盒子模型是分為兩類的，一類是w3c盒子模型，另一類是ie盒子模型，最根本區別就是 屬性...