CSS隐藏元素 display、visibility、opacity的区别
关于使指定元素无法在视野内看到,有3个方法
display: none;
opacity: 0;
visibility: hidden;
1.display: none; 该方法会改变页面布局。
- 元素彻底消失,脱离文档流。
- 子元素跟随父元素被隐藏,并且无法单独显示。
- 绑定的事件也无法触发。
- 无论如何,DOM节点还是存在的,仍旧可以用 js 操作。
2.opacity: 0; 该方法不会改变页面布局。
- 实际上是元素的透明度为0。
- 子元素 opacity:1 是无效的,元素仍旧无法显示。
- 绑定的事件仍旧可以触发。
3.visibility:hidden; 该方法不会改变页面的布局。
- 使元素不可见。
- 子元素设置 visibility:visible; 后,子元素会显示,但是父元素不会显示。
- 绑定的事件不能触发。
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的区别的更多相关文章
- CSS隐藏元素 display visibility opacity的区别
{ display: none; /* 不占据空间,无法点击 */ } { visibility: hidden; /* 占据空间,无法点击 */ } { position: absolute; ...
- css隐藏元素display:none,opacity:0;filter:alpha(opacity=0-100;,visibility:hidden的区别
在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.我们一般有三种方式:display:none, opacity:0;fil ...
- css隐藏元素的几种方法与区别
css隐藏元素的几种方法与区别 一:display:none;隐藏不占位 display 除了不能加入 CSS3 动画豪华大餐之外,基本效果卓越,没什么让人诟病的地方. 二:position:abso ...
- 【前端】CSS隐藏元素的方法和区别
CSS隐藏元素的方法和区别 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- CSS隐藏元素的几种妙法
一说起CSS隐藏元素,我想大部分小伙伴们都会想到的第一种方法就是设置display为none.这是最为人所熟知也是最常用的方法.我相信还有不少人想到使用设置visibility为hidden来隐藏元素 ...
- CSS“隐藏”元素的几种方法的对比
本文地址:http://luopq.com/2016/02/15/css-tricks-of-hide-element/,转载请注明 一说起CSS隐藏元素,我想大部分小伙伴们都会想到的第一种方法就是设 ...
- CSS隐藏元素的几种方法
使用CSS隐藏元素的方法很多,在这里简单总结一下: 1.display:none display:none 应该是最常用的一种隐藏元素的方法,使用该方法隐藏的元素脱离文档流不占据空间,不会被浏览器解析 ...
- css隐藏元素的六类13种方法
隐藏元素的方法 隐藏元素的方法可以总结为六类:直接隐藏.对溢出内容隐藏.对元素透明度进行调整.将元素移除当前屏幕.对元素的层级关系进行调整.对元素进行裁剪 只有对元素的透明度进行调整才可以点击,其余都 ...
- 有趣的css—隐藏元素的7种思路
css隐藏元素的7种思路 前言 display.visibility.opacity三个属性隐藏元素之间的异同点一直是前端面试面试的常考题. 属性 值 是否在页面上显示 注册点击事件是否有效 是否存在 ...
随机推荐
- springboot整合mybatis(注解)
springboot整合mybatis(注解) 1.pom.xml: <?xml version="1.0" encoding="UTF-8"?> ...
- JAVA代码解析String字符串(json格式的)
java解析String字符串(json格式) 需要jar包:json-lib-2.4-jdk15.jar 一. String str = "{\"name\":\&qu ...
- 初步认识JWT
前言: 现在越来越多的项目或多或少会用到JWT,为什么会出现使用JWT这样的场景的呢? 假设现在有一个APP,后台是分布式系统.APP的首页模块部署在上海机房的服务器上,子页面模块部署在深圳机房的服务 ...
- 树莓派4B 安装CentOS
刚入手了一个树莓派4B替换掉旧的3B搭Nas.吐槽下3B的网卡和USB速度真的太慢. 虽然官方推荐的是Debina,由于习惯了CentOS不想增加学习成本,我还是决定用CentOS. 镜像下载地址:h ...
- 洛谷 P1219八皇后
把全部,在这251秒,赌上! ——<游戏人生zero> 题目:https://www.luogu.org/problem/P1219 八皇后是一道非常非常非常经典的深搜+回溯的题目. 这道 ...
- UGUI_游戏菜单场景切换
事件委托 GameManger(空物体)+GameManger脚本——重要的方式 public class GameManger : MonoBehaviour { public void OnSta ...
- Winform中使用DevExpress时给控件添加子控件的方法
场景 在WInform中使用DevExpress时经常使用PanelControl控件用来进行布局设计,因此需要在代码中生成控件并添加子控件. 实现 一种是设置要添加的自控件的Parent属性为容器控 ...
- TestNG(十二) 参数化测试
<?xml version="1.0" encoding="utf-8" ?> <suite name = "parameter&q ...
- MOOC 数据库系统笔记(一):初步认识数据库系统
概述 什么是数据库 数据库是电子化信息的集合 数据库起源于规范化"表(Table)"的处理. Table:以按行按列形式组织及展现的数据. E.F.Codd,基于对"表( ...
- Java多线程基础知识例子
一.管理 1.创建线程 Thread public class Main { public static void main(String[] args) { MyThread myThread = ...