Css 为什么子输入字段比父div宽

HTML

我希望文本输入的宽度和textarea应该完全等于父div。但事实并非如此。有人能解释为什么吗

---

宽度：100%属性适用于内容框，而不是边框框。如果您使用的是CSS3，则可以设置

框大小：边框框

，以获得预期大小

---

总宽度计算为

填充的总和

+

宽度

+

边界宽度

。这是长方体模型的默认行为。您可以使用

框大小调整

属性对其进行更改。就你而言：

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

---

进一步阅读：

这是因为对

字段应用了
填充
。请删除填充，然后查看它是否有效

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

或

您已经设置了
100%
宽度，所以只需按如下所示设置宽度

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

试试这个：

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

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

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