都市傳說：「網頁跑版時，設定 box-sizing: border-box一切搞定！」
什麼是 box-sizing
css新屬性，box-sizing作用控制 width 與 height作用對象空間，也可以說是設定物件尺寸方式。
box-sizing 語法
內容盒子 box-sizing: content-box 【預設】
邊框盒子 box-sizing: border-box
內容盒子 content-box
一開始 width / height 的作用就是設定為內容資料的範圍空間，一個物件的範圍 content-box。
content-box (寬高設定作用在內容範圍)
範例:
物件寬度
指定給內容物空間，padding 和 border 就會往外加。
物件尺寸: width 300px+左 padding 30px + 右 padding 30px = 360px
邊框盒子 border-box
border-box (寬高設定作用在邊框外緣範圍內)
範例: (padding)
物件寬度
寬度會維持 300px
範例: (padding+ border)
物件寬度
總結
box-sizing控制寬度值，border-box指定寬度值邊寬與邊寬之間。padding+border 就會自動往內推。
參考資料
文章 : https://ithelp.ithome.com.tw/articles/10252827
影片: https://www.youtube.com/watch?v=O8EOgg-hhvI
