html - 具有填充和百分比宽度的输入元素超过父 div

Question

我有这个:

<div class="wrapper">
    <input type="text"/>
</div>

div{
    border: 1px solid red;
    width: 300px;
}

input{
    width: 100%;
    padding: 10px;
}

我需要输入为父 div 的 100%，但我还需要此输入有 10px 的填充。结果可以在这里看到:http://jsfiddle.net/pdJYF/

我怎样才能做到这一点？

Answer 1

添加box-sizing到您的输入字段:

input{
       -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: 100%;
    padding: 10px;
}

• Example Fiddle
• Browser Compatibility

---

底层的“问题”是 HTML/CSS 的盒子模型。正如您在 illustration of the respective MDN article 中看到的那样每个元素的框有 4 个不同的区域:边距框、边框框、填充框和内容框。

当您将度量(宽度 或高度)分配给元素时，这将应用于这些区域之一。例如，如果该区域是内容框，则添加元素边距、边框和填充的总大小。因此，您不会设置框的总尺寸，而是设置其中一个包含的框。

CSS 属性 box-sizing告诉浏览器在计算元素的尺寸时使用哪个框。默认值为 content-box。所以在上面的示例中添加了边距、边框和填充的值，因此元素太大了。通过将框模型设置为 border-box，只有边距会添加到尺寸(此处为零)并且元素适合。