試一試
box-sizing: content-box;
width: 100%;
box-sizing: content-box;
width: 100%;
border: solid #5b6dcd 10px;
padding: 5px;
box-sizing: border-box;
width: 100%;
border: solid #5b6dcd 10px;
padding: 5px;
<section id="default-example">
<div id="example-element-parent">
<p>Parent container</p>
<div class="transition-all" id="example-element">
<p>Child container</p>
</div>
</div>
</section>
#example-element-parent {
width: 220px;
height: 200px;
border: solid 10px #ffc129;
margin: 0.8em;
}
#example-element {
height: 60px;
margin: 2em auto;
background-color: rgb(81 81 81 / 0.6);
}
#example-element > p {
margin: 0;
}
在 CSS 盒模型中，預設情況下，您為元素指定的 width 和 height 僅應用於元素的內容盒。如果元素有任何邊框或內邊距，這些值將新增到 width 和 height 中，以得出螢幕上渲染的盒子的最終尺寸。這意味著當您設定 width 和 height 時，必須調整您給定的值以適應可能新增的任何邊框或內邊距。例如，如果您有四個 width: 25%; 的盒子，如果其中任何一個有左或右內邊距或左或右邊框，它們預設情況下將無法在父容器的限制內排在一行。
box-sizing 屬性可用於調整此行為。
-
content-box賦予您預設的 CSS 盒模型行為。如果您將元素的寬度設定為 100 畫素，那麼元素的內容盒將是 100 畫素寬，任何邊框或內邊距的寬度都將新增到最終渲染寬度中，使元素寬度超過 100 畫素。 -
border-box告訴瀏覽器在您為元素的寬度和高度指定的值中考慮任何邊框和內邊距。如果您將元素的寬度設定為 100 畫素，這 100 畫素將包括您新增的任何邊框或內邊距，內容盒將收縮以吸收額外的寬度。這通常會使元素尺寸的設定變得容易得多。box-sizing: border-box是瀏覽器對<table>、<select>和<button>元素，以及型別為radio、checkbox、reset、button、submit、color或search的<input>元素使用的預設樣式。
注意：將 box-sizing 設定為 border-box 以佈局元素通常很有用。這使得處理元素尺寸變得容易得多，並且通常可以消除您在佈局內容時可能遇到的許多陷阱。另一方面，當使用 position: relative 或 position: absolute 時，使用 box-sizing: content-box 允許定位值相對於內容，並且獨立於邊框和內邊距尺寸的變化，這有時是可取的。
語法
box-sizing: border-box;
box-sizing: content-box;
/* Global values */
box-sizing: inherit;
box-sizing: initial;
box-sizing: revert;
box-sizing: revert-layer;
box-sizing: unset;
box-sizing 屬性由從以下值列表中選擇的單個關鍵字指定。
值
content-box-
這是 CSS 標準中指定的初始預設值。
width和height屬性包含內容，但不包括內邊距、邊框或外邊距。例如，.box {width: 350px; border: 10px solid black;}將渲染一個 370 畫素寬的盒子。在這裡，元素的尺寸計算方式為：寬度 = 內容的寬度，高度 = 內容的高度。（邊框和內邊距不包含在計算中。）
border-box-
width和height屬性包括內容、內邊距和邊框，但不包括外邊距。請注意，內邊距和邊框將在盒子內部。例如，.box {width: 350px; border: 10px solid black;}將渲染一個 350 畫素寬的盒子，其中內容區域為 330 畫素寬。內容盒不能為負數且向下取整為 0，這使得無法使用border-box使元素消失。在這裡，元素的尺寸計算方式為：寬度 = 邊框 + 內邊距 + 內容的寬度，高度 = 邊框 + 內邊距 + 內容的高度。
正式定義
正式語法
box-sizing =
content-box |
border-box
示例
使用 content-box 和 border-box 的盒子尺寸
此示例展示了不同的 box-sizing 值如何改變兩個其他方面相同的元素的渲染尺寸。
HTML
<div class="content-box">Content box</div>
<br />
<div class="border-box">Border box</div>
CSS
div {
width: 160px;
height: 80px;
padding: 20px;
border: 8px solid red;
background: yellow;
}
.content-box {
box-sizing: content-box;
/* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px
Total height: 80px + (2 * 20px) + (2 * 8px) = 136px
Content box width: 160px
Content box height: 80px */
}
.border-box {
box-sizing: border-box;
/* Total width: 160px
Total height: 80px
Content box width: 160px - (2 * 20px) - (2 * 8px) = 104px
Content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */
}
結果
規範
| 規範 |
|---|
| CSS Box Sizing Module Level 3 # box-sizing |
瀏覽器相容性
載入中…