什麼是box-model?

意思是在 CSS 裡面，html 的每個元素都可被視作為一個盒子，然後可以針對這個盒子去做調整

• Margin -負責調整 元素與元素 之間的邊界間距，屬於元素外部的邊界調整。
• Padding-負責調整 元素內所有內容與元素自身 的邊界間距，屬於元素內部的邊界調整。
• Border-元素最外層的邊界，常見的元素外框設定就是此設定。

懶人包:margin推外邊界，padding、border推內邊界

如圖原本設定的width:200px,實際寬度為width+左右padding+左右border=240px。

box-sizing: border-box;

覺得計算盒模型很麻煩嗎？就用這個吧！
box-sizing: content-box; 這個是預設屬性。
box-sizing: border-box; 用這個屬性的話，就會把 padding 等地考慮進來，而自動做內縮調整。

懶人包:運用box-sizing: border-box，寬度就不會隨著padding和border影響，但要小心內容會隨著內縮影響。

如圖原本寬度因為設定padding及border=240px,運用box-sizing: border-box，寬度變回原本設定200px