<div style='width:300px;border:1px solid green'>
<div>Outer div</div>
<div style='width:100%;border:1px solid red;margin:10px;'>
Inner div,10px margin.
</div>
<div style='width:100%;border:1px solid red;padding:10px;'>
Inner div,10px padding.
</div>
<div style='width:100%;border:1px solid red;padding:10px;Box-sizing:border-Box'>
Same,with Box-sizing: border-Box
</div>
<table style='width:100%;border:1px solid red;padding:10px;'>
<tr><td>Inner table,10px padding</td></tr>
</table>
</div>
在Chrome中看起来像这样：
我想我明白一切,直到最后一个.我的Chrome检查器显示表的计算框大小的样式是内容框,所以我期望它的行为像第二个div,溢出和看起来丑陋.为什么会有所不同？这是否记录在HTML / CSS规范中的某个地方？
解决方法
However,in HTML and XHTML1,the width of the <table> element is the distance from the left border edge to the right border edge.
Note: In CSS3 this peculiar requirement will be defined in terms of UA style sheet rules and the ‘Box-sizing’ property.
目前的box-sizing的CSS3定义并没有说什么,但是翻译上面的引用它基本上意味着在(X)HTML中,表使用了边框模型：padding和border不添加到指定的表宽度.
请注意,根据盒子大小的属性,不同的浏览器似乎以不同的方式处理这种特殊情况：
> Chrome
框大小设置为初始值,内容框;改变它没有任何影响.重新声明Box-sizing：内联样式中的content-Box,但应该是预期的.无论哪种方式,Chrome似乎强制表格始终使用边框模型.
> IE
框大小设置为边框;将其更改为内容框会导致其与第二个div类似.
> Firefox
-moz-Box-sizing设置为border-Box;将其更改为内容框或填充框将导致相应调整大小.
由于CSS3还没有提及桌面大小,所以这不应该是一个惊喜.至少,结果是一样的 – 只是底层的实现是不同的.但是考虑到上面的注释,我会说IE和Firefox更接近于预期的CSS3定义,因为在Chrome中,您似乎无法使用Box-sizing属性更改表的框模型.
具有collapsing border model的表格根本没有填充,尽管在这种情况下,它不相关,因为您的表不使用此模型：
Note that in this model,the width of the table includes half the table border. Also,in this model,a table does not have padding (but does have margins).
