css中表单input width:100%宽度超过父节点

YURUIQING1

已于 2022-03-23 15:10:41 修改

阅读量454

点赞数 2

文章标签： css

于 2022-03-23 14:59:06 首次发布

本文链接：https://blog.csdn.net/YURUIQING1/article/details/123685550

版权

当CSS中input元素设置width:100%时，由于边框和内填充的计算，可能导致其宽度超出父元素。解决这个问题的方法是应用`box-sizing:border-box;`属性，这将使边框和内填充包含在元素的总宽度内，确保不超出父元素的边界。此技巧适用于现代浏览器，包括Webkit和Mozilla环境。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css中表单input width:100%宽度超过父节点

问题呈现方式：
在这里插入图片描述
问题出现原因：
W3C标准计算宽度：100%的元素宽度+0.5rem的左padding+左右共计2px的border。

解决方法：

 box-sizing: border-box;//只写这行大部分也能解决
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;

在这里插入图片描述