=在W3School裡面的CSS box-sizing屬性中，我們可以看到box-sizing的定義如下:

我們通過例子來詳細地講訴一下width:100%和padding結合起來使用可能會帶來的問題及如何用box-sizing解決。
我們新建兩個div, 讓第二個嵌在第一個裡面。

HTML程式碼：

<div class="firstDiv" sand>
  <div class="secondDiv">
    div2
  </div>
</div>

CSS程式碼：

.firstDiv
{
  width: 100px;
  height
 
: 100px;
  background-color: red;
}

.secondDiv
{
  width: 100%;
  height: 80px; 
  background-color: yellow;
}

效果圖：

接下來我們想讓第二個div中的文字的左邊空出20px, 即設定padding-left: 20px.

CSS程式碼：

.secondDiv
{
  width: 100%;
  padding-left: 20px;
  height: 80px;
  background-color: yellow;
}

效果圖：

我們可以看到，設定了padding之後，第二個div的寬度也隨著變化了，但是我們設定的寬度明明是100%，即應該和第一個div的寬度是一樣的，這是為什麼呢？這是因為我們沒有設定box-sizing的值，所以它用的是預設值content-box。content-box的定義為寬度和高度分別應用到元素的內容框。所以在剛才的例子中，width:100%即100px是內容框的寬度，div實際的寬度應該加上剛才設定的padding-left的值20px, 總共為120px。正如我們看到的，第二個div的寬度比第一個還要大。

那我們怎樣才能既加上padding, 又不增加寬度呢？一種方法是將div的寬度從100%改為80px，第二種就是設定box-sizing為border-box。border-box決定了為元素設定的寬度和高度是元素的邊框盒的寬度和高度， 即為元素指定的任何內邊距padding和邊框border都將在已設定的寬度和高度內進行繪製。而第二種是比較常用的方法。

CSS程式碼：

.secondDiv
{
  width: 100%;
  padding-left: 20px;
  box-sizing: border-box;
  -moz-box-sizing: border-box; /* Firefox */
 

  -webkit-box-sizing: border-box; /* Safari */
  height: 80px;
  background-color: yellow;
}

效果圖：

為了適應各個瀏覽器的需求，我們需要額外設定-moz-box-sizing和-webkit-box-sizing的值也為border-box。