<div>上的CSS边框的行为有何不同？</div>

Question

标题可能有点不清楚，所以这里是我的意思截图：

HTML & CSS Sourcecode

所有元素都使用相同的CSS类，所以它们不应该都具有相同的宽度吗？ 边界越大，差异就越大。如何确保div和其他元素具有相同的宽度？

提前致谢！

Answer 1

这是因为表单元素和普通HTML元素之间的框大小不同。如果它不是表单元素，则使用的框模型是W3C用于在集合width属性中添加边框和填充添加以使其大于您指定的大小。

如果您不关心旧版浏览器支持（IE＆lt; 8等），您可以这样做：

div.style {
    /* By default, browsers would have set this as content-box */
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

您的边框（以及任何现有的水平填充）将成为width的{​​{1}}属性的一部分。

反过来说，而不是上述：

<div>

同样，这些属性仅受现代浏览器的支持。