對盒模型的理解

盒模型分為兩種，一種是ie盒模型，一種是w3c盒模型。

ie盒模型用於ie6一下版本的瀏覽器，它的content的寬度是包括了padding和border的

w3c盒模型：content的寬度不包括padding和border

此外兩種盒模型都包括margin（外邊距），在元素外建立額外的空白，空白通常指不能放其他元素的區域，而且在這個區域中可以看到父元素的背景（padding所帶的是本身的背景而非父

元素）。margin經常取負值實現定位的作用。

外邊距有乙個合併問題，經常使人們混淆，簡單來說，外邊距合併指的是，當兩個垂直外邊距相遇時，它們將形成乙個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度

中的較大者。

外邊距雖然不可見，但它在文件中佔據一定的空間，我們需要區分：盒子所佔空間大小（計及margin）和盒子實際大小（不計margin）

使用css3的box-sizing屬性選擇不同的盒模型

box-sizing:content-box        w3c盒模型（預設），盒子大小為content+padding+border

box-sizing:border-box          ie盒模型，盒子大小為content，當保持content不變，只改變padding和border的大小時，盒子的實際大小不會變化

對盒模型的理解

首先這是我第一次寫部落格，請大家多關照。寫的不好的地方請指出來。下面由我來說下我對盒模型的理解。我呢是乙個剛入門三個禮拜的小白，我自認為學前端跟其他的科目是不一樣的。前端是聽得懂，但自己動手時就不會去做。可能這都是小白的必經之路吧。盒模型是網頁布局的基石，盒模型由盒子內容 盒子內填充 盒子本身 盒子...

盒模型理解

參考 盒模型理解 前端的盒模型包括兩種，分別是w3c盒模型和ie盒模型。w3c盒模型包括content padding border margin。其中width content ie盒模型包括content padding border margin。其中width content padding...

理解盒模型

div css有兩種盒模型 標準w3c盒模型 ie盒模型 如何讓瀏覽器能夠按標準盒模型來處理，就是在網頁的頂部加上doctype宣告。如果不加 doctype宣告，那麼各個瀏覽器會根據自己的行為去理解網頁。標準盒模型中width和height指的是內容區域的寬度和高度，增加內邊距 邊框和外邊距不會影...