我的理解：box-sizing

下面是我在博客园找到的，和我遇见的情况很相似，所以摘抄下来，原文见: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; 25%; float:left;"></li>
    <li style="box-sizing:border-box; padding:0 10px; 25%; float:left;"></li>
    <li style="box-sizing:border-box; padding:0 10px; 25%; float:left;"></li>
    <li style="box-sizing:border-box; padding:0 10px; 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;100px;pading:0 2px;border:1px solid #dcdcdc;}

　　　　width=content width=100px(是以content的边界为准)

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

　　　　width=content width+padding(left和right)+border(left和right)=100px(以border边界为准)