第一步：先跟據需求定義乙個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。
第二種解決方式：
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；就為我們自動做了減法運算，解決了該問題。
CSS中margin和padding的區別 1
在css中margin是指從自身邊框到另乙個容器邊框之間的距離，就是容器外距離。在css中padding是指自身邊框到自身內部另乙個容器邊框之間的距離，就是容器內距離。下面講解 padding和margin常用的用法 一 padding 1 語法結構 1 padding left 10px 左內邊距...
CSS中margin和padding的區別
在css中margin是指從自身邊框到另乙個容器邊框之間的距離，就是容器外距離。在css中padding是指自身邊框到自身內部另乙個容器邊框之間的距離，就是容器內距離。下面講解 padding和margin常用的用法 一 padding 1 語法結構 1 padding left 10px 左內邊距...
css中margin和padding的使用
1 設定屬性方法 margin和padding都是用來隔開元素，margin用於布局元素使元素與元素互不相干，padding是用於元素與內容之間的間隔。元素四邊可以設定的屬性 margin top,margin right,margin bottom,margin left,padding top,...