轻松搞定CSS元素溢出的使用与注意事项

最新推荐文章于 2023-02-18 17:02:51 发布

涤生大数据

最新推荐文章于 2023-02-18 17:02:51 发布

阅读量1.6k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：好玩的前端相关HTML/CSS/JS/VUE等应用文章标签： css CSS元素溢出 HTML 前端 CSS语法

本文为博主原创文章，属博主老婆资产，故未经博主老婆允许不得转载。

本文链接：https://blog.youkuaiyun.com/qq_26442553/article/details/96835551

好玩的前端相关HTML/CSS/JS/VUE等应用专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了CSS中用于处理元素溢出的overflow属性，包括visible、hidden、scroll、auto及inherit五个设置项，并通过示例代码展示了如何设置父元素以显示超出其尺寸限制的子元素。

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

1.overflow的设置项

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

2.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>