利用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 盒子模型」。
所以為了讓網頁能相容各個瀏覽器，讓我們用標準 w3c 盒子模型
標準盒子模型和IE盒子模型
盒子模型是css中乙個重要的概念，理解了盒子模型才能更好的排版。其實盒子模型有兩種，分別是ie 盒子模型和標準 w3c 盒子模型。他們對盒子模型的解釋各不相同，先來看看我們熟知的標準盒子模型 從上圖可以看到標準w3c 盒子模型的範圍包括 margin border padding content，並...
CSS標準盒子模型和IE怪異盒子模型
css中的盒子模型 box model 分為兩種 w3c標準盒子模型和ie標準盒子模型。大多數的瀏覽器都採用w3c標準，而ie採用的是ie標準。而怪異模式是指 部分瀏覽器在支援w3c標準的同時還保留了原先的解析模式 怪異模式主要表現在ie核心的瀏覽器中。通過對比來分析標準模式和怪異模式對於塊大小的定...
css 盒子模型 ie盒子模型
css盒子模型 網頁設計中css技術所使用的一種思維模型。css盒子模型組成 外邊距 margin 邊框 border 內邊距 padding 內容 content css盒子模型分為 標準w3c盒子模型，ie盒子模型，注意在兩種模型中寬 width 和高 height 包括屬性的不同。標準w3c盒...