关于使指定元素无法在视野内看到,有3个方法

display: none;

opacity: 0;

visibility: hidden;

1.display: none; 该方法会改变页面布局。

  1. 元素彻底消失,脱离文档流。
  2. 子元素跟随父元素被隐藏,并且无法单独显示。
  3. 绑定的事件也无法触发。
  4. 无论如何,DOM节点还是存在的,仍旧可以用 js 操作。

2.opacity: 0; 该方法不会改变页面布局。

  1. 实际上是元素的透明度为0。
  2. 子元素 opacity:1 是无效的,元素仍旧无法显示。
  3. 绑定的事件仍旧可以触发。

3.visibility:hidden; 该方法不会改变页面的布局。

  1. 使元素不可见。
  2. 子元素设置 visibility:visible; 后,子元素会显示,但是父元素不会显示。
  3. 绑定的事件不能触发。

4.height:0和overflow:hidden的组合

overflow:hidden用中文理解就是“溢出隐藏”,也就是盒子以外的内容都咔嚓掉不可见的。加上height:0,只要是一般的非inline水平元素,则元素内部所有子孙都应该是不可见的。

height:0和overflow:hidden组合隐藏“失效”的条件如下:祖先元素没有position:relative/absolute/fixed声明,同时内部子元素应用了position:absolute/fixed声明

5.overflow和text-overflo区别

text-overflow:clip/ellipsis;   属性规定当文本溢出包含元素时发生的事情。

overflow:hidden;    隐藏所有在超过盒子设定宽度范畴外的内容。

CSS隐藏元素 display、visibility、opacity的区别的更多相关文章

  1. CSS隐藏元素 display visibility opacity的区别

    { display: none; /* 不占据空间,无法点击 */ }  { visibility: hidden; /* 占据空间,无法点击 */ }  { position: absolute; ...

  2. css隐藏元素display:none,opacity:0;filter:alpha(opacity=0-100;,visibility:hidden的区别

    在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.我们一般有三种方式:display:none, opacity:0;fil ...

  3. css隐藏元素的几种方法与区别

    css隐藏元素的几种方法与区别 一:display:none;隐藏不占位 display 除了不能加入 CSS3 动画豪华大餐之外,基本效果卓越,没什么让人诟病的地方. 二:position:abso ...

  4. 【前端】CSS隐藏元素的方法和区别

    CSS隐藏元素的方法和区别 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  5. CSS隐藏元素的几种妙法

    一说起CSS隐藏元素,我想大部分小伙伴们都会想到的第一种方法就是设置display为none.这是最为人所熟知也是最常用的方法.我相信还有不少人想到使用设置visibility为hidden来隐藏元素 ...

  6. CSS“隐藏”元素的几种方法的对比

    本文地址:http://luopq.com/2016/02/15/css-tricks-of-hide-element/,转载请注明 一说起CSS隐藏元素,我想大部分小伙伴们都会想到的第一种方法就是设 ...

  7. CSS隐藏元素的几种方法

    使用CSS隐藏元素的方法很多,在这里简单总结一下: 1.display:none display:none 应该是最常用的一种隐藏元素的方法,使用该方法隐藏的元素脱离文档流不占据空间,不会被浏览器解析 ...

  8. css隐藏元素的六类13种方法

    隐藏元素的方法 隐藏元素的方法可以总结为六类:直接隐藏.对溢出内容隐藏.对元素透明度进行调整.将元素移除当前屏幕.对元素的层级关系进行调整.对元素进行裁剪 只有对元素的透明度进行调整才可以点击,其余都 ...

  9. 有趣的css—隐藏元素的7种思路

    css隐藏元素的7种思路 前言 display.visibility.opacity三个属性隐藏元素之间的异同点一直是前端面试面试的常考题. 属性 值 是否在页面上显示 注册点击事件是否有效 是否存在 ...

随机推荐

  1. springboot整合mybatis(注解)

    springboot整合mybatis(注解) 1.pom.xml: <?xml version="1.0" encoding="UTF-8"?> ...

  2. JAVA代码解析String字符串(json格式的)

    java解析String字符串(json格式) 需要jar包:json-lib-2.4-jdk15.jar 一. String str = "{\"name\":\&qu ...

  3. 初步认识JWT

    前言: 现在越来越多的项目或多或少会用到JWT,为什么会出现使用JWT这样的场景的呢? 假设现在有一个APP,后台是分布式系统.APP的首页模块部署在上海机房的服务器上,子页面模块部署在深圳机房的服务 ...

  4. 树莓派4B 安装CentOS

    刚入手了一个树莓派4B替换掉旧的3B搭Nas.吐槽下3B的网卡和USB速度真的太慢. 虽然官方推荐的是Debina,由于习惯了CentOS不想增加学习成本,我还是决定用CentOS. 镜像下载地址:h ...

  5. 洛谷 P1219八皇后

    把全部,在这251秒,赌上! ——<游戏人生zero> 题目:https://www.luogu.org/problem/P1219 八皇后是一道非常非常非常经典的深搜+回溯的题目. 这道 ...

  6. UGUI_游戏菜单场景切换

    事件委托 GameManger(空物体)+GameManger脚本——重要的方式 public class GameManger : MonoBehaviour { public void OnSta ...

  7. Winform中使用DevExpress时给控件添加子控件的方法

    场景 在WInform中使用DevExpress时经常使用PanelControl控件用来进行布局设计,因此需要在代码中生成控件并添加子控件. 实现 一种是设置要添加的自控件的Parent属性为容器控 ...

  8. TestNG(十二) 参数化测试

    <?xml version="1.0" encoding="utf-8" ?> <suite name = "parameter&q ...

  9. MOOC 数据库系统笔记(一):初步认识数据库系统

    概述 什么是数据库 数据库是电子化信息的集合 数据库起源于规范化"表(Table)"的处理. Table:以按行按列形式组织及展现的数据. E.F.Codd,基于对"表( ...

  10. Java多线程基础知识例子

    一.管理 1.创建线程 Thread public class Main { public static void main(String[] args) { MyThread myThread = ...