第一步：先跟據需求定義一個div，要求width為300px，height為300px；
第二步：給該div添加一個邊框，要求實線，寬度10px，粉色；
第三步：給該div再設置20px的內邊距；
我們發現這個div隨着border和padding的設置一直在變大。此時div的占位寬度為：width+padding+border=300+20*2+10*2=360px。
但是我想設置border和padding之后，div還保持width=300px、height=300px，這怎么辦呢？
第一種解決方式：
事先算好div的width和height。比如上面的例子，我想保證div這個盒子模型的寬度和高度為300px，那么就得設置div的寬度的初始值為
width=300-border-padding=300-20-40=240px。高度height同理也是240px。
第二種解決方式：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div{ width:300px; height: 300px; background: #CCC; border: 10px solid pink; padding: 20px; box-sizing: border-box; /*靈魂代碼*/ } </style> </head> <body> <div>css</div> </body> </html>
box-sizing: border-box; 有了這句靈魂代碼之后問題就解決了。它會自動做減法運算保證整個div的width和height為300px。
最終的樣式為：
總結：
在盒子模型中，當盒子的width和height保持不變時，設置盒子的border和padding，此時盒子真實尺寸為：寬度=width+border+padding；
高度=height+border+padding。但是這不是我們想要的結果，我們想設置border和padding時盒子的寬度和高度還是原始值，此時只能通過減少
width和height的像素來實現，box-sizing：border-box；就為我們自動做了減法運算，解決了該問題。