【CSS必學屬性】box-sizing
閱讀時間約 1 分鐘
都市傳說：「網頁跑版時，設定 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
2會員
2內容數
留言0
查看全部
你可能也想看
CSS在現代網站設計中扮演的關鍵角色在當今日新月異的數位時代，網站已經不僅僅是一個給人們提供資訊的平臺，更是一個互動性、視覺吸引力和功能性兼具的數位體驗。而CSS（Cascading Style Sheets）正是網站設計中的一個重要元素，扮演著關鍵的角色。
2024-05-30
CSS - margin、paddingCSS Box Model
是在 CSS 裡面，html 的每個元素都可被視作為一個盒子，然後可以針對這個盒子去做調整，看以下圖片:
簡單來說margin就是一個是外邊距，與外層元素的間距
Margin 用於控制元素與其周邊元素的間隔，可以設定為正數（增加與其他元素的距離）、負數（減少與其他
2024-05-11
CSS-position今天來介紹一下比較常用的4種定位方式
其中讓我最搞混的是relative跟absolute
position: relative
還未定top, bottom, left, right 的屬性時，預設會套用position:static，但如果你去設定了top, bottom, left, ri
2024-05-11
CSS 習作｜初學 CSS 必經的犯錯道路本篇為隨筆紀錄，將看完的影片疏理為短小筆記 。
特別有感的是，現在回頭看，發現影片中每個提及的知識點或是誤區自己都踩過好幾輪了，這是在學習及練習中很常會反覆發生、需要注意的地方，提醒自己在接下來的練習中，能將老師提及的思維及作法吸取並應用。
2023-09-10
[CSS筆記] transition、transform、animation 動畫屬性這是一篇關於 CSS 動畫屬性的學習筆記，如果你剛好也在學習的話，歡迎進來看看！
2022-01-09
CSS grid 達成類似 table colspan, rowspan 排版css display grid可以達到類似table span的排版效果，但還是有些差異，table的span其實是合併，css grid比較像是要佔幾格的意思。
如下程式碼為例，colspan是要往右合併的意思，因此會少一個td。
E
css grid colspan sample code:
2021-11-20
【自學CSS】min-width、max-width 到底怎麼用？響應式網頁應用解析相信大家在一開始接觸 CSS 時，一定會很疑惑為什麼除了 width 外，還會有 max-width 及 min-width 語法呢？
當要開發響應式網頁時，到底要使用什麼語法來控制「斷點」？
2021-11-14
css overflow-y: auto not working in iPad筆記一下，原本寫成overflow-y: auto，在windows chrome瀏覽器有y scroll bar，唯獨iPad沒有scroll bar，解法如下:
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
本筆記參考:
1. h
2021-10-07
【CSS 教學】什麼時候該使用 margin 、padding？前端都該要懂的盒模型！ 對於前端初學者來說，在切版時會出現很多規則、不規則的網頁區塊，這時候我們會嘗試用各種相對定位、絕對定位、margin 或是 padding 的方式來進行網頁區塊的推擠。
2021-09-28