大佬教程收集整理的这篇文章主要介绍了html – 为什么box-sizing在表vs div上有所不同？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
<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规范中的某个地方？
目前的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的表格根本没有填充,尽管在这种情况下,它不相关,因为您的表不使用此模型：
以上是大佬教程为你收集整理的html – 为什么box-sizing在表vs div上有所不同？全部内容，希望文章能够帮你解决html – 为什么box-sizing在表vs div上有所不同？所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。