1. 什么是盒模型？
css中的每個元素都是一個盒模型， 包括html body元素， 瀏覽器解析css的時候也會把每個元素看成一個盒子來解析。 盒模型具備的屬性（存在的特點）有： content （用戶設置的width和height）、padding（內邊距，用戶設置的padding值） 、margin（外邊距，用戶設置的margin值）、border（邊框 用戶設置的border值） 、background（背景）等。
2.盒模型的分類？
（1）
IE6混雜盒模型：IE6混雜盒模型是由IE瀏覽器提出的一個盒模型，主要是為了解決布局的問題，在沒有css3之前觸發的條件是需要IE6瀏覽器 以及頁面的代碼是怪異模式（怪異模式是指在解析代碼的時候瀏覽器不按照w3c標准解析，而按照瀏覽器自己的解析方式進行解析，由於不同瀏覽器解析方式不同因此我們稱之為怪異模式），觸發怪異模式只需要在寫html頁面的時候第一行不寫<Doctype html> 或者寫錯單詞均可觸發。 IE6混雜盒模型的特點是： 完整的盒子 = content（用戶設置的寬高） + margin 也可說 盒子的content部分（用戶設置的寬高部分） = 實際內容區的寬高 + padding（用戶設置的內邊距） + border（用戶設置的邊框部分）
觸發怪異模式並不能讓頁面對頁面中的盒子用IE6混雜盒模型來解析 怎么能用IE6混雜模式盒模型來解析呢 ？ 怪異模式 + IE6瀏覽器
（2）
W3C標准盒模型： w3c組織提出的統一的標准盒模型： 特點是： 完整的盒子 = content（用戶設置的寬高） + padding （用戶設置的內邊距）+ border（用戶設置的邊框） + margin（用戶設置的外邊距）
由於IE6混雜盒模型可以解決一些布局上的問題，因此w3c組織在css3中將其加入，
即css3中的可以選擇盒模型的類型: box-sizing: border-box（使用IE6混雜盒模型）/content-box（使用標准盒模型）;
盒模型實現布局
效果：
不加box-sizing的效果
給元素加box-sizing的效果
