元素的显示和隐藏

最新推荐文章于 2024-05-09 10:05:40 发布

喵_美

最新推荐文章于 2024-05-09 10:05:40 发布

阅读量371

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/qq_34708564/article/details/90242221

版权

html 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

在CSS中有三个显示和隐藏的单词比较常见，我们要区分开，他们分别是 display visibility 和 overflow。
他们的主要目的是让一个元素在页面中消失，但是不在文档源码中删除。最常见的是网站广告，当我们点击类似关闭不见了，但是我们重新刷新页面，它们又会出现和你玩躲猫猫！！

display 显示

display 设置或检索对象是否及如何显示。

display : none 隐藏对象与它相反的是 display:block 除了转换为块级元素之外，同时还有显示元素的意思。

特点：隐藏之后，不再保留位置。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	body{
			background-color: red;
		}
	div {
		width: 200px;
		height: 200px;
		background-color: pink;
		display: none; /*隐藏某个元素   ==  display: block 显示某个元素 不保留位置*/
	}
	p {
		width: 200px;
		height: 400px;
		background-color: purple;
	}
	</style>
</head>
<body>
	<div></div>
	<p>哈哈哈</p>
</body>
</html>

在这里插入图片描述

visibility 可见性

设置或检索是否显示对象。

visible : 　对象可视

hidden : 　对象隐藏

特点：隐藏之后，继续保留原有位置。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	body{
			background-color: red;
		}
	div {
		width: 200px;
		height: 200px;
		background-color: pink;
		/*visibility: visible;  显示某个元素*/
		visibility: hidden;  /*隐藏某个元素  保留位置的  */
	}
	p {
		width: 200px;
		height: 400px;
		background-color: purple;
	}
	</style>
</head>
<body>
	<div></div>
	<p>哈哈哈</p>
</body>
</html>

在这里插入图片描述

overflow 溢出

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。

visible : 　不剪切内容也不添加滚动条。

auto : 　超出自动显示滚动条，不超出不显示滚动条

hidden : 　不显示超过对象尺寸的内容，超出的部分隐藏掉

scroll : 　不管超出内容否，总是显示滚动条

opacity透明度

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div{
      width: 300px;
      height: 200px;
      border:1px solid red;

    }
  </style>
</head>
<body>
<input type="button" value="按钮" id="btn"/>
<div id="dv"></div>哈哈
<script src="common.js"></script>
<script>
  document.getElementById("btn").onclick=function () {
    //占位
    my$("dv").style.opacity=0;
  };
</script>
</body>
</html>

设置样式隐藏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div{
      width: 300px;
      height: 200px;
      border:1px solid red;

    }
  </style>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<div id="dv"></div>哈哈
<script src="common.js"></script>
<script>
  document.getElementById("btn").onclick=function () {
    //占位
    my$("dv").style.height="0px";
    my$("dv").style.border="0px solid red";
  };
</script>
</body>
</html>

不推荐，笨方法

喵_美

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
元素的显示和隐藏

在CSS中有三个显示和隐藏的单词比较常见，我们要区分开，他们分别是 display visibility 和 overflow。他们的主要目的是让一个元素在页面中消失，但是不在文档源码中删除。最常见的是网站广告，当我们点击类似关闭不见了，但是我们重新刷新页面，它们又会出现和你玩躲猫猫！！display 显示display 设置或检索对象是否及如何显示。display : none 隐藏对...
复制链接

扫一扫