前端之家收集整理的这篇文章主要介绍了
css – 是否可以设置文本输入以填充其父项的宽度？，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
我已经有这个问题多年了,我以前也看过类似的问题,但是没有一个
解决了这样一个事实：当在元素上设置width：100％时,paddings,边距和边框会
增加宽度.
看看这个Fiddle.
白色最上面的文本框是一个标准文本框,其宽度设置为100％.由于边距,边距和边框设置,您可以看到它溢出它的父母.
绿色文本框的样式就像使用position：absolute的div.这在webkit浏览器中是一个梦想,但没有其他地方.
红色的div是控件 – 我希望输入的行为就是这样.
有没有任何黑客/技巧我可以使用我的文本输入行为就像所有现代浏览器中的红色div,换句话说,适合在父母的填充内？请编辑我的小提琴或创建自己的陪同你的答案.谢谢！
您可以：
input#classic
{
width: 100%;
padding: 5px;
margin: 0;
-webkit-Box-sizing: border-Box;
-moz-Box-sizing: border-Box;
-o-Box-sizing: border-Box;
-ms-Box-sizing: border-Box;
Box-sizing: border-Box;
}
JS Fiddle demo.
注意我删除了边距,因为这是造成溢出,并设置框大小以确定元素的宽度,包括边框的宽度和填充.
原文链接：https://www.f2er.com/css/216589.html
