下面是我在博客園找到的，和我遇見的情況很相似，所以摘抄下來，原文見:http://www.cnblogs.com/charling/p/3635031.html

box-sizing語法：

　　box-sizing ： content-box || border-box || inherit

　　參數取值：

　　content-box：此值為其默認值，其讓元素維持W3C的標準Box Model，也就是說元素的寬度/高度（width/height）等于元素邊框寬度（border）加上元素內邊距（padding）加上元素內容寬度 /高度（content width/height）即：Element Width/Height = border+padding+content width/height。

　　border-box:此值讓元素維持IE傳統的Box Model（IE6以下版本），也就是說元素的寬度/高度等于元素內容的寬度/高度。這里的content width/height包含了元素的border,padding,內容的width/height。即此處的內容寬度/高度=width /height-border-padding。

　　

在實際應用中，該屬性有個非常有用的地方，即根據百分比為元素設置寬度時。此時，如果元素有padding或者border，將box-sizing設置為border-box會非常有用。

例如：

<ul>
?? ?<li style="box-sizing:border-box; padding:0 10px; width:25%; float:left;"></li>
?? ?<li style="box-sizing:border-box; padding:0 10px; width:25%; float:left;"></li>
?? ?<li style="box-sizing:border-box; padding:0 10px; width:25%; float:left;"></li>
?? ?<li style="box-sizing:border-box; padding:0 10px; width:25%; float:left;"></li>
</ul>

該例子中，默認情況下，li一定不能保持在同一行內。但是設置了box-sizing：border-box之后，就可以保證li在同一行內。（IE8+和高級瀏覽器支持）

?

我的總結：

　　以width為例，無論怎樣都有Element width=content width+padding(left和right)+border(left和right)，這是不變的。當給元素設置box-sizing屬性時：

　　　　<p>大家好</p>

　　　　p{box-sizing:content-box;width:100px;pading:0 2px;border:1px solid #dcdcdc;}

?

　　　　width=content width=100px(是以content的邊界為準)

?

　　　　p{box-sizing:border-box;width:100px;pading:0 2px;border:1px solid #dcdcdc;}

?

　　　　width=content width+padding(left和right)+border(left和right)=100px(以border邊界為準)

　

?

?

?

　　

轉載于:https://www.cnblogs.com/cgf19920817/p/4538554.html

總結

以上是生活随笔為你收集整理的我的理解：box-sizing的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。