iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 16
4

今天來介紹 CSS 的 box-sizing 屬性。

前言

「重新認識 CSS」這個系列名稱的由來就如其名,我想要重新認識它。雖然以前就有學過 CSS,但這次想從 CSS Spec 中學到最原始的定義和內容,更加了解 CSS 的原理,讓我在切版的時候可以更加確定自己在做什麼,我踩到的雷只是因為我不夠了解它才會炸開。

在這 30 天的內容中,會將 Spec 內看到的資料整理成這個系列,也希望正在學 CSS 的各位可以更加了解它。另外我也會同時將文章發至我的 Blog,如果想直接看文內的程式碼 Demo 畫面,可以到我的 Blog 來看 ?。

「重新認識 CSS」系列文章發文於:

box-sizing 屬性用於設定如何計算元素的總寬度和總高度。

下圖是 box-sizing 屬性的定義:

可以看到 box-sizing 屬性可以用在任何元素,而且初始值為 content-box

在 CSS box model 中,對元素指定寬度和高度會應用於 content box,如果又在該元素設定 border 或 padding 時,在視覺上會很像是增加元素的大小。也就是說當你想要讓該元素為某寬度或高度時,需要自行手動減去 border 或 padding 所佔用的空間,才能讓元素符合原本預期的寬高。

例如:

<div class="box-1"></div>
<div class="box-2"></div>
.box-1 {
  width: 100px;
  height: 100px;
  background-color: lightgreen;
  margin: 10px;
}
.box-2 {
  width: 100px;
  height: 100px;
  background-color: rgba(0, 0, 0, .4);
  padding: 10px;
  border: 10px solid;
  margin: 10px;
}

如下圖,.box-1 元素和 .box-2 元素的 widthheight 都一樣 (都是 100px):

但是可以看出這兩個元素的大小明顯不同,這是因為 .box-2 元素比 .box-1 元素多了 padding 和 border:

各元素在視覺上所佔用的空間:

  • .box-1 元素:
    • 寬:width (100px)
    • 高:height (100px)
  • .box-2 元素:
    • 寬佔用:border-left-width (10px) + padding-left (10px) + width (100px) + padding-right (10px) + border-right-width (10px) = 140px
    • 高佔用:border-top-height (10px) + padding-top (10px) + height (100px) + padding-bottom (10px) + border-bottom-height (10px) = 140px

如果要 .box-2 元素要保留 border 和 padding,又要只佔用寬度和高度各 100px 就只能手動減去 border 或 padding,以上面範例就會改成這樣:

.box-2 {
  width: 60px;
  height: 60px;
  background-color: rgba(0, 0, 0, .4);
  padding: 10px;
  border: 10px solid;
  margin: 10px;
}

雖然在視覺上,.box-1 元素和 .box-2 元素所佔用的空間變成一樣了,但是要自行計算 widthheight 會很麻煩。這時就可以改用 box-sizing: border-box,它就會幫你自動計算扣除 border 或 padding 所剩餘的空間,應用在 content width 和 content height。

.box-2 {
  width: 100px;
  height: 100px;
  background-color: rgba(0, 0, 0, .4);
  padding: 10px;
  border: 10px solid;
  box-sizing: border-box;
  margin: 10px;
}

如下圖,不用修改 widthheight 就可以達到預期的效果:

資料來源:


上一篇
重新認識 CSS - Box model:border
下一篇
重新認識 CSS - Collapsing margins
系列文
重新認識 CSS30

尚未有邦友留言

立即登入留言