CSS W3C標準盒子模型和IE盒子模型

2021-08-21 22:04:20 字數 661 閱讀 1604

在寫html與css的過程中,我們可以將每乙個元素看做乙個盒子,對於普通的瀏覽器以及ie瀏覽器,有兩套不同的解析盒子的方法,第一種是w3c標準盒子模型,第二種是ie盒子模型,下面重點介紹這兩個盒子模型的區別。

1.如何區分

在css中有乙個屬性叫做box-sizing,對於標準的盒子模型,屬性值為border-box,d對於ie來說叫做content-box。

2.內容區,盒子大小,所佔空間的計算

標準盒子(以下以寬度計算,長度類推)

內容區寬度 = width;

盒子寬度 = width + padding-left + padding-right + border-left + border-right;

所佔空間 = 盒子大小 + margin-left = margin-right ;

ie盒子(以下以寬度計算,長度類推)

內容區寬度 = width - padding-left - padding-right - border-left - border-right;

盒子寬度 = width ;

所佔空間 = width + margin-left = margin-right ;

3.**以及圖示

ie盒子

w3c盒子

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

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

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

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

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

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