iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 28
6
Modern Web

金魚都能懂的CSS必學屬性系列 第 28

Box-sizing - 金魚都能懂的CSS必學屬性

Box-sizing 這個屬性是一個新時代的屬性,也是目前這時代網頁入門必備的一項常識,box-sizing 的作用是控制 widthheight 作用的對象空間,換另一個說法,則是設定物件尺寸的計算方式,目前僅有兩種模式擇一使用,撰寫方式如同下面這樣

box-sizing: content-box;

box-sizing 可以使用的值不多,基本上就兩個

  • Content-box (寬高設定作用在內容範圍)
  • Border-box (寬高設定作用在邊框外緣的範圍內)

在預設的情況下, box-sizing 的預設值是 content-box

內容盒子 與 邊框盒子

由於 box-sizing 可設定的值只有兩種,這時搞懂這兩個值的意義就顯得異常重要!如果你懶得看 Amos 的文字敘述,那你也可以選擇看免費的「金魚都能懂網頁設計入門 : 換個新盒子」影片教學。

content-box 其實不設定時就是預設

從一開始的敘述得知, box-sizing 的作用其實就是設定 width / height 的作用對象是哪個盒子(box) ,在不更改 box-sizing 的情況下,其實 width / height 的作用就是設定內容資料的範圍空間,我們就稱為 content-box,一個物件的範圍,其實就是四個層層包裹的矩形所構成,由內而外分別是「content-box(藍色)、padding-box(綠色)、border-box(橙黃)、margin-box(橙色)」,如下圖所示(圖片取自 Chrome DevTools)

https://ithelp.ithome.com.tw/upload/images/20201013/20112550MWKjlQlrdq.png

倘若我們對一個物件設定 width: 200px; 那就表示我的物件內資料的可運用空間就是 200px,超過 200px 就會折到下一行,如同下方原始碼這般

HTML

<div class="fish">金魚都能懂一二三四五金魚都能懂六七八九十</div>

CSS

*{
    margin: 0;
    padding: 0;
}
.fish{
	width: 200px;
	height: 200px;
    font-size: 20px;
	background-color: #CCC;
}

呈現畫面

https://ithelp.ithome.com.tw/upload/images/20201013/20112550TJN82DEqRI.png

從上圖就能清楚的看到文字被強迫換行了,文字的字級 Amos 特別把它設定成 20px 大小,所以 10 個字就是 200px ,很明顯的該區塊的寬度的確是 200px,如果我們對該物件添加一個 padding 的話呢,像是下面這樣

*{
    margin: 0;
    padding: 0;
}
.fish{
	width: 200px;
	height: 200px;
	padding: 20px;
    font-size: 20px;
	background-color: #CCC;
}

呈現畫面

https://ithelp.ithome.com.tw/upload/images/20201013/20112550XoJH6Pt6Xy.png

可以看到單行文字並沒有減少,依舊是 10 個字,也就表示 padding 是額外增加出來的空間,把剛剛的容器概念疊上去的話就可以很明顯的看出來 content-box 的範圍了

https://ithelp.ithome.com.tw/upload/images/20201013/20112550426vDsMM4T.png

所以此時你所看到的物件寬度,實際是 width200px 加上左右 padding 相加的 40px,最終呈現的就是 240px

border-box 不用計算超方便

box-sizing 設定成 border-box 後, width / height 的作用範圍就是指到 border 這個 box 的範圍了,我們就稱為 border-box,從前面所寫的可以了解一個物件的範圍,是由四個層層包裹的矩形所構成,此時 width 所作用的 box 就是 border 這個範圍了,如下圖所示(圖片取自 Chrome DevTools)

https://ithelp.ithome.com.tw/upload/images/20201013/20112550JGXWAgwMzB.png

所以我們如果設定了以下這樣的 CSS 原始碼的話,你所看到的物件寬度將會是 200px ,而不是之前所看到的 240px

*{
    margin: 0;
    padding: 0;
}
.fish{
	width: 200px;
	height: 200px;
    padding: 20px;
    font-size: 20px;
	background-color: #CCC;
    box-sizing: border-box;
}

呈現畫面

https://ithelp.ithome.com.tw/upload/images/20201013/20112550bjDrkUrq4l.png

由上圖可以看到單行文字的數量變少了,只剩下 8 個字就折行了,從 1 個字寬 20px 來計算,8 * 20 = 160px,加上 padding 左右各 20px,就能得到目前顯示的結果是 200px,但因為目前沒有設定 border,所以無法看到添加 border 之後的尺寸,所以我們來添加一下 20pxborder 看看會是怎樣的結果,原始碼如下

.fish{
	width: 200px;
	height: 200px;
	padding: 20px;
	border: 20px solid red;
	font-size: 20px;
	background-color: #CCC;
	box-sizing: border-box;
}

呈現畫面

https://ithelp.ithome.com.tw/upload/images/20201013/20112550ef9OjfXpCj.png

可以看到一行文字變的更少了,直接計算看看 20 * 6 + 20 * 2 + 20 * 2 = 200px,結論依舊相同,正如 Amos 在 border-box 一開始寫的觀念一樣, width 直接作用在 border-box 上,而非 content-box 上,所以你的 paddingborder-width 都直接內推了,就這麼簡單!老話一句,如果你還是不理解的話,建議可以看一下免費的「金魚都能懂網頁設計入門 : 換個新盒子」影片教學,裡面的解說跟示範應該可以讓你更容易理解。

曾經聽說過一個都市傳說:「網頁跑版時,只要設定 box-sizing: border-box; 就能搞定了!」其實也頗合理的,因為你整體寬度會變小阿,當然跑版就修正了,但是寬度還是有可能出問題的啦,所以建議還是把基本觀念學好才是王道阿。

這個簡單的屬性,是眾多新手超愛使用的,看似簡單卻沒搞懂的話可會讓版面很不受控阿,幾個小小的重點就請金魚們小心且注意了,金魚都能懂的 CSS 必學屬性,我們下篇見!


「金魚都能懂的CSS選取器」已集結成書,並於書中添加一些新篇章及細節補充,有興趣的朋友可至天瓏書局選購,感謝各位支持
購書連結 https://www.tenlong.com.tw/products/9789864344994?list_name=b-r30-zh_tw
https://ithelp.ithome.com.tw/upload/images/20200917/20112550bxAFk2frMp.jpg
讓我們好好善用CSS選取器吧


金魚都能懂的教學系列

鐵人雙主題挑戰中,歡迎訂閱一波

金魚都能懂的Bootstrap5網頁框架開發

立刻訂閱 CSS可樂的網站/頻道享受精彩文章

Line搜尋「@CSScoke」加入CSS可樂公開帳號,可以收到 Amos 第一手資訊喔
CSS 可樂部落格
CSS coke 的 Youtube 直播頻道
快按此訂閱 CSS coke 的頻道接收最新教學
/images/emoticon/emoticon12.gif


上一篇
margin & padding - 金魚都能懂的CSS必學屬性
下一篇
Display - 金魚都能懂的CSS必學屬性
系列文
金魚都能懂的CSS必學屬性31

尚未有邦友留言

立即登入留言