CSS---元素溢出

最新推荐文章于 2025-05-13 17:22:39 发布

Go· again

最新推荐文章于 2025-05-13 17:22:39 发布

阅读量343

点赞数

CC 4.0 BY-SA版权

分类专栏： web

本文链接：https://blog.youkuaiyun.com/qq_43766304/article/details/104719845

web 专栏收录该内容

41 篇文章

订阅专栏

本文介绍了CSS中处理元素溢出的问题，当子元素尺寸超出父元素时，可以通过overflow属性来控制显示方式，以实现合适的布局效果。

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

写给自己：

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

元素溢出现象

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>CSS---元素溢出</title>
	<style type="text/css">
		.box{
			width: 300px;
			height: 200px;
			border: 1px solid cyan;
			margin: 50px auto 0; 
			background-color: gold;
			line-height: 30px;
			
			
		}
	</style>
</head>
<body>
	<div class="box">
		当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的
		子元素的方式，设置方法是通过overflow属性来设置.	
		当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的
		子元素的方式，设置方法是通过overflow属性来设置.
		当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的
		子元素的方式，设置方法是通过overflow属性来设置.
		当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的
		子元素的方式，设置方法是通过overflow属性来设置.
	</div>
</body>
</html>

解决办法

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>CSS---元素溢出</title>
	<style type="text/css">
		.box{
			width: 300px;
			height: 200px;
			border: 1px solid cyan;
			margin: 50px auto 0; 
			background-color: gold;
			line-height: 30px;
			/* overflow: hidden;   裁剪，溢出内容不可见 */
			/* overflow: visible;   缺省值，内容呈现不变 */
			/* overflow: scroll;      内容会被修剪，但是浏览器会以滚动条的形式以便查看其余的内容 */
			 overflow: auto;           /* 如果内容被修剪，但是浏览器会以滚动条的形式以便查看其余的内容 */
			/* 	overflow: inherit;  一般不用 */
			
		}
	</style>
</head>
<body>
	<div class="box">
		当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的
		子元素的方式，设置方法是通过overflow属性来设置.	
		当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的
		子元素的方式，设置方法是通过overflow属性来设置.
		当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的
		子元素的方式，设置方法是通过overflow属性来设置.
		当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的
		子元素的方式，设置方法是通过overflow属性来设置.
	</div>
</body>
</html>