CSS 溢出-y 属性(1) - 芒果文档

📌 相关文章

📜 CSS 溢出-y 属性(1)

📅 最后修改于: 2023-12-03 14:40:21.564000 🧑 作者: Mango

CSS 溢出-y 属性

CSS 溢出-y 属性用于控制元素在垂直方向上的溢出行为。当元素内容超出其高度时，垂直溢出属性会控制内容会如何表现。

使用方法

使用 CSS 溢出-y 属性可以控制元素在垂直方向上的溢出行为。其语法如下：

overflow-y: visible | hidden | scroll | auto | inherit;

属性值

visible：默认值，超出元素的内容可见。
hidden：超出元素的内容被隐藏，不可见。
scroll：超出元素的内容被隐藏，但可以通过滚动条查看。
auto：当元素内容超出时，自动选择滚动或隐藏方式，根据需要显示滚动条。
inherit：从父元素继承 overflow-y 属性的值。

示例

<!DOCTYPE html>
<html>
<head>
	<title>CSS 溢出-y 属性示例</title>
	<style>
		.container {
			width: 200px;
			height: 100px;
			border: 1px solid black;
			margin: 10px;
		}
		.visible {
			overflow-y: visible;
		}
		.hidden {
			overflow-y: hidden;
		}
		.scroll {
			overflow-y: scroll;
		}
		.auto {
			overflow-y: auto;
		}
	</style>
</head>
<body>
	<p>以下是四个使用 overflow-y 属性的段落，可通过修改样式表中的属性值进行比较。</p>
	<div class="container visible">
		<p>visible：默认值，超出元素的内容可见。</p>
		<p>超出元素的内容1。</p>
		<p>超出元素的内容2。</p>
		<p>超出元素的内容3。</p>
	</div>
	<div class="container hidden">
		<p>hidden：超出元素的内容被隐藏，不可见。</p>
		<p>超出元素的内容1。</p>
		<p>超出元素的内容2。</p>
		<p>超出元素的内容3。</p>
	</div>
	<div class="container scroll">
		<p>scroll：超出元素的内容被隐藏，但可以通过滚动条查看。</p>
		<p>超出元素的内容1。</p>
		<p>超出元素的内容2。</p>
		<p>超出元素的内容3。</p>
	</div>
	<div class="container auto">
		<p>auto：当元素内容超出时，自动选择滚动或隐藏方式，根据需要显示滚动条。</p>
		<p>超出元素的内容1。</p>
		<p>超出元素的内容2。</p>
		<p>超出元素的内容3。</p>
	</div>
</body>
</html>

结语

CSS 溢出-y 属性用于控制元素在垂直方向上的溢出行为。通过了解该属性的使用方法和属性值，可以轻松实现元素内容的垂直溢出控制。