2022-03-08|閱讀時間 ‧ 約 2 分鐘

【CSS必學屬性】box-sizing

都市傳說：「網頁跑版時，設定 box-sizing: border-box一切搞定！」

什麼是 box-sizing

css新屬性，box-sizing作用控制 width 與 height作用對象空間，也可以說是設定物件尺寸方式。

內容盒子 box-sizing: content-box 【預設】

邊框盒子 box-sizing: border-box

一開始 width / height 的作用就是設定為內容資料的範圍空間，一個物件的範圍 content-box。

指定給內容物空間，padding 和 border 就會往外加。

物件尺寸: width 300px+左 padding 30px + 右 padding 30px = 360px

border-box (寬高設定作用在邊框外緣範圍內)

寬度會維持 300px

box-sizing控制寬度值，border-box指定寬度值邊寬與邊寬之間。padding+border 就會自動往內推。

文章 : https://ithelp.ithome.com.tw/articles/10252827

影片: https://www.youtube.com/watch?v=O8EOgg-hhvI

分享至

成為作者繼續創作的動力吧！

從 Google News 追蹤更多 vocus 的最新精選內容

成為會員後即可發表留言