iT邦幫忙

2021 iThome 鐵人賽

0
自我挑戰組

登堂入室!前端工程師的觀念技術 _30_ 題系列 第 29

28. 解釋 CSS Box Model ( box-sizing )

今天也是複習CSS,是非常之基礎的box-sizing。

Box Model


前一篇文提到,HTML元素在CSS裡都可以視為box,這是基於CSS Box Model(盒模型)的定義。

The model defines how the different parts of a box — margin, border, padding, and content — work together to create a box that you can see on a page.

這個模型定義一個box的性質包含: margin, border, padding 和 content( width & height ) 。

  • box model的性質可以完全套用到block boxes(塊狀元素)。
  • inline boxes(行內元素)只會應用到部分的性質,例如inline boxes不包含調整寬高的設定。

(inline和inline-block的性質可以參考 前端基礎:CSS 盒模型(box model). 什麼是 box model? | by Hugh's Programming life | Medium)

CSS的box-sizing的屬性,可以決定要使用哪一種類型的Box Model,
而不同的Box Model會影響上述性質的計算方式。

預設的Box model ( box-sizing: content-box )


content-box是預設的box model,
計算方式是,設定content的寬高,以content的邊界為基準,向外填充padding。
https://ithelp.ithome.com.tw/upload/images/20211004/20129476cZRH4590Rh.png

但這樣的方式會造成一些調整上的麻煩,舉例來說:

// HTML
<div class="div1">
    width: 300px;
</div>
<div class="div2">
    width: 300px; & padding: 10px;
</div>
// CSS
.div1 {
  width: 300px;
  border: 2px solid blue;
}
.div2 {
  border: 2px solid red;
  width: 300px;
  padding: 10px;
  margin-top: 10px; 
  overflow: auto;
}

執行結果:
https://ithelp.ithome.com.tw/upload/images/20211004/20129476Pg3PqcHmSR.png

假使想設定兩個寬度相同(300px)的div,在預設情況下調整padding,會造成兩者不同寬。

也就是說,
每當想要設定"看起來"同寬/高的box,就要另外計算實際的width/height和padding。

這樣太麻煩了!!!因此CSS提供了另一種box model:

box-sizing: border-box


border-box的計算方式是,以content的寬高作為border的邊界。
padding以border為基準內縮,margin以border為基準往外增長。
https://ithelp.ithome.com.tw/upload/images/20211004/201294765aFtPvk3S6.png

把兩種box model放在一起比較:
https://ithelp.ithome.com.tw/upload/images/20211004/20129476DFmtN9R76n.png
兩個box的width和height是相同的,
差別在

  • border box的長寬設多少就是多寬。
  • content box除了設定的長寬外,padding還會往外填充。

所以想要解決上面的問題,可以在剛剛的範例加入這一行:

* {
  box-sizing: border-box;   // 設定全域範圍的box model
}

https://ithelp.ithome.com.tw/upload/images/20211004/20129476kh7m3eN87C.png
這樣就可以輕鬆地完成同寬了!

提問


  • box-sizing 的 content-box 和 border-box 差別,預設值為何?

    • 預設值是content-box
    • 差別是元素尺寸的計算方式。content-box的視覺大小是"長寬加上padding",border-box的視覺大小就是設定的長寬。
  • 請解釋 * { box-sizing: border-box; }?並且說明使用它的好處?
    (同上,) 好處是border-box在長寬的設定上更直覺,不必為了配合padding增減content的設定。

【如內文有誤還請不吝指教>< 並感謝閱覽至此的各位:D 】

參考資料


上一篇
27. 解釋 CSS 的 BFC(Block Formatting Context)
下一篇
29. CSS 水平置中/ 垂直置中的方法
系列文
登堂入室!前端工程師的觀念技術 _30_ 題31

尚未有邦友留言

立即登入留言