为什么显示：块不拉伸按钮或输入元素

Question

我试图了解这个问题背后的原因：

当设置为display:block 时，<button> 或 <input> 元素的行为与其他元素不一样的根本原因是什么！

我不是在寻找解决此问题的解决方法，因此请不要将我指向 this answer，因为它无法回答问题。

Here's a js-fiddle that illustrates the problem

更新 1： @Pete 是正确的，元素的默认 size 属性是在块上设置大小的元素，您可以 in this fiddle <input> 的 size 和 cols 属性和<textarea> 改变它们的宽度。这解决了我的部分问题。

考虑到这一点，我现在的问题是，为什么 <button> 元素的行为不像其他块元素？这对我来说是个谜！

Answer 1

Button、Input 和其他表单元素实际上是 replaced 元素 - 请参阅此答案：HTML5: Non-replaced vs. replaced element?

此外，button 和 input 是内联元素。因此，在此处阅读有关视觉格式的 MDN 文档：https://developer.mozilla.org/en-US/docs/Web/CSS/Visual_formatting_model，以及此处的 w3c 文档：https://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width，您可以得出结论，对于替换的内联元素：

如果 'height' 和 'width' 都有计算值 'auto' 并且元素也有一个固有宽度，那么该固有宽度就是使用的 'width' 值。

因此，按钮和输入具有为其内容设置的固有宽度（或输入的大小属性，如果使用）。这就是为什么只指定display: block 对按钮或输入的大小没有任何影响。您还必须覆盖元素的固有宽度。

---

更新：在回答此问题后进行更多研究时，我发现了一个更早的答案，该答案对同一问题进行了更详细的说明。你可以在这里找到它：https://stackoverflow.com/a/27605483/630170。

Answer 2

<input>、<textarea> 或 <button> 等某些元素包含默认样式，例如它们的边框，或者在您的示例中，它们的大小。我认为原因是，HTML 仍然可以与最简单的标记一起使用，并且不需要任何来自 css（或内联属性）的样式即可工作。

display: block 没有改变这种行为的事实是，输入字段已经是块元素。但与大多数其他元素相比，它在width 属性上确实有一个默认值，而不是0。

我认为原因很简单：如果您创建一个 <input> 字段并且不使用 css 或样式，您根本不会看到它，就像您看不到无样式的 <div>。

Answer 3

我认为为输入的 size 属性分配了一个默认值，这意味着除非您专门覆盖它，否则您的宽度不会是 100%

如果您查看firefox specification 并向下滚动到有关大小的部分，您会看到它们的默认值为 20

我不确定按钮的属性会导致在更改为块时不是 100% 宽度