W3C盒子模型和IE盒子模型及其檢測

2021-09-01 03:34:07 字數 654 閱讀 4660

css盒子模式都具備的屬性包括:內容(content)、填充(padding)、邊框(border)、邊界(margin)。

盒子模型分為兩類:w3c標準盒子模型和ie盒子模型(微軟確實不喜歡服從他家的標準)

這兩者的關鍵差別就在於:

我們在編寫頁面**的時候應該盡量使用標準的w3c盒子模型(需要在頁面中宣告doctype型別),這樣可以避免多個瀏覽器對同一頁面的不相容。

因為如果不宣告doctype型別,ie會將盒子模型解釋為ie盒子模型,firefox等會將其解釋為w3c盒子模型;

而如果在頁面中宣告了doctype模型,所有的瀏覽器都會把盒子模型解釋為w3c盒子模型。

請看下面一段**:

以上**顯示的是w3c的標準盒子模型,去掉第一行就是ie盒子模型。

看看這簡單**在瀏覽器中的展示:

標準模型在兩個瀏覽器中顯示相同

ie盒子模型在不同瀏覽器中顯示有差異,容易出現bug

另外,檢測頁面的盒子模型類別可以使用jquery中的$.boxmodel屬性(現已經不再推薦使用)或者$.support.boxmodel屬性。如果返回值為true表示w3c盒子模型,如果為false則為ie盒子模型。

w3c盒子模型與ie盒子模型

盒子模型是css的專有名詞,用來描述頁面設定中的各種屬性,如內容 content 填充 padding 邊框 border 邊界 margin 由於這些屬性拼在一起,與日常生活中的 盒子 很相像,因而稱作盒子模型 盒子模型是分為兩類的,一類是w3c盒子模型,另一類是ie盒子模型,最根本區別就是 屬性...

ie 盒子模型和標準 w3c 盒子模型

盒子模型是css中乙個重要的概念,理解了盒子模型才能更好的排版。其實盒子模型有兩種,分別是 ie 盒子模型和標準 w3c 盒子模型。他們對盒子模型的解釋各不相同,先來看看我們熟知的標準盒子模型 從上圖可以看到標準 w3c 盒子模型的範圍包括 margin border padding content...

IE盒子模型和標準的W3C標準的盒子模型

利用css來布局頁面布局div有點邏輯性 重點理解盒子模型,標準流和非標準流的區別,還有定位原理 把這3個攻破了,就非常簡單了 多實踐多參考 最後就是相容問題了,在實踐中自然就有經驗了 這些相容技巧都是經驗來的 盒子模型有兩種,分別是ie 盒子模型和標準 w3c 盒子模型。他們對盒子模型的解釋各不相...