css隐藏相关

最新推荐文章于 2024-09-15 21:53:51 发布

`寂凉空城

最新推荐文章于 2024-09-15 21:53:51 发布

阅读量53

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/weixin_45093916/article/details/120634105

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了四种CSS隐藏元素的方法：opacity、display:none、visibility:hidden以及使用position实现元素脱离文档流。这些方法在不同的场景下各有优势，例如opacity不影响元素占用空间，而display:none则完全从布局中移除元素。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>隐藏相关</title>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				background-color: red;
			}
			/* 1、用属性opicity属性 。注意：该属性是兼容IE9以上的浏览器，IE8 以及更早的版本支持替代的 filter 属性，*/
			/* 2、display:none属性，会把元素真正隐藏起来 */
			/* 3、visibility属性类似opacity属性，该属性值为hidden的时候，元素将会隐藏，也会占据着自己的位置，并对网页的布局起作用， */
			/* 4、position属性的意义就是把元素脱离文档流移出视觉区域，添加该属性后既不会影响布局，又能让元素保持可以操作。应用该属性后，主要就是通过控制方向（top,left,right,bottom），达到一定的值，离开当前可是页面。 */
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>