CSS元素隐藏方法总结
display:none; visibility:hidden; opacity:0三者的区别
display:none;
- 该属性会让元素完全从DOM中消失,浏览器不渲染设置该属性的元素,不占据DOM树空间
- 无法进行事件监听,不可点击
- 动态修改该属性会造成重排,性能较差
- 继承性方面:非继承性!设置了该属性的元素的子元素即使设置display:block依然不会显示它的子元素
- transition不支持display的显示隐藏动画效果,但是display:none不会影响animation的动画效果!
visibility:hidden;
- 设置该属性的元素依然在DOM中,会被浏览器渲染,占据DOM树空间
- 但它无法被监听,因此不可点击
- 动态修改该属性会引成重绘,性能较display:none高
- 属于继承性属性!设置该元素的子元素如果修改visibility值是可以显示该子元素的!
- transition支持该属性
opacity:0;
- 占据空间,仅仅是设置透明度让该元素不可见
- 可以被监听,可以点击
- 动态修改不会造成重绘和重排,性能较高!
- 非继承性!设置该属性元素的子元素若设置opacity:1依然无法显示
- 可以配合transition显示淡入淡出效果
position:relative; z-index:-1;
- 元素占据空间
- 不可见
- 不可点击
position:absolute; z-index:-1;
- 元素不占据空间,因为absolute让该元素脱离文档流
- 不可见
- 不能点击
position:absolute; opacity:0;
- 元素不占据空间
- 不可见
- 可以点击
CSS元素隐藏方法总结的更多相关文章
- 您可能不知道的CSS元素隐藏“失效”以其妙用
您可能不知道的CSS元素隐藏“失效”以其妙用 by zhangxinxu from http://www.zhangxinxu.com地址:http://www.zhangxinxu.com/word ...
- 您可能不知道的CSS元素隐藏“失效”以其妙用——张鑫旭
一.CSS元素隐藏 在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.后宫选秀——一个一个看. { display: non ...
- CSS元素隐藏的display和visibility
一.CSS元素隐藏 在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击. { display: none; /* 不占据空间, ...
- CSS元素隐藏
{ display: none; /* 不占据空间,无法点击 */ } /*************************************************************** ...
- 你可能不知道的CSS元素隐藏“失效”以其妙用
在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.后宫选秀--一个一个看. { display: none; /* 不占据空 ...
- css元素隐藏(display:none和visibility:hidden)
在css中, display:none和visibility:hidden都能够使元素隐藏.但是两者所带来的效果完全不同. css display:none 当使用该样式的时候,HTML元素的宽高等 ...
- CSS元素隐藏的11种方法
{ display: none; /* 不占据空间,无法点击 */ } { visibility: hidden; /* 占据空间,无法点击 */ } { position: absolute; cl ...
- css 元素居中方法
目前知道有两种方法 方法一:主要适用于元素未设定高度的情况下. 直接上代码 html: <div class="nav-content"> <ul ng-clic ...
- CSS元素垂直居中方法总结
坚持,坚持,坚持... 以上为自我鼓励,哈哈... ------------------------------------------------- 相信没有真正是尝试过的人应该都和我一样,觉得居中 ...
随机推荐
- Qt Creator编译时提示找不到“ui_xxx.h”文件
解决方案: 在对应工程的*.pro文件里加上: QT+= widgets 则在编译过程中对应的“xxx.ui”文件会自动生成“ui_xxx.h”文件.
- luoguP2398 GCD SUM [gcd]
题目描述 for i=1 to n for j=1 to n sum+=gcd(i,j) 给出n求sum. gcd(x,y)表示x,y的最大公约数. 输入输出格式 输入格式: n 输出格式: sum ...
- 模拟求root——cf1067B
注意最后一轮要单独求一下 且最后只能有一个root #include <bits/stdc++.h> using namespace std; #define MOD 1000000007 ...
- 初步了解Redis
参考: https://juejin.im/post/5b4dd82ee51d451925629622?utm_source=gold_browser_extension https://www.cn ...
- shell启停服务脚本模板
一. 启动脚本模板:符合幂等性 如果该服务已经启动,再次调用该脚本,不会报错,也就是说可以反复多次调用,另外启动成功返回 一个参数,提供给自动发布平台校验该服务是否启动 #!/bin/bash ins ...
- maven项目依赖其他jar包的时候,idea运行没问题,java -jar 报错:java.lang.SecurityException: Invalid signature file digest
当项目依赖其他jar包的时候,打出的jar包执行出错,抛出这个异常. 原因:因为依赖jar包中的META-INF中有多余的.SF文件与当前jar包冲突, 解决方案 一 在打包前删除依赖jar包的.SF ...
- 51nod-1130-N的阶乘的长度V2(斯特林近似)-套斯特林公式
输入N求N的阶乘的10进制表示的长度.例如6! = 720,长度为3. 输入 第1行:一个数T,表示后面用作输入测试的数的数量.(1 <= T <= 1000) 第2 - T + 1行:每 ...
- Django rest framework (视图类详解)
官网:https://www.django-rest-framework.org/api-guide/viewsets/ 在django rest framework 视图中一共有N个类 第一类:AP ...
- 结合sessionStorage解决vuex页面刷新数据丢失的问题
将需要保存在vuex中的数据同时保存在sessionStorage中即可: import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); ...
- (转)nginx下基于ThinkPHP框架的网站url重写
nginx下基于ThinkPHP框架的网站url重写nginx下的基于thinkphp的应用的url重写,需了解thinkphp的各种url格式参数的处理逻辑以及nginx重写的原理.简单点说,无论哪 ...