解决子盒子把父盒子撑破问题

最新推荐文章于 2024-07-03 12:00:38 发布

原创最新推荐文章于 2024-07-03 12:00:38 发布 · 4.5k 阅读

1 ·

CC 4.0 BY-SA版权

本文探讨了在CSS中如何避免子元素撑破父元素的问题，介绍了两种解决方案：使用box-sizing属性改变盒模型，以及利用calc()属性精确计算宽度，确保子元素不会超出父元素边界。

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

场景：

<div class="demo">(父盒子)

<div class="box"></div>（子盒子）

</div>

当你设置子盒子的padding和border的时候就会把父盒子撑破，因为子盒子的宽度是100%,而浏览器的默认盒模型为content-box（即内容为其的宽度）

1.利用box-sizing属性。

原理：改变子盒子的盒模型（即把子盒子的content-box变为border-box）。border-box的宽度会包括content+padding+border

2.利用calc（）属性。【css3d的calc()属性详细讲解见https://www.cnblogs.com/avon/p/5908393.html】

知道总宽度是100%，在这个基础上减去boder的宽度（5px * 2 = 10px）,在减去padding的宽度（10px * 2 = 20px），即"100% - (10px + 5px) * 2 = 30px" ，最终得到的值就是div.box的width值：

.demo {
	width: 300px;
	background: #60f;
	padding: 3px 0;
}
.box {
	background: #f60;
	height: 50px;
	padding: 10px;
	border: 5px solid green;
width: 90%;/*写给不支持calc()的浏览器*/
	width:-moz-calc(100% - (10px + 5px) * 2);
	width:-webkit-calc(100% - (10px + 5px) * 2);
	width: calc(100% - (10px + 5px) * 2);
}
这样一来，通过calc()计算后，div.box不在会超出其容器div.demo的宽度，如图所示