我正在努力理解这个问题背后的原因：
设置为<button>时，<input>或display:block元素与其他元素的行为背后的根本原因是什么！
我不是在寻找解决此问题的解决方法，所以请不要指向this answer，因为它没有回答这个问题。
Here's a js-fiddle that illustrates the problem
更新1： @Pete是正确的，元素的默认大小属性即使在块上也设置了大小，因为in this fiddle {{3}}的大小和cols属性1}}和<input>会改变它们的宽度。这解决了我的部分问题。
考虑到这一点，我现在的问题是，为什么 <textarea> 元素的行为与其他块元素不同？这对我来说是一个谜！
答案 0 :(得分：4)
我认为默认值会分配给输入的size属性，这意味着除非您专门覆盖它，否则宽度不会是100％
如果您查看firefox specification并向下滚动到有关尺寸的部分，您会发现它们的默认值为20
我不确定按钮的属性会导致在更改为阻止时不是100％宽度
答案 1 :(得分：1)
<input>，<textarea>或<button>等元素包含默认样式，例如边框，或者在您的示例中，包含其大小。我认为原因是HTML仍然可以使用最简单的标记，并且不需要任何来自css（或内联属性）的样式来工作。
display: block不会改变此行为的事实是，输入字段已经一个块元素。但与大多数其他元素相比，width属性上的默认值不是0。
我认为原因很简单：如果你创建一个<input>字段并且不使用css或样式，你根本就看不到它，就像你没有看到没有样式的<div>一样。
答案 2 :(得分：1)
按钮，输入和其他表单元素实际上是已替换元素-请参见以下答案：HTML5: Non-replaced vs. replaced element?
此外，button和input是内联元素。因此，在https://developer.mozilla.org/en-US/docs/Web/CSS/Visual_formatting_model处阅读有关视觉格式的MDN文档，在https://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width处阅读w3c文档，您可以得出结论：对于替换的内联元素：
如果“ height”和“ width”都具有“ auto”的计算值，并且元素也具有固有宽度，则该固有宽度就是“ width”的使用值。
因此，按钮和输入的固有宽度设置为其内容（或输入中的size属性（如果使用））。这就是为什么仅指定display: block不会对按钮或输入大小产生任何影响。您还必须覆盖元素的固有宽度。
更新：在回答此问题后进行了更多研究时，我发现了一个更老的答案，其中涉及到有关此问题的更多详细信息。您可以在这里找到它：https://stackoverflow.com/a/27605483/630170。