下面是我在找到的，和我遇見的情況很相似，所以摘抄下來，原文見:
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會非常有用。
例如：該例子中，預設情況下，li一定不能保持在同一行內。但是設定了box-sizing：border-box之後，就可以保證li在同一行內。（ie8+和高階瀏覽器支援）
我的總結：
以width為例，
無論怎樣都有element width=content width+padding(left和right)+border(left和right)，這是不變的。當給元素設定box-sizing屬性時：
pwidth=content width=100px(是以content的邊界為準)
pwidth=content width+padding(left和right)+border(left和right)=100px(以border邊界為準)
理解box sizing屬性
box sizing是乙個css3屬性，與盒子模型有著密切聯絡。即決定元素的寬高如何計算，box sizing有三個屬性 box sizing content box border box inherit 複製 content box 使得元素的寬高即為內容區的寬高 box 左 box 右 複製 上...
關於box sizing的全面理解
恢復內容開始 box sizing 屬性允許您以特定的方式定義匹配某個區域的特定元素。例如，假如您需要併排放置兩個帶邊框的框，可通過將 box sizing 設定為 border box 這可令瀏覽器呈現出帶有指定寬度和高度的框，並把邊框和內邊距放入框中。語法box sizing content b...
盒子模型及box sizing的理解
部落格 盒子模型 標準盒子模型和怪異 ie 盒模型 寬度 width content內容區寬度 width 高度 height 也是內容區的高度 width 盒子的大小 margin paading border width 兩個盒子的之間的padding值的計算 上面盒子的padding bott...