css之解决元素溢出问题

最新推荐文章于 2025-05-31 08:44:07 发布

吃喝玩乐秀起来

最新推荐文章于 2025-05-31 08:44:07 发布

阅读量5.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： # CSS 文章标签： css

本文链接：https://blog.csdn.net/weixin_49855251/article/details/113318499

CSS 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了CSS中处理元素溢出的技巧，主要聚焦于overflow属性的使用。当子元素尺寸超过父元素时，可以使用overflow属性来控制显示方式。例如，visible允许内容超出，hidden则裁剪内容，scroll添加滚动条，而auto则根据需要显示滚动条。通过实例代码展示了如何设置overflow属性，以实现不同效果。

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

css元素溢出
当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。

overflow的设置项：
1、visible 默认值。内容不会被修剪，会呈现在元素框之外。
2、hidden 内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功能。
3、scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
4、auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
5、inherit 规定应该从父元素继承 overflow 属性的值。

在这里插入图片描述
解决办法：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>元素溢出</title>
	<style type="text/css">
		
		.box{
			width:300px;
			height:200px;
			border:1px solid #000;
			margin:50px auto 0;
			background-color:gold;
			line-height:30px;
			/* 
				visible:缺省值，溢出的元素可见;

				hidden：将溢出的元素裁切隐藏

				scroll:显示滚动条，不管是否溢出;

				auto：溢出的时候产生滚动条，不溢出的时候不显示滚动条
				 */
			overflow:auto;
		}


	</style>
</head>
<body>
	<div class="box">当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。</div>
</body>
</html>