CSS 標準盒子模型和怪異盒子模型的區別

2021-10-03 03:59:56 字數 1088 閱讀 6384

一、什麼是盒子模型(box model)

盒子想必大家都是知道的吧!

生活中我們的快遞有盒子包裝著,買的蛋糕也是有盒子包裝著,我們的禮品也是被盒子包裝著。

模型是什麼呢?

它是主觀意識借助實體或者虛擬表現構成客觀闡述形態結構的一種表達目的的物件

css中的盒子模型它是可以對元素進行布局,設定距離的大小,這裡面包括含有外邊距、邊框、內邊距和內容主體這四個部分。

二、css中的標準盒子模型(w3c標準的盒子模型)

css中的盒子模型也是主觀意識借助實體或者虛擬表現構成客觀闡述形態結構的一種表達目的的物件,在網頁的實體中我們是看不見實際盒子模型的。但是我們能夠清楚的看到它起到的作用。

來看看我們的標準盒子模型圖吧!

1、盒子模型由」 content(內容)+padding(內邊距)+border(邊框)+margin(外邊距)「四個部分組成

2、標準盒子模型的計算

如圖:標準的盒子模型的大小是:content(區域內容大小)+padding(內邊距)+border(邊框)+margin(外邊距);

注:標準盒子的初始設定寬高大小不包含padding、border和margin的大小。

三、怪異盒子模型(ie標準的盒子模型)

1、怪異盒模型也叫ie盒子模型

2、怪異盒子(ie盒子模型)模型的計算

如圖可見新增了怪異盒的div盒子寬度變小了。

標準的盒子模型的大小是:content(區域內容大小)+margin(外邊距);

注:怪異盒子的初始設定寬高大小包含padding、border大小在內,但不包含margin的大小。

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

css中的盒子模型 box model 分為兩種 w3c標準盒子模型和ie標準盒子模型。大多數的瀏覽器都採用w3c標準,而ie採用的是ie標準。而怪異模式是指 部分瀏覽器在支援w3c標準的同時還保留了原先的解析模式 怪異模式主要表現在ie核心的瀏覽器中。通過對比來分析標準模式和怪異模式對於塊大小的定...

盒子模型與怪異盒子模型

所有html元素可以看作盒子,在css中,box model 這一術語是用來設計和布局時使用。css盒模型本質上是乙個盒子,封裝周圍的html元素,它包括 邊距,邊框,填充,和實際內容。盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。下面的說明了盒子模型 box model content...

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

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