html overflew属性

没时间喽

已于 2023-06-27 20:14:58 修改

阅读量2.1k

点赞数 2

分类专栏： HTML+CSS+JavaScript 文章标签： html 前端

于 2023-06-26 19:30:51 首次发布

本文链接：https://blog.csdn.net/Z15800020057/article/details/131404029

版权

HTML+CSS+JavaScript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

overflow属性是CSS中一个非常有用的属性，它可以用来控制元素的溢出内容的呈现方式。overflow属性有以下几个取值：

visible（默认值）：内容不会被修剪，会呈现在元素框之外。
hidden：内容会被修剪，并且其余内容是不可见的。
scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto：如果溢出则自动显示滚动条。
inherit：规定应该从父元素继承 overflow 属性的值。

除了以上取值之外，还可以设置 overflow-x 和 overflow-y，用来控制元素的水平方向和垂直方向的溢出内容的呈现方式。其取值和 overflow 相同。

<!DOCTYPE html>
<html>
<head>
	<title>Overflow example</title>
	<style>
		.container {
			width: 200px;
			height: 100px;
			overflow: hidden;
			border: 1px solid #ccc;
		}
		.scroll {
			height: 200px;
		}
	</style>
</head>
<body>
	<h2>Overflow example</h2>
	<p>在这个例子中，我们可以通过改变盒子的高度来演示溢出内容的效果：</p>
	<div class="container">
		<p>这是一个容器，它的高度设置为 100px， overflow 设置为 hidden。当内容超出容器的高度时，会被修剪，不会呈现在元素框之外。</p>
	</div>
	<div class="container scroll">
		<p>这也是一个容器，它的高度设置为 200px， overflow 设置为 hidden。当内容超出容器的高度时，浏览器会显示滚动条以便查看其余的内容。</p>
	</div>
</body>
</html>

第一个盒子的 overflow 属性设置为 hidden，当内容超出容器的高度时，会被修剪，不会呈现在元素框之外。第二个盒子的 overflow 属性也设置为 hidden，但是它的高度超过了容器的高度，因此浏览器会显示滚动条以便查看其余的内容。