box-sizing解决input溢出父元素问题

最新推荐文章于 2022-09-09 22:46:27 发布

辉小哥

最新推荐文章于 2022-09-09 22:46:27 发布

阅读量2.6k

点赞数 5

分类专栏： css 文章标签：解决input溢出 css

本文链接：https://blog.youkuaiyun.com/weixin_37637452/article/details/82884628

版权

css 专栏收录该内容

1 篇文章

订阅专栏

本文探讨了在CSS布局中遇到的一个常见问题：当子元素（如input框）的尺寸设置不当导致溢出其父元素时，如何使用box-sizing属性进行有效调整。通过对比content-box和border-box两种模式，阐述了border-box模式下，即使增加内边距和边框，元素的实际大小也不会超出预设值，从而避免了溢出问题。

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

做项目时，遇到了一下问题：
当我子input框设置了
.right input { height: 30px; width: 100%; margin-top: 8px; margin-left: 3px; padding: 3px; }
在这里插入图片描述
可以看到input框已经放不下了，溢出了父元素的框。可能有人说设置overflow：hidden就不会啦。
但是，超过父边框的就直接隐藏起来了，我们的input框就好像硬生生的被切断了，不美观。

所以，以下就要用box-sizing这个属性来解决：

box-sizing常用有两个属性：content-box和border-box

content-box:是默认值，width和height直接决定了内容content的高度（上面我们宽度设为100%，还要加上padding和border的宽度，不撑开才怪）

border-box:width和height就已经包含了padding+border+content的宽度了，你边框、内边距设置得越多，内容也会随之缩减，最终宽度都是你设定好的那个宽度。

所以我在input的样式里面加上了 box-sizing:border-box

	.right input {
				box-sizing: border-box;
				height: 30px;
				width: 100%;
				margin-top: 8px;
				margin-right: 3px;
				padding: 3px;
			}

duang！！最终效果ok！
在这里插入图片描述