box-sizing

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015 .

box-sizing CSS 屬性設定如何計算元素的總寬度與高度。

嘗試一下 

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>父容器</p>
    <div class="transition-all" id="example-element">
      <p>子容器</p>
</section>

#example-element-parent {
  width: 220px;
  height: 200px;
  border: solid 10px #ffc129;
  margin: 0.8em;
#example-element {
  height: 60px;
  margin: 2em auto;
  background-color: rgba(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 可以使定位值與內容相關，並獨立於邊框和內邊距尺寸的變化，這在某些情況下可能是理想的。

語法

css 
box-sizing: border-box;
box-sizing: content-box;
/* 全域值 */
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;} 會呈現寬度為 370px 的盒子。

此時，元素的尺寸計算為： 寬度 = 內容的寬度 ， 高度 = 內容的高度 。（邊框和內邊距不包括在計算中。）

border-box

width 和 height 屬性包含內容、內邊距和邊框，但不包括外邊距。請注意，內邊距和邊框會在盒子內。例如， .box {width: 350px; border: 10px solid black;} 會呈現寬度為 350px 的盒子，其中內容區域的寬度為 330px。內容框的寬度不能為負數，最小值為 0，因此無法使用 border-box 使元素消失。

此時，元素的尺寸計算為： 寬度 = 邊框 + 內邊距 + 內容的寬度 ， 高度 = 邊框 + 內邊距 + 內容的高度 。

形式定義

預設值 content-box
Applies to all elements that accept width or height
繼承與否 no
Computed value as specified
Animation type discrete

形式語法 

box-sizing = 
  content-box  |
  border-box

範例

使用 content-box 和 border-box 的盒子尺寸

此範例展示了不同的 box-sizing 值如何改變兩個其他條件相同的元素的呈現尺寸。

html 
<div class="content-box">Content box</div>
<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;
  /* 總寬度: 160px + (2 * 20px) + (2 * 8px) = 216px
     總高度: 80px + (2 * 20px) + (2 * 8px) = 136px
     內容框寬度: 160px
     內容框高度: 80px */
.border-box {
  box-sizing: border-box;
  /* 總寬度: 160px
     總高度: 80px
     內容框寬度: 160px - (2 * 20px) - (2 * 8px) = 104px
     內容框高度: 80px - (2 * 20px) - (2 * 8px) = 24px */