w3c盒子和ie盒子介紹以及區別

2021-10-25 02:08:03 字數 646 閱讀 2370

1.盒子模型

標準模型由四部分組成:

margin(外邊距) - 清除邊框外的區域,外邊距是透明的。

border(邊框) - 圍繞在內邊距和內容外的邊框。

padding(內邊距) - 清除內容周圍的區域,內邊距是透明的。

content(內容) - 盒子的內容,顯示文字和影象。

w3c標準盒子模型box-sizing : content-box

盒子實際內容(content)的width/height=設定的width/height

盒子總寬度/高度=width/height+padding+border+margin

ie盒子模型box-sizing : border-box

盒子的(content)寬度=設定的width - 內邊距padding - 邊框border寬度

盒子總寬度/高度=width/height + margin = 內容區寬度/高度 + padding + border + margin

模型區分:

標準表型指的是設定box-sizing為content-box的盒子模型,一般width,height指的是content的寬高。ie盒模型指的是box-sizing為border-box的盒子。寬高的計算是content+padding+border;

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

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

w3c盒子模型與ie盒子模型

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

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

css盒子模式都具備的屬性包括 內容 content 填充 padding 邊框 border 邊界 margin 盒子模型分為兩類 w3c標準盒子模型和ie盒子模型 微軟確實不喜歡服從他家的標準 這兩者的關鍵差別就在於 我們在編寫頁面 的時候應該盡量使用標準的w3c盒子模型 需要在頁面中宣告doc...