CSS隐藏元素的方式

首先最通用且最易想到的方法肯定是display、visibility和opacity这三种了

display:none

设置元素不可见并且连盒模型也不生成，一般用于不占空间的隐藏元素。

display属性规定元素应该生成的框的类型，当其值为“none”时可以规定元素不生成框，隐藏该元素，可以理解成在页面中把该元素删除掉一样。

visibility:hidden

visibility属性可以设置元素是否可见。 visible为可见，hidden为不可见，占据空间。而如果父元素为visibility:hidden，但若将其子元素设为visibility:visible，则子元素依旧可见。

opacity:0

opacity可以设置透明度，0～1. 但是，设置透明度为0，虽然元素也看不见了，但是它确实依旧存在页面中且占据位置的，有时候会影响用户交互。

overflow:hidden

这个也可以实现元素隐藏，不过有点局限性是只能超出盒子的部分隐藏

移出视口

利用定位直接将元素的top和left值设置的足够大的负数，就可以把它移出视口，也就是屏幕上看不见。

如： left:-9999px 或 transform:translateX(-9999px)

z-index

将元素的z-index设为负值，也可以实现隐藏效果。相当于至于了最最底层

覆盖

比如有一个正方形的盒子，但现在不需要了，可以在其上面放置一个和背景色相同的元素，这样视觉角度是隐藏了。可以用 ::after伪元素实现

display、visibility、opacity的区别

相同之处都是能够实现元素的隐藏效果

区别：

性能

visibility:hidden 比 display:none 在性能上会好一些，因为display:none在切换显示与隐藏时，页面会产生回流和重绘。而 visibility和opacity不会产生回流

是否占据空间

display 不会在文档流中占位，浏览器也不会解析该元素，相当于就没有这个元素了。

visibility依旧在文档流中占位，浏览器也会解析该元素，只是视觉上消失了。

动画效果

transition对 display和visibility是无效的，对opacity是有效的

事件绑定

display:none就认为它已经不存在了，所以自然是无法触发上面绑定的事件；

visibility虽然占据空间，但也无法触发

opacity是可以触发绑定事件的

子元素继承

display:none 不会被子元素继承,给子元素设置display：block;子元素不会显示；

visibility:hidden 会被子元素继承，可以通过设置子元素visibility:visible ；可以让子元素显示出来；

opacity: 0 也会被子元素继承，给子元素设置opacity: 1；子元素不会显示

CSS隐藏元素的几种方式以及display、visibility、opacity的区别相关推荐

实现在页面上隐藏某个元素的css,有趣的css—隐藏元素的7种思路
display.visibility.opacity三个属性隐藏元素之间的异同点一直是前端面试面试的常考题. 除了display.visibility.opacity三个属性可以隐藏元素之外,是否还存 ...
前端html隐藏元素方式,CSS 隐藏元素的八种方法
前言总括: 本文详细讲述了在网页中用CSS隐藏元素的七种方法. 念念不忘,必有回响;有一口气,点一盏灯. 正文说起隐藏元素我想每一个前端er都能说起几种,但能说全的我想就不是很多了.博主总结了几种 ...
CSS“隐藏”元素的几种方法的对比
一说起CSS隐藏元素,我想大部分小伙伴们都会想到的第一种方法就是设置display为none.这是最为人所熟知也是最常用的方法.我相信还有不少人想到使用设置visibility为hidden来隐藏元素 ...
css隐藏元素触发点击事件,css隐藏元素的几种方法中可以触发点击事件的是？...
css隐藏元素的几种方法中可以触发点击事件的是是opacity设置为0的方法. css隐藏元素的方式: 1.display:none;.box{ display: none; } 最简单也最粗暴的方 ...
html 隐藏元素点击事件,css隐藏元素的几种方法中可以触发点击事件的是？
css隐藏元素的几种方法中可以触发点击事件的是是opacity设置为0的方法. css隐藏元素的方式: 1.display:none;.box{ display: none; } 最简单也最粗暴的方 ...
css隐藏元素的几种方法与区别
css隐藏元素的几种方法与区别一:display:none;隐藏不占位 display 除了不能加入 CSS3 动画豪华大餐之外,基本效果卓越,没什么让人诟病的地方.二:position:absol ...
html显示与隐藏元素的几种方式
html显示与隐藏元素的几种方式显示与隐藏 display none : 无隐藏元素 block : 显示转换为块级元素 visibility visible :显示 hidden :隐藏区别 ...
CSS隐藏元素的五种方法
用css隐藏页面元素有许多种方法. 1.opacity:0 2.visibility:hidden 3.diaplay:none 4.position:absolute opacity opacity ...
HTML和CSS隐藏元素的四种方法
第一种:display:none 特点:不占据屏幕空间显示:display:block <!DOCTYPE html> <html lang="en">& ...

CSS隐藏元素的几种方式以及display、visibility、opacity的区别