web前端学习（二十二）——CSS3元素的显示（display）、可见性（visibility）与溢出（overflow）属性的相关设置

胜天半子-祁同伟

已于 2024-04-24 11:26:37 修改

阅读量9.5k

点赞数 2

分类专栏： # 【HTML+CSS+JavaScript】文章标签：前端学习 css3

于 2021-02-02 12:27:21 首次发布

本文链接：https://blog.csdn.net/weixin_43823808/article/details/113548969

版权

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

48 篇文章 46 订阅

订阅专栏

1.CSS元素的显示（display）、可见性（visibility）

display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。

1.1 隐藏元素：display:none或visibility:hidden

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。

①visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

②display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

小实例1：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>CSS简单学习</title>
		<style type="text/css">
			h1.hidden {
				display: none;
			}
		</style>
	</head>
	
	<body>
		<h1>这是一个可见标题</h1>
		<h1 class="hidden">这是一个隐藏标题</h1>
		<p>注意，该实例中的隐藏标题不占用空间。</p>
	</body>
</html>

小实例2：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>CSS简单学习</title>
		<style type="text/css">
			h1.hidden {
				visibility: hidden;
			}
		</style>
	</head>
	
	<body>
		<h1>这是一个可见标题</h1>
		<h1 class="hidden">这是一个隐藏标题</h1>
		<p>注意，该实例中的隐藏标题仍然占用空间。</p>
	</body>
</html>

1.2 更改块元素和内联元素的显示

块元素是一个元素，占用了全部宽度，在前后都是换行符。

块元素的例子：

<h1>
<p>
<div>

内联元素只需要必要的宽度，不强制换行。

内联元素的例子：

<span>
<a>

通过display: inline; 可以将块元素的显示更改为内联元素的显示。

通过display: block; 可以将内联元素的显示更改为块元素的显示。

小实例：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>CSS简单学习</title>
		<style type="text/css">
			li {
				/* display属性的值为"inline"的结果,两个元素显示在同一水平线上。*/
				display: inline;
			}
			span {
				/* display属性值为"block"的结果,这两个元素之间的换行符。*/
				display: block;
			}
		</style>
	</head>
	
	<body>
		<p>列表中链接依次水平显示：</p>
		<ul>
			<!-- 如果不指定display: inline;
			     则下面的5个列表项会依次换行显示 -->
			<li><a href="https://www.baidu.com" target="_blank">百度</a></li>
			<li><a href="https://www.tencent.com" target="_blank">腾讯</a></li>
			<li><a href="https://www.1688.com" target="_blank">阿里巴巴</a></li>
			<li><a href="https://www.huawei.com" target="_blank">华为</a></li>
			<li><a href="https://www.jd.com" target="_blank">京东</a></li>
		</ul><hr />
		<h2>AD Carry</h2>
		<!-- 如果不指定display: block;
			 则深渊巨口会显示在探险家的后面 -->
		<span>圣枪游侠、战争女神、探险家</span>
		<span>深渊巨口</span>
		<h2>辅助</h2>
		<!-- 如果不指定display: block;
			 则弗雷尔卓德之心会显示在魂锁典狱长的后面 -->
		<span>熔岩巨兽、牛头酋长、魂锁典狱长</span>
		<span>弗雷尔卓德之心</span>
	</body>
</html>

1.3 使用表格中的collapse属性隐藏相应的元素

即 visibility: collapse;

小实例：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>CSS简单学习</title>
		<style type="text/css">
			table,th,td {
				border: 1px solid black;
			}
			tr.collapse {
				visibility: collapse;
			}
		</style>
	</head>
	
	<body>
		<table>
			<tr>
				<th>英文</th>
				<th>中文</th>
			</tr>
			<tr>
				<td>Cat</td>
				<td>猫</td>
			</tr>
			<tr class="collapse">
				<td>Dog</td>
				<td>狗</td>
			</tr>
			<tr>
				<td>Pig</td>
				<td>猪</td>
			</tr>
		</table>
	</body>
</html>

2.CSS元素的溢出（overflow）

CSS overflow 属性用于控制内容溢出元素框时显示的方式。可以控制内容溢出元素框时在对应的元素区间内添加滚动条。

overflow属性有以下值：（注意：overflow 属性只工作于指定高度的块元素上。）

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

2.1 overflow: visible;

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>CSS简单学习</title>
		<style type="text/css">
			div {
				background-color: aqua;
				width: 200px;
				height: 50px;
				border: 1px dotted black;
				overflow: visible;
			}
		</style>
	</head>
	
	<body>
		<div>
			<p>这里的文本内容会溢出元素框！！！</p>
			<p>这里的文本内容会溢出元素框！！！</p>
			<p>这里的文本内容会溢出元素框！！！</p>
		</div>
	</body>
</html>

2.2 overflow: scroll; 和 overflow: hidden;

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>CSS简单学习</title>
		<style type="text/css">
			#overflowTest1 {
				background-color: #00FFFF;
				color: #FF0000;
				border: 1px solid #008000;
				width: 450px;
				height: 100px;
				padding: 30px;
				overflow: scroll;
			}
			#overflowTest2 {
				background-color: #00FFFF;
				color: #FF0000;
				border: 1px solid #008000;
				width: 450px;
				height: 100px;
				padding: 30px;
				overflow: hidden;
			}
		</style>
	</head>
	
	<body>
		<div id="overflowTest1">
			<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
			<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
			<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
			<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
			<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
		</div><br /><br />
		<div id="overflowTest2">
			<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
			<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
			<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
			<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
			<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
		</div>
	</body>
</html>

胜天半子-祁同伟

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
6
评论
web前端学习（二十二）——CSS3元素的显示（display）、可见性（visibility）与溢出（overflow）属性的相关设置

web前端学习（二十二）——CSS3元素的显示（display）、可见性（visibility）与溢出（overflow）属性的相关设置
复制链接

扫一扫