當對乙個文件進行布局的時候，瀏覽器的渲染引擎會根據標準之一的 css 基礎框盒模型，將所有元素表示為乙個個矩形的盒子。css 決定這些盒子的大小、位置以及屬性（例如顏色、背景、邊框尺寸…）。
其實每個元素都是乙個乙個的盒子，它由margin,border,padding,content組成，平時我們就在對裡面的content設定各種樣式，整體的盒子就會根據設定的樣式渲染在瀏覽器中。
1.w3c標準盒模型
box-sizing="content-box";公式：
width = 內容的寬度
height = 內容的高度
2.ie盒模型(怪異盒模型)
box-sizing="border-box";公式：
width = border + padding + 內容的寬度
height = border + padding + 內容的高度
1.標準盒模型：只設定content的大小。 ie盒模型:將整個元素看成整體設定大小。
2.css的盒模型由content(內容)、padding(內邊距)、border(邊框)、margin(外邊距)組成。但盒子的大小由content+padding+border這幾部分決定，而不加上margin。
3.我們在編寫頁面**時應盡量使用標準的w3c模型(需在頁面中宣告doctype型別)，這樣可以避免多個瀏覽器對同一頁面的不相容。
因為若不宣告doctype型別，ie瀏覽器會將盒子模型解釋為ie盒子模型，firefox等會將其解釋為w3c盒子模型；若在頁面中宣告了doctype型別，所有的瀏覽器都會把盒模型解釋為w3c盒模型。
css盒模型詳解
每天一道面試題：兩種盒模型分別說一下，什麼是盒模型？
CSS的兩種盒模型
關於css的盒子模型相信學習前端的同學都有所耳聞，因為它太基礎太重要了。提起盒子模型，大家可能會想到content，padding，border，margin這些詞彙，還有也許還會想起盒子模型有兩種，比如ie的盒子模型與w3c的盒子模型，那麼我們怎麼來區分呢？先來看看w3c的盒子模型 w3c 盒子模...
css的兩種盒模型
前言 初學 css 的時候 div 的一些寬高問題經常會引起一些不好理解的問題，這裡做乙個關於css盒模型的分享。問題下面的 可以直接複製出去執行哦 lang en charset utf 8 css盒模型title head type text css content style class co...
css 兩種盒模型
w3c 模型 box sizing border box content box 這是由 css2.1 規定的寬度高度行為。寬度和高度分別應用到元素的內容框。在寬度和高度之外繪製元素的內邊距和邊框。border box 為元素設定的寬度和高度決定了元素的邊框盒。就是說，為元素指定的任何內邊距和邊框都...