從今天開始打算陸陸續續寫一些前端方面的知識點總結，也方便自己鞏固和複習。如果有人能看見還幫助了你，那也是極好的hhhh。

分析與解答：

1.盒子模型有兩種，W3C的標盒模型和IE的怪異盒模型

（1）W3C定義的標準盒模型包括margin、border、padding、content ，而區別在於標準盒模型元素的width=content的寬度

  （2）IE怪異盒模型與W3C的標準盒模型唯一區別就在於元素的寬度，元素寬度的width=content+padding+border

理解的記憶：

我個人認為W3C定義的標準盒模型與IE定義怪異盒模型中，IE定義的比較貼近於生活，和我們現實生活的盒子是一樣的，元素的寬度包含border（外殼）和padding（填充物），content（物品），W3C也認識到自己的問題了，所以在CSS3中新增了一個樣式box-sizing，包含兩個屬性content-box 和 border-box。可以改變當前的盒模型模式。

（1） content-box  元素的width=content+padding+border （（預設是content-box））

.div1{  

    box-sizing:content-box;  
    width:100px;//這裡是設定的content的width=100px 所以總的元素是160px content=width
    height:100px;  
    padding:20px;  
    border:10px solid #eee;  
}  

2） border-box  ：元素的width=width

.div1{  
    box-sizing:border-box;  
    width:100px;//這裡的width就是總的100px 即元素的width=100px 而content的width=40px 
    height:100px;  
    padding:20px;  
    border:10px solid #eee;  
}  
 

而在怪異模式中，元素的content寬度是由x減左右padding

關於margin：不管是在IE盒模型還是W3C標準盒模型中，margin產生的效果是一樣的，都是會佔用實際的空間，但是不改變盒子大小。