Html 为什么100%的输入宽度总是超出包含的div？

请注意小提琴：

我有一个带衬垫的容器。我想要的是输入（文本）是100%的宽度从填充。目前，虽然它超出了填充。关于如何防止输入超出容器/填充而不必使用固定宽度的建议

---

感谢标准框模型中元素的

宽度
属性不包括填充、边距或边框；它是给定给元素内容的宽度，而不是框本身的宽度。盒子的宽度比填充物的大小大。然后添加边框，最后添加边距

旧版本的IE（v4和5）使用了非标准的盒子模型，现在称为“怪癖模式”。此长方体模型将填充和边框放置在测量区域内，以便长方体的
宽度
属性包含它们。这种型号确实使拥有100%宽度的盒子变得更容易

这两种盒子模型都有各自的优点，但IE在实现盒子模型时违反了标准，这也是开发者很难更新为IE设计的只适用于其他浏览器的旧站点的原因之一

最近，添加了一个CSS属性，允许设计师选择他们希望对页面上的任何给定元素使用的框模型。该属性称为
框大小调整
，当前使用的大多数浏览器都支持该属性；唯一不支持它的主要工具是IE6和IE7（其他工具需要供应商前缀，但确实支持）。有关该功能的浏览器支持表，请参见此处：

另一个选择是根本不设置宽度。默认情况下，
元素被设置为填充可用宽度，这基本上意味着100%，但在某种程度上，无论填充和边距设置为什么，这基本上就是您所追求的。如果已覆盖宽度并希望将其设置回此设置，请使用
width:auto

希望能有所帮助。
在容器div中创建一个新div，没有指定的宽度和填充。它将自动占据填充内的全部宽度。然后，您可以给您的输入一个100%的宽度，通过这个宽度它可以完全填充内部分区。
表单输入很难设置样式。而且要使样式在所有浏览器中都保持一致尤其困难。我发现的为文本输入设置样式的最好方法之一是去掉边框、轮廓、填充和边距。然后用所需的边框、轮廓、填充和边距将输入包装在一个div中

我想我实现了你想要的。查看这个分叉的JSFIDLE:
只需注意：这是因为box模型的性质。
的宽度实际上是100%+填充

width: 100%;

元素的总可用宽度（包括填充），由其父元素定义

width: auto;

将扩展元素以填充剩余空间。
请尝试此操作

input[type="text"] {
     width: 100%; 
     box-sizing: border-box;
     -webkit-box-sizing:border-box;
     -moz-box-sizing: border-box;
}

是的，很难处理输入元素的大小。盒子大小没有太大区别，它仍然超出了边界。同意使用div是一种很好的方法。下面是我在IE11（11.0.18）上测试的内容

现在让我们使用div。关键是将输入元素的边距和填充设置为0px，宽度设置为100%。这使得输入元素填充父容器“div”元素

    <fieldset id="inputs">
        <div id="username_div">
            <input id="username" type="text" placeholder="username" required autofocus />
        </div>
        <div id="password_div">
            <input id="password" type="password" placeholder="password" />
        </div>
    </fieldset>


    #inputs div {
        border: 1px solid red;
        margin: 5px 10px 5px 10px;
        padding: 10px 10px 10px 30px;
        border: 1px solid #CCC;
        border-radius: 5px;
    }

    #inputs input {
        margin:0px;
        padding:0px;
        width:100%;
    }


#输入部{
边框：1px纯红；
保证金：5px10px 5px10px；
填充：10px 10px 10px 30px；
边框：1px实心#CCC；
边界半径：5px；
}
#输入{
边际：0px；
填充：0px；
宽度：100%；
}
填充当然是个问题，我很想知道如何自己做。这里解决了可能重复的问题。工作起来很有魅力！你说得对。我的答案是错的。问题不在于div上的填充，而在于输入本身的边框和填充。如果你去掉它，你就没事了（）但那不是你想要的。我想你也需要把多余的填充复制给父母。如果给div一个35px而不是15px的右填充，那么可以补偿输入的10px左填充：或者只给输入/形成一个-{padding}的边距？是的。。问题是，当你把一个带有style=“width:100%”的文本框（或html5输入元素）放在一个div中时，你刚才描述的似乎不起作用