【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。
content-box (寬高設定作用在內容範圍)

範例:

物件寬度

指定給內容物空間,padding 和 border 就會往外加。
物件尺寸: width 300px+左 padding 30px + 右 padding 30px = 360px

邊框盒子 border-box

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

範例: (padding)

物件寬度

寬度會維持 300px

範例: (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
查看全部
發表第一個留言支持創作者!
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
在當今日新月異的數位時代,網站已經不僅僅是一個給人們提供資訊的平臺,更是一個互動性、視覺吸引力和功能性兼具的數位體驗。而CSS(Cascading Style Sheets)正是網站設計中的一個重要元素,扮演著關鍵的角色。
CSS Box Model 是在 CSS 裡面,html 的每個元素都可被視作為一個盒子,然後可以針對這個盒子去做調整,看以下圖片: 簡單來說margin就是一個是外邊距,與外層元素的間距 Margin 用於控制元素與其周邊元素的間隔,可以設定為正數(增加與其他元素的距離)、負數(減少與其他
今天來介紹一下比較常用的4種定位方式 其中讓我最搞混的是relative跟absolute position: relative 還未定top, bottom, left, right 的屬性時,預設會套用position:static,但如果你去設定了top, bottom, left, ri
Thumbnail
避免網頁在不同瀏覽器中長不一樣。用 CSS Reset 來「重置」和統一瀏覽器預設樣式。
Thumbnail
本篇為隨筆紀錄,將看完的影片疏理為短小筆記 。 特別有感的是,現在回頭看,發現影片中每個提及的知識點或是誤區自己都踩過好幾輪了,這是在學習及練習中很常會反覆發生、需要注意的地方,提醒自己在接下來的練習中,能將老師提及的思維及作法吸取並應用。
Thumbnail
這是一篇關於 CSS 動畫屬性的學習筆記,如果你剛好也在學習的話,歡迎進來看看!
Thumbnail
css display grid可以達到類似table span的排版效果,但還是有些差異,table的span其實是合併,css grid比較像是要佔幾格的意思。 如下程式碼為例,colspan是要往右合併的意思,因此會少一個td。 E css grid colspan sample code:
Thumbnail
相信大家在一開始接觸 CSS 時,一定會很疑惑為什麼除了 width 外,還會有 max-width 及 min-width 語法呢? 當要開發響應式網頁時,到底要使用什麼語法來控制「斷點」?
筆記一下,原本寫成overflow-y: auto,在windows chrome瀏覽器有y scroll bar,唯獨iPad沒有scroll bar,解法如下: overflow-y: scroll; -webkit-overflow-scrolling: touch; 本筆記參考: 1. h
Thumbnail
對於前端初學者來說,在切版時會出現很多規則、不規則的網頁區塊,這時候我們會嘗試用各種相對定位、絕對定位、margin 或是 padding 的方式來進行網頁區塊的推擠。
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
在當今日新月異的數位時代,網站已經不僅僅是一個給人們提供資訊的平臺,更是一個互動性、視覺吸引力和功能性兼具的數位體驗。而CSS(Cascading Style Sheets)正是網站設計中的一個重要元素,扮演著關鍵的角色。
CSS Box Model 是在 CSS 裡面,html 的每個元素都可被視作為一個盒子,然後可以針對這個盒子去做調整,看以下圖片: 簡單來說margin就是一個是外邊距,與外層元素的間距 Margin 用於控制元素與其周邊元素的間隔,可以設定為正數(增加與其他元素的距離)、負數(減少與其他
今天來介紹一下比較常用的4種定位方式 其中讓我最搞混的是relative跟absolute position: relative 還未定top, bottom, left, right 的屬性時,預設會套用position:static,但如果你去設定了top, bottom, left, ri
Thumbnail
避免網頁在不同瀏覽器中長不一樣。用 CSS Reset 來「重置」和統一瀏覽器預設樣式。
Thumbnail
本篇為隨筆紀錄,將看完的影片疏理為短小筆記 。 特別有感的是,現在回頭看,發現影片中每個提及的知識點或是誤區自己都踩過好幾輪了,這是在學習及練習中很常會反覆發生、需要注意的地方,提醒自己在接下來的練習中,能將老師提及的思維及作法吸取並應用。
Thumbnail
這是一篇關於 CSS 動畫屬性的學習筆記,如果你剛好也在學習的話,歡迎進來看看!
Thumbnail
css display grid可以達到類似table span的排版效果,但還是有些差異,table的span其實是合併,css grid比較像是要佔幾格的意思。 如下程式碼為例,colspan是要往右合併的意思,因此會少一個td。 E css grid colspan sample code:
Thumbnail
相信大家在一開始接觸 CSS 時,一定會很疑惑為什麼除了 width 外,還會有 max-width 及 min-width 語法呢? 當要開發響應式網頁時,到底要使用什麼語法來控制「斷點」?
筆記一下,原本寫成overflow-y: auto,在windows chrome瀏覽器有y scroll bar,唯獨iPad沒有scroll bar,解法如下: overflow-y: scroll; -webkit-overflow-scrolling: touch; 本筆記參考: 1. h
Thumbnail
對於前端初學者來說,在切版時會出現很多規則、不規則的網頁區塊,這時候我們會嘗試用各種相對定位、絕對定位、margin 或是 padding 的方式來進行網頁區塊的推擠。