盒模型 IE盒模型和W3C盒模型

2021-08-20 07:39:41 字數 762 閱讀 2321

w3c盒模型

可以看到得到的盒子寬度和高度是120+20+20+5+5+10+10 = 190px

ie盒模型

可以看到得到的盒子寬度和高度是120+10+10 = 140px  ! 其中的120 = 70+20+20+5+5。 也就是設定的div寬度包括了內容內邊距和邊框的寬度。

通過這兩對盒子進行對比可以清楚看到兩種盒模型的區別

區別:ie盒模型的內容的寬度中,給div設定的寬度包含padding和border。而w3c盒模型不包含。

盒子需要佔據的空間寬度

盒模型:

盒子實際寬度(高度)=內容(content)+間隙(padding)+邊框(border)+間隔(margin)

可以看出兩個盒模型的區別在於——box-sizing   它預設屬性是content-box

盒子實際寬度(高度)=內容(content)+邊框(border)+間隙(padding)+間隔(margin)

IE 盒模型和W3C盒模型

在css中有兩種盒模型 box sizing屬性可以設定元素應用哪一種盒模型。瀏覽器相容性 ie8及以上 box sizing border box 以上css 會使元素的盒模型為ie盒模型。width 與 height 包括內邊距 padding 與邊框 border 不包括外邊距 margin ...

W3C盒模型與IE盒模型

ss盒子模型 網頁設計中css技術所使用的一種思維模型。css盒子模型組成 外邊距 margin 邊框 border 內邊距 padding 內容 content css盒子模型分為 標準w3c盒子模型,ie盒子模型,注意在兩種模型中寬 width 和高 height 包括屬性的不同。w3c模型中 ...

標準盒模型 w3c 和IE盒模型

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