使用display:block的输入不是一个块元素，为什么呢？
使用display:block的输入不是一个块元素，为什么呢？
为什么我的文本输入框上的display:block;width:auto;不像一个div一样填充容器的宽度？
我以为div只是一个带有自动宽度的块级元素。在下面的代码中，难道div和输入框的尺寸不应该是一样的吗？
我该如何让输入框填充整个宽度？100%的宽度行不通，因为输入框有padding和边框（导致最终宽度为1像素 + 5像素 + 100% + 5像素 + 1像素）。固定宽度不可行，我正在寻找更灵活的解决方案。
我更希望得到一个直接的答案，而不是一个变通方法。这似乎是一个CSS的怪异问题，理解它可能在以后有用。
我应该指出，我已经可以通过包装器的变通方法来实现这一点。除了破坏页面语义和CSS选择器关系之外，我正试图理解问题的本质以及是否可以通过改变输入框本身的性质来克服它。
好吧，这真的很奇怪！我发现问题的解决方法很简单，只需在width:100%;padding:5px;的输入框中添加max-width:100%。然而，这引发了更多的问题（我将在另一个问题中提问），但似乎宽度使用了正常的CSS盒模型，而max-width使用了Internet Explorer的border-box模型。真是太奇怪了。
好吧，最后一个问题似乎是Firefox 3的一个bug。Internet Explorer 8和Safari 4将max-width限制为100% + padding + border，这是规范要求的做法。终于，Internet Explorer做对了一件事情。
哦，天哪，这太棒了！在尝试过程中，受到了尊敬的大师Dean Edwards和Erik Arvidsson的帮助，我成功地找到了三个解决方案，可以在具有任意padding和边框的元素上实现真正的跨浏览器100%宽度。请参见下面的答案。这个解决方案不需要任何额外的HTML标记，只需要一个类（或选择器）和一个可选的行为来支持旧版Internet Explorer。
在HTML中，当使用display:block属性时，input元素的宽度不会根据其size属性来确定。这是因为input元素的大小是由其size属性确定的。如果要改变它的大小，需要在标签内添加size="50"属性。然后将其改为size="100"，你会明白我的意思吗？
我怀疑是否有更好的解决方法，但我只能想到stackoverflow上的一个问题“Hidden features of HTML”中的一个解决方法：使用content-editable div，而不是input。如果需要将用户输入传递给封闭的表单，可能会有一些麻烦。
我很好奇CSS的人是如何解释这个现象的。如果宽度可以以像素/百分比的方式明确覆盖size属性，我不明白为什么在元素是块级元素时仍然要遵守它。
然而，button元素也会出现同样的情况，它没有size属性。
有一个问题更专注于“为什么标准是这样的”部分的问题，比如这个答案：stackoverflow.com/questions/4567988/… 那里的顶部说法是因为input是一个替换元素。
问题的原因是input标签的display属性设置为block时并不会表现为块级元素的特性，即宽度不会自动填充父容器。解决方法是将input标签包裹在一个div元素中，然后设置div元素的边框、外边距等样式，将input标签设置为宽度100%、无边框和外边距。这样就可以实现input标签宽度自动填充父容器的效果。
示例代码如下：
width:auto
这样就可以实现input标签宽度自动填充父容器的效果。虽然这个方法可以解决问题，但更像是一个变通方法，而不是一个直接的答案。有人可能会疑问为什么input标签会忽略display属性的块级行为。但无论如何，这个方法在解决这个问题上是有效的。
希望Jonathan能理解我在这里的直接表达，我来这里是寻找正确的答案，并且我也很愿意看到中有明确提到他更希望得到一个"直接回答而非变通方法"，但你仍然提供了另一个多次在SO和互联网上重复出现的答案，似乎忽略了问题的约定。我想问一下，为什么呢？提前谢谢你的回答。- 感到好奇的人。
问题：Input with display:block is not a block, why not?
原因：输入框的宽度不能达到100%的宽度，是因为输入框存在padding和border的影响。
解决方法：使用CSS 3中的box-sizing:border-box样式，通过设置box-sizing属性为border-box，可以使元素的宽度计算包括padding和border。在代码中添加以下样式：
.bb {
box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
-khtml-box-sizing: border-box;
}
这样就可以实现输入框的宽度为100%。此外，为了兼容IE6和IE7，可以使用Erik Arvidsson编写的行为（behavior）以及Dean Edwards进行的一些调整。还可以使用Schepp在GitHub上更新的IE6/7行为（behavior）的Polyfill来处理更多的边缘情况，并与IE8兼容。此外，还可以使用calc()函数来计算元素的宽度，如`width: calc(100% - XXpx);`，但是这种方法可能会影响性能，并且不是完全支持的。