【CSS必學屬性】box-sizing
都市傳說：「網頁跑版時，設定 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。
範例:
物件寬度
指定給內容物空間，padding 和 border 就會往外加。
邊框盒子 border-box
範例: (padding)
物件寬度
範例: (padding+ border)
物件寬度
總結
box-sizing控制寬度值，border-box指定寬度值邊寬與邊寬之間。padding+border 就會自動往內推。
參考資料
文章 : https://ithelp.ithome.com.tw/articles/10252827
影片: https://www.youtube.com/watch?v=O8EOgg-hhvI
分享至
成為作者繼續創作的動力吧！
