HTML元素的隐藏四种方法

一、方法一：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>.box {display: none;}</style>
</head><body><div class="box">我是box盒子</div>
</body></html>

设置之后是不占空间的，就不存在一样效果如下

<!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>.box {display: none;}</style>
</head><body><div class="box">我是box盒子</div><p>哈哈哈哈</p>
</body></html>

二、方式二：visibility设置为hidden

设置为hidden，虽然元素不可见，但它还是会占据元素相应的空间
默认为visible，可见

<!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>.box {display: none;}.content {visibility: hidden;}</style>
</head><body><div class="box">我是box盒子</div><p>哈哈哈哈</p><div class="content">我是content</div><div>呵呵呵</div>
</body></html>

三、rgba设置颜色，将a设置为0

rgba的a设置的是alpha值, 可以设置透明度, 不影响子元素，只是把透明度降低，元素位置还是存在的

<!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>.box {color: rgba(0, 0, 0, 0);}.content {}</style>
</head><body><div class="box">我是box盒子</div><p>哈哈哈哈</p><div class="content">我是content</div><div>呵呵呵</div>
</body></html>

四、opacity设置为0

设置整个元素的透明度，会影响所有子元素，只是把透明度降低，元素位置还是存在的

<!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>.box {color: rgba(0, 0, 0, 0);}.content {opacity: 0.5;}</style>
</head><body><div class="box">我是box盒子</div><p>哈哈哈哈</p><div class="content">我是content<img src="./images/diqiu.jpg" alt=""></div><div>呵呵呵</div>
</body></html>

HTML元素的隐藏四种方法相关推荐

Java求两集合中元素交集的四种方法对比总结
hello,你好呀,我是灰小猿,一个超会写bug的程序猿! 最近在做项目的时候有用到对两个集合中的元素进行对比求其交集的情况,因为涉及到的数据量比较大,所以在进行求两个集合中元素交集的时候,就应该考虑 ...
CSS隐藏元素的十四种方法
通过设置width:0或者height:0隐藏一个元素,文字隐藏可以设置color为背景色或transparent,但内容还在,所以用font-size:0: 将元素的opacity设置为0,元素本身 ...
php 从数组里删除元素,PHP从数组中删除元素的四种方法实例
PHP从数组中删除元素的四种方法实例一.总结一句话总结:unset(),array_splice(),array_diff(),array_diff_key() 二.PHP从数组中删除元素的四种方 ...
css实现圆形的四种方法
CSS在网页上生成一个圆形的四种方法 border-radius SVG clip-path radial-gradient # border-radius 是最简单的应用,并且得到了广泛的支持.该b ...
(转).NET导出Excel的四种方法及评测
.NET导出Excel的四种方法及评测导出Excel是.NET的常见需求,开源社区.市场上,都提供了不少各式各样的Excel操作相关包.本文,我将使用NPOI.EPPlus.OpenXML.Aspo ...
详解Java解析XML的四种方法
http://developer.51cto.com 2009-03-31 13:12 cnlw1985 javaeye 我要评论(8) XML现在已经成为一种通用的数据交换格式,平台的无关性 ...
在js中加html_在HTML文档中嵌入JavaScript的四种方法
在HTML里嵌入JavaScript 在HTML文档里嵌入客户端JavaScript代码有4中方法: 1.内嵌,放置在标签之间 (少): 2.放置在有 3.放置自HTML事件处理程序中,该事件处理程 ...
python写错了怎么更改-Python中修改字符串的四种方法
在Python中,字符串是不可变类型,即无法直接修改字符串的某一位字符. 因此改变一个字符串的元素需要新建一个新的字符串. 常见的修改方法有以下4种. 方法1:将字符串转换成列表后修改值,然后用joi ...
python字符串中某个字符修改_Python中修改字符串的四种方法
在Python中,字符串是不可变类型,即无法直接修改字符串的某一位字符. 因此改变一个字符串的元素需要新建一个新的字符串. 常见的修改方法有以下4种. 方法1:将字符串转换成列表后修改值,然后用joi ...

HTML元素的隐藏四种方法

HTML元素的隐藏四种方法

一、方法一：display设置为none

二、方式二：visibility设置为hidden

三、rgba设置颜色，将a设置为0

四、opacity设置为0

HTML元素的隐藏四种方法相关推荐

最新文章

热门文章