宽度自动和宽度 100% 之间的差异

Question

以前我对 width: auto 的假设是宽度设置为内容的宽度。现在我看到它占用了父级的整个宽度。

谁能描述一下这些之间的区别？

原文由 Navin Rauniyar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

宽度自动

像 div 或 p 这样的块级元素的初始宽度是 auto。这使其扩展以占据其包含块内的所有可用水平空间。如果它有任何水平填充或边框，则它们的宽度不会添加到元素的总宽度中。

宽度 100%

另一方面，如果指定 width:100%，则元素的总宽度将是其包含块的 100% 加上任何水平边距、内边距和边框（除非您使用了 box-sizing:border-box，在这种情况下仅将边距添加到 100% 以更改其总宽度的计算方式）。这可能是您想要的，但很可能不是。

要可视化差异，请参见这张图片：

资源

原文由 Bhojendra Rauniyar 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

• width: auto; 当从边距、填充或边框添加额外空间时，将尽可能努力使元素与其父容器保持相同的宽度。

• width: 100%; 将使元素与父容器一样宽。额外的间距将被添加到元素的大小而不考虑父级。这通常会导致问题。

原文由 Ian Jennings 发布，翻译遵循 CC BY-SA 4.0 许可协议