【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