CSS標準盒子模型和IE怪異盒子模型

2022-04-25 05:16:22 字數 534 閱讀 9545

css中的盒子模型(box model)分為兩種:w3c標準盒子模型和ie標準盒子模型。

大多數的瀏覽器都採用w3c標準,而ie採用的是ie標準。而怪異模式是指「部分瀏覽器在支援w3c標準的同時還保留了原先的解析模式」,怪異模式主要表現在ie核心的瀏覽器中。

通過對比來分析標準模式和怪異模式對於塊大小的定義

標準模式下,乙個塊的寬度 = width+padding(內邊距)+border(邊框)+margin(外邊距);

怪異模式下,乙個塊的寬度 = width+margin(外邊距) (即怪異模式下,width包含了border以及padding);

css3 box-sizing

box-sizing:content-box||border-box||inherit

box-sizing:content-box; 將採用標準模式的盒子模型標準

box-sizing:border-box; 將採用怪異模式的盒子模型標準

box-sizing:inherit; 規定應從父元素繼承 box-sizing 屬性的值。

CSS 盒子模型(標準盒模型和怪異盒模型)

所謂盒子模型 box model 就是把 html 頁面中的元素看作是乙個矩形的盒子,也就是乙個盛裝內容的容器。每個矩形都由元素的內容 content 內邊距 padding 邊框 border 和外邊距 margin 組成。所有的文件元素 標籤 都會生成乙個矩形框,我們稱為元素框 element ...

盒子模型 標準盒模型,怪異盒模型

當你的瀏覽器展現乙個元素時,這個元素會佔據一定的空間。這個空間由四部分組成。中間是元素呈現內容的區域。這個區域的外面是內邊距。再外面是邊框。最外面的是外邊距,外邊距將該元素與其它元素分開。內邊距,邊框和外邊距在元素的上 右 下 左都可以有不同的大小。所有這些大小值都可以為0。顏色 內邊距總是跟元素的...

css 標準盒子模型和IE盒子模型

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