为什么子输入字段比父 div 宽 [重复]答案

【问题标题】：Why child input field is wider than parent div [duplicate]为什么子输入字段比父 div 宽 [重复]
【发布时间】：2016-02-19 05:10:02
【问题描述】：

HTML

<div class="wrap">
    <input class="field" type="text">
    <textarea class="field" row="10"></textarea>
</div>

CSS

.wrap{width:300px;overflow:hidden;padding:10px;}
.field{display:block;width:100%;margin:10px 0;padding:10px;}

我希望文本输入的宽度和 textarea 应该完全等于父 div。但他们不是。谁能解释一下为什么？

【问题讨论】：

标签： css

【解决方案1】：

总宽度计算为padding + width + borderWidth 的总和。这是盒子模型的默认行为。您可以使用box-sizing 属性对其进行更改。在你的情况下：

.field {
    ...
    box-sizing: border-box;
}

【讨论】：

【解决方案2】：

这是因为您已将 padding 应用于 .field 删除填充并看到它会起作用。

.field{display:block;width:100%;margin:10px 0;}

或

您已设置100% 宽度，因此只需将宽度设置如下。

.field {
    display: block;
    margin: 10px 0;
    padding: 10px;
    width: 280px;
}

【讨论】：

【解决方案3】：

width: 100% 属性适用于内容框，而不是边框框。如果您使用 CSS3，您可以设置 box-sizing: border-box 以获得预期的大小。

【讨论】：

【解决方案4】：

试试这个：

.wrap{width:300px;overflow:hidden;padding:10px 0px;}

【讨论】：