都市傳說:「網頁跑版時,設定 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)
物件寬度
範例: (padding+ border)
物件寬度
總結
box-sizing控制寬度值,border-box指定寬度值邊寬與邊寬之間。padding+border 就會自動往內推。
參考資料
文章 : https://ithelp.ithome.com.tw/articles/10252827
影片: https://www.youtube.com/watch?v=O8EOgg-hhvI