【CSS】元素的显示与隐藏 display visibility overflow 属性区别

梦溪

发布于 2021-08-19 10:40:49

2.4K0

发布于 2021-08-19 10:40:49

文章被收录于专栏：梦溪博客

元素的显示与隐藏

display属性

display：none 此元素不会被显示。 display：block 此元素将显示为块级元素，此元素前后会带有换行符。

display隐藏元素后，不占有原有位置

visibility 属性

visibility：visible 默认值。元素是可见的。 visibility：hidden 元素是不可见的。

visibility隐藏元素后，保留原有位置

overflow 属性

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

案列

鼠标经过显示蒙版及图标


<style>
	.tudou {
		position: relative;
		width: 444px;
		height: 320px;
		background-color: pink;
		margin: 30px auto;
	}
	.tudou img {
		width: 100%;
		height: 100%;
	}
	.mask {
		display: none;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0, .3) url(bf.jpg) no-repeat center;
	}
	.tudou:hover .mask{
		display: block;
	}
</style>
<body>
	<div class="tudou">
		<div class="mask"></div>
		<img src="tb.png" />
	</div>
</body>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021 年 08 月，如有侵权请联系 cloudcommunity@tencent.com 删除

block