html - 为什么输入字段/文本字段的 100% 宽度重叠包含 div？

Question

为什么输入字段/文本字段的 100% 宽度与包含的 div 重叠？

CSS：

.red-div-400px{
    background-color:red;
    width:400px
}

.input{
    width: 100%;
    min-height: 28px;
}

html:

<div class="red-div-400px">
E-mail  
<input  class="input" type="text">
</div>

下面的这段代码解决了这个问题，但是是什么导致了重叠？为什么不能将文本字段的宽度设置为 100%？

 width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
 box-sizing: border-box;

亲切的问候

score 5 · Accepted Answer

输入字段的宽度包括padding和任何border集合，因此 100% + 1px 填充 + 2px 边框 = 重叠。

修复了这个box-sizing问题，因为它确保渲染的输入字段是指定的宽度。

score 3 · Accepted Answer

您忘记了 2px 边框（每边）。

你可以使用 CSS3 Calc 来避免这个问题：

width: calc(100% - 4px);

要查看支持它的浏览器，请参阅CanIUse或类似网站：http ://caniuse.com/#feat=calc

score 2 · Accepted Answer

导致这种情况的输入的填充及其边界。请参阅更新的小提琴。如果您检查输入，您将看到它不再重叠：

.input 
{
    width: 100%;
    min-height: 28px;
    padding: 0;
    border: none;
}

3 回答 3