方法一 display：none

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 200px;height: 200px;background-color: pink;display: none;}</style>
</head>
<body><div>我是一个div</div>
</body>
</html>

我们打开浏览器，鼠标右键点击检查，选中div标签之后，我们可以看到浏览器窗口上什么也没有，说明通过display：none设置元素隐藏，不会占据屏幕空间。

方法二 visibility: hidden

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 200px;height: 200px;background-color: pink;visibility: hidden;}</style>
</head>
<body><div>我是一个div</div>
</body>
</html>

我们打开浏览器，鼠标右键点击检查，选中div标签之后，我们可以看到浏览器窗口上显示了div 200 x 200，说明通过visibility: hidden设置元素隐藏，会占据屏幕空间。

方法三 opacity: 0

opacity 指的是透明度，取值为 0-1，0表示透明，1表示不透明。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 200px;height: 200px;background-color: pink;opacity: 0;}</style>
</head>
<body><div>我是一个div</div>
</body>
</html>

同样，使用 opacity: 0；隐藏元素也会占据屏幕空间。

方法四 overflow：hidden

使用overflow：hidden；主要是对超出父元素的内容隐藏

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.div1{width: 200px;height: 200px;background-color: pink;overflow: hidden;}</style>
</head>
<body><div class="div1"><div>第1个div标签</div><div>第2个div标签</div><div>第3个div标签</div><div>第4个div标签</div><div>第5个div标签</div><div>第6个div标签</div><div>第7个div标签</div><div>第8个div标签</div><div>第9个div标签</div><div>第10个div标签</div><div>第11个div标签</div><div>第12个div标签</div><div>第13个div标签</div><div>第14个div标签</div><div>第15个div标签</div><div>第16个div标签</div><div>第17个div标签</div><div>第18个div标签</div><div>第19个div标签</div><div>第20个div标签</div></div>
</body>
</html>

没有使用overflow：hidden之前：

使用overflow：hidden之后：

此外，我们可以设置超出部分以滚动条形式显示：

  overflow: scroll;

自适应：
超出内容自动生成滚动条

overflow: auto;

这里水平方向内容没有超出，所以没有生成水平滚动条：

CSS设置元素隐藏的4种方法相关推荐

css中实现元素隐藏的几种方法
1.display:none; display翻译成中文是显示.展览的意思:将display的属性改为none可以实现元素的隐藏,元素和盒子模型也不生成,被隐藏的元素不占位置,看不见摸不着,它会导致浏 ...
将页面元素隐藏的10种方法
在Web开发中,隐藏页面元素使其视觉不可见是一个非常常见的需求.为了实现这一目标,我们通常会采用多种方法,最常用的例如CSS的display属性,只要设置为node即可隐藏元素. 本文将通过对当前所有 ...
css实现显示隐藏的5种方法
css实现显示隐藏是在写前端时经常遇见的问题,我根据自己的经验以及网上的方法,一共总结了5种.下面我分析一下它们各自的特点. 1. dispalay:none 这是最简单也是最容易想到的方法. .hi ...
CSS设置元素隐藏显示透明度
CSS元素隐藏显示的两种方式 visibility: hidden;(隐藏) visibility:visible:(显示)
js中设置元素class的三种方法小结
一.el.setAttribute('class','abc'); 复制代码代码如下: <!DOCTYPE HTML> <HTML> <HEAD> <met ...
CSS绝对定位元素居中的几种方法
CSS居中绝对定位元素的方法,有很多种,下面是我收集的几种 1,div宽度未知1 <body><div style="position: absolute; left: 5 ...
CSS设置style属性的3种方法
CSS:层叠样式表可以将css样式编写到元素的style属性当中: 1.将样式直接写到style属性中,这种样式我们称为内联样式,内联样式只对当前的元素中的内容起作用,内联样式不方便复用,不推荐使用 ...
html怎么把元素垂直居中显示,分享html css元素垂直居中的几种方法
元素垂直居中的几种方法: 方法一:设置height和line-height 在CSS中,line-height 属性设置两段段文本之间的距离,也就是行高,如果我们把一段文本的line-height设置 ...
html元素隐藏js 控制,JS控制HTML元素的显示和隐藏的两种方法
JS控制HTML元素的显示和隐藏的两种方法利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一 ...

CSS设置元素隐藏的4种方法

方法一 display：none

方法二 visibility: hidden

方法三 opacity: 0

方法四 overflow：hidden

CSS设置元素隐藏的4种方法相关推荐

最新文章

热门文章