CSS盒模型(標準模型和IE模型)

2021-10-23 19:50:43 字數 846 閱讀 4992

css盒模型就是乙個盒子,封裝周圍的html元素,包括border(邊框)padding(內邊距) margin(外邊距)content(實際內容)

css盒模型:標準模型和ie模型

標準盒模型:width是內容區的寬度,width會跟隨padding ,margin,border變化而變化,元素真正的寬度 是content+border+padding

怪異盒模型:width是元素實際的寬度,padding,margin和border不會影響width的實際寬度和高度

box-sizing: content-box;標準盒模型 是瀏覽器預設值。

box-sizing: border-box;怪異盒模型

**以

<

!doctype html>

開頭的無論什麼瀏覽器執行都是

w3c盒子模型(w3c就是標準盒模型)

大多數瀏覽器採用w3c標準模型,而ie中採用microsoft自己的標準。

怪異模式是「部分瀏覽器在支援w3c標準的同時還保留了原來的解

析模式」,怪異模式主要表現在ie核心的瀏覽器

邊距重疊問題:邊界重疊是指兩個或多個盒子(可能相鄰也可能巢狀)的相鄰邊界(其間沒有任何非空內容、補白、邊框)重合在一起而形成乙個單一邊界。

外層元素padding代替

內層元素透明邊框 border:1px solid transparent;

內層元素絕對定位 position:absolute:

外層元素 overflow:hidden;

內層元素 加float:left;或display:inline-block;

內層元素padding:1px;

標準盒模型和IE盒模型

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

標準盒模型和 IE 盒模型

盒模型講解 我們今天只會提到 標準盒模型,和 ie 盒模型,兩種盒模型模式講解。首先來看標準盒模型。只要是盒模型都會有這四個屬性 margin,border,padding,content 這四個部分。也就是說乙個基本的盒模型由著四部分組成。樣子如下 這裡要說明的是,為了體現出盒模型的層次感。這裡的...

css盒模型(IE和標準)

文件中每個元素都會被描述為乙個矩形盒子,盒子有乙個邊界,分別為margin edge,border edge,padding edge,content edge。盒子模型分為標準盒子模型和ie盒子模型 微軟沒有遵從w3c標準 這兩者的關鍵差別在於 w3c盒子模型 屬性高 height 和屬性寬 wi...