Html 框大小：边框框的宽度<；衬料

据我所知，

box size:border box

使得

width = border-left-width + padding-left + <free space> + padding-right + border-right-width

---

170px自由空间

如果为元素添加高度，您将看到它们都是相同的

div、span、input{
显示：块；
框大小：边框框；
宽度：0；
填充：0 10px；
边框：纯绿色；
边框宽度：0 5px 0 5px；
背景：#ebebeb；
高度：20px；
}

在Safari中，在每个标记上设置

display:block

时，元素完全消失，而在

display:inline

设置时，它显示填充和边框，没有可用空间。当

display

未设置为

block

或设置为

inline

时，它似乎覆盖了

框大小调整

，将填充和边框保留在其中，即使您将宽度设置为0。好的，因此所有三个框的宽度相同，并且只有

input

具有“固有”高度（另外两个的高度是

0

）。留给我一个问题：为什么它们的宽度不是

0

（而是它们的填充物/边框宽度之和）？元素的宽度为0，每侧边沿为10px，每侧边沿为5px，从而使框的总尺寸宽度为30px。chrome在“样式”选项卡底部的开发工具中对此有很好的可视化效果。但是，在我的第一个示例中查看相同的可视化效果（

宽度：200px

）“元素本身”显示为

170px

，而在您的示例中，

width:0

导致

0

。然后，在我的第二个示例中，

中的“元素本身”的宽度为

-30px

（但显示左5px边框和左10px填充）。这一切都不符合我的框大小的心理模型…我错在哪里？（顺便说一句，谢谢你的耐心！）边框框使边框的外部被视为元素的外部边界。这就是为什么在200px示例中，边框和填充占据了“内部边界”的原因“空格。在宽度为0的第二个示例中，元素的宽度为0，但边框和填充仍然设置，它们需要占用空间，因为边框是最外层的东西，它们会使整个元素的宽度大于0px，这有意义吗？因此，最后使用

框大小：border box

框的宽度。”元素的“外部边界”将是

width

属性，但不会小于边框和填充的总和（即

offsetWidth=max（width，borders+paddings）

），我可以接受。谢谢！