首頁 > web前端 > css教學 > 主體

box-sizing: border-box 其實有什麼作用?

PHPz
發布: 2024-07-19 13:44:21
原創
691 人瀏覽過

當我第一次開始學習CSS時,我幾乎在遇到的每個CSS檔案中都看到了box-sizing: border-box。像許多初學者一樣,我在不了解其目的的情況下複製了它。如果這聽起來很熟悉,別擔心——你並不孤單。

什麼是盒子大小?
CSS 中的 box-sizing 屬性控制如何計算元素的寬度和高度。主要有以下三個值:

  1. content-box(預設):寬度和高度僅適用於內容,而不適用於填滿或邊框。如果您稍後添加內邊距或邊框,這可能會導致意外的尺寸。
  2. border-box:寬度和高度包含內邊距和邊框,使元素的總大小更可預測。
  3. inherit:元素從其父元素繼承 box-sizing 值。

為什麼 box-sizing: border-box?
這就是為什麼 box-sizing: border-box 如此有用:

  • 寬度和高度包括內邊距和邊框。如果將元素的寬度設為 200px,則無論內邊距或邊框如何,它始終為 200px。
  • 無需計算內邊距和邊框即可知道元素的總大小。這使得設計和調整佈局變得更加容易。
  • 在所有元素中使用 border-box 可確保設計的一致性,使您的 CSS 更乾淨且更易於維護。

這裡用一個簡單的例子來說明"content-box""border-box"之間的差異:

內容框

<div class="content-box">
  <p>content-box</p>
</div>
登入後複製
.content-box {
  background-color: red;
  width: 200px;
  padding: 20px;
  border: 10px solid black;
  text-align: center;
  color: white;
}
登入後複製

example of content box

如截圖所示,帶有 box-sizing: content-box 的盒子的總寬度為 260px。原因如下:

200px 是為內容區域設定的寬度,每邊 20px 總計為 40px(20px + 20px),每邊 10px 總計為 20px(10px + 10px)。

總寬度:200px(內容)+ 40px(內邊距)+ 20px(邊框)= 260px

為什麼? 對於content-box,您設定的寬度僅適用於框內的內容。填充和邊框添加到此寬度,增加了框的總大小。

邊框

<div class=" border-box">
  <p>border-box</p>
</div>
登入後複製
.border-box {
  box-sizing: border-box;
  background-color: green;
  width: 200px;
  padding: 20px;
  border: 10px solid black;
  text-align: center;
  color: white;
}
登入後複製

an example of border box

相較之下,搭配 box-sizing: border-box 的盒子的總寬度為 200px。原因如下:

200px 是為整個盒子設定的寬度,包括內容、內邊距和邊框,每邊 20px(包含在 200px 寬度內),每邊 10px(包含在 200px 寬度內)。

總寬度:200px 的寬度包含內容、內邊距和邊框。在此寬度之外不會增加任何額外空間。

為什麼? 使用border-box,您設定的寬度覆蓋了框中的所有內容,因此總大小保持指定的大小,沒有額外的填充或邊框超出給定的寬度.

理解並使用 box-sizing:border-box 可以簡化你的 CSS,讓你的版面更可預測、更容易管理。如果您對此一無所知,我希望這個解釋能夠澄清問題。
您可以在 CodePen 上查看和試驗本範例中使用的程式碼。
如果您喜歡這篇文章,請在 LinkedIn 和 Twitter 上與我聯絡!

以上是box-sizing: border-box 其實有什麼作用?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板