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 盒子模型。他們對盒子模型的解釋各不...