css盒子模型簡析

盒子模型分爲標準盒子模型和怪異的盒子模型

1.標準的盒模型 （content-box）

　　你設置的寬和高（width/height）是內容的部分寬高，因此盒子的實際寬度=內容的寬高+boder+padding+margin

 

 

 

 

 

 我設置的寬爲100px高爲100px，是內容的寬高，實際盒子的寬150px高爲150px     寬=100px(conttent)+20px(padding)+5*2（border）

因此能夠得出：若是你想要的盒子就是寬100px 高爲100px的話，就不能再改變盒子的padding和border的值，選用border-box

2.怪異的盒子模型(border-box)

　你設置的寬和高（width/height）就是盒子的大小，設置的padding和border不會改變盒子的大小，相反的是內容區的高度會隨之而改變

 

 

 

 

 

 從上面的圖可知，只是改變了box-sizing爲border-box

設置的寬高都爲100px 盒子的padding值20px border值爲5px，盒子的寬度沒有改變內容的寬度卻減少了，變成了50px，下面我繼續變大padding能夠明顯的看見變化

 

 

 

 

 padding爲25px border爲5px content寬度爲40px ,盒子的大小沒有變化，仍是100px(25*2+40+5*2)

 

 

 padding爲20px border爲10px content寬度爲40px ,盒子的大小沒有變化，仍是100px(20*2+40+10*2)