DIV+CSS两种盒子模型（W3C盒子与IE盒子）
生活随笔
收集整理的這篇文章主要介紹了
DIV+CSS两种盒子模型（W3C盒子与IE盒子）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
在辨析兩種盒子模型之前。先簡單說明一下什么叫盒子模型。
原理：
先說說我們在網頁設計中常聽的屬性名：內容(content)、填充(padding)、邊框(border)、邊界(margin)， CSS盒子模式都具備這些屬性。 這些屬性我們能夠把它轉移到我們日常生活中的盒子（箱子）上來理解。日常生活中所見的盒子也就是能裝東西的一種箱子，也具有這些屬性，所以叫它盒子模式。 特點： 每一個盒子都有：邊界、邊框、填充、內容四個屬性。 每一個屬性都包含四個部分：上、右、下、左。這四部分可同一時候設置。也可分別設置；里的抗震輔料厚度，而邊框有大小和顏色之分，我們又能夠理解為生活中所見盒子的厚度以及這個盒子是用什么顏色材料做成的。邊界就是該盒子與其他東西要保留多大距離。（以上原理與特點摘于百度）以下這幅圖里面，各自是W3C盒子和IE盒子的模型：
大家肯定都能發現。這兩種模型總體來說很的相似。由內到外都是content,padding,border,margin。
可是細致看的話，虛線延長出來的部分，分別標注了height和width，可是在W3C中，虛線包圍的部分僅僅有content。而在IE中，虛線包圍的部分是content+padding+border。
這是最直觀的不同。同一時候這也就是這兩種模型的最大不同點。
W3C 盒子模型的范圍包括 margin、border、padding、content，而且 content 部分不包括其它部分
IE 盒子模型的范圍也包括 margin、border、padding、content，和標準 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包括了 border 和 padding
用一個樣例來實現一下W3C盒子模型:
執行結果:
這張圖僅僅能看到內容和邊框。看不到詳細的分界線，也就不知道填充（padding）和內容（content）詳細的排布。
這里我就順便介紹一中調試工具，firefox瀏覽器里面的firebug，對于平時調試網頁布局各方面的有非常大的幫助。
調試界面就是這樣了。鼠標選中<div>標簽，圖像就發生變化了。總體布局就非常清晰了。
（例如以下圖）
這就非常清晰了吧。同一時候也說明了W3C盒子包括了content，padding，border三部分。
IE盒子的就不寫了，有須要的同學能夠自己試試。眼下大多的網頁布局都是用W3C盒子，它的兼容性很好。所以是不二之選。
轉載于:https://www.cnblogs.com/blfbuaa/p/7000161.html
總結
以上是生活随笔為你收集整理的DIV+CSS两种盒子模型（W3C盒子与IE盒子）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java中将int类型数据存到数组中
- 下一篇： 图解CSS3----5-否定伪类选择器