CSS3--3种隐藏元素方法的区别

目录

  • CSS3--3种隐藏元素方法的区别

    • display: none
    • visibility: hidden
    • opacity: 0

CSS3--3种隐藏元素方法的区别

display: none

  1. DOM结构: 浏览器不会渲染display:none 的元素, 并且不占据页面空间
  2. 事件监听: 无法对元素进行事件监听
  3. 继承: 不会被子元素继承(子元素设置display: block 不会显示)
  4. 改动: 改动属性值会引起页面的重排和重绘
  5. 过渡: 无法设置过渡效果 transition: display无效

visibility: hidden

  1. 不会被渲染,但是会占据页面空间
  2. 无法对元素设置事件监听
  3. 可以继承,子元素设置非visibility:hidden可以显示
  4. 改动属性只会引起页面重排
  5. transition:visibility会立即显示, hidden有过渡效果

opacity: 0

  1. 元素被隐藏, 会占据页面空间
  2. 可以设置事件监听
  3. 可以继承, 子元素设置opacity可以显示
  4. 不会重绘也不会重排
  5. transition: opacity 可以实现显示隐藏的过渡效果
  6. opacity 会触发硬件加速

原文地址：https://www.cnblogs.com/luoshuifushen/p/12530651.html

时间： 2024-10-15 06:20:28

CSS3--3种隐藏元素方法的区别的相关文章

三种隐藏元素方法的区别

这三种方法分别是:display:none.visibility:hidden.opacity:0; display:none   元素在页面上将消失,不占据页面空间,会导致浏览器的回流与重绘,不能响应交互类事件: visibility:hidden   元素在页面占据的空间不变,所以它只会导致浏览器重绘而不会回流,也不能响应交互类事件: opacity:0    元素在页面占据的空间不变,不会导致浏览器回流或重绘(因为浏览器对于transform和opacity这两种变化处理的方法为合成渲染)

两种隐藏元素方式【display: none】和【visibility: hidden】的区别及由此引出的问题

此前看到一随笔(@任天缘 原文)讲了这个问题,并总结了: [display: none]:隐藏元素及元素内的所有内容,并且该元素的位置.宽高等其他属性值一并“消失”: [visibility: hidden]:隐藏元素及元素内的所有内容,但是该元素的位置.宽高等属性值仍然还在. 也有总结:(@Nicholas_F の 领域 原文) display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就是看不见也摸不到. visibility:hidden--- 使对

iOS开发几种隐藏键盘方法

摘要:iOS开发里键盘是经常需要打交道的地方,下面为大家带来几种隐藏键盘的方法. 一.隐藏自身软键盘 当对于有多个UITextField控件都想通过点击"Return"来隐藏自身软键盘的情况,这时的最好办法是使用Did End on Exit事件.在点击软键盘右下角的"Return"按钮后,会触发该事件. 该事件有一个sender参数表示当前文本框,这样便可以编写一个通用的事件处理方法(.m文件). 1 - (IBAction)TextField_DidEndOnE

GET和POST两种基本请求方法的区别

GET和POST是HTTP请求的两种基本方法,要说它们的区别,接触过WEB开发的人都能说出一二. 最直观的区别就是GET把参数包含在URL中,POST通过request body传递参数. 你可能自己写过无数个GET和POST请求,或者已经看过很多权威网站总结出的他们的区别,你非常清楚知道什么时候该用什么. 当你在面试中被问到这个问题,你的内心充满了自信和喜悦. 你轻轻松松的给出了一个"标准答案": GET在浏览器回退时是无害的,而POST会再次提交请求. GET产生的URL地址可以被

【转发】GET和POST两种基本请求方法的区别

原文来源:https://www.cnblogs.com/logsharing/p/8448446.html GET和POST是HTTP请求的两种基本方法,要说它们的区别,接触过WEB开发的人都能说出一二. 最直观的区别就是GET把参数包含在URL中,POST通过request body传递参数. 你可能自己写过无数个GET和POST请求,或者已经看过很多权威网站总结出的他们的区别,你非常清楚知道什么时候该用什么. 当你在面试中被问到这个问题,你的内心充满了自信和喜悦. 你轻轻松松的给出了一个“

css三种隐藏元素的比较

1.opacity:0 该元素隐藏起来了,但不会改变页面布局,如果它还绑定一些点击事件之类的,只要点中它也会触发事件. 2.visbility:hidden 该元素隐藏起来了,但不会改变页面布局,不会脱离文档流,如果它还绑定一些事件也不会触发. 3.display:none 把元素隐藏起来了,但是会改变页面布局,脱离了文档流,可以理解为把该元素删除了.

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

一说起CSS隐藏元素,我想大部分小伙伴们都会想到的第一种方法就是设置display为none.这是最为人所熟知也是最常用的方法.我相信还有不少人想到使用设置visibility为hidden来隐藏元素,这种方式也是常用的方法,而且也有很多人知道两者的不同.除了这两种方法,本文还总结了一些比较不常用的方法,比较了这几种“隐藏”元素方法的区别和优缺点,欢迎大家交流!! 几种方法的简单介绍 首先我们分别来说说到底有哪几种隐藏元素的方法,有一些方法是众所周知的,还有一些算是一种技巧. display:n

CSS隐藏元素的几种方法

使用CSS隐藏元素的方法很多,在这里简单总结一下: 1.display:none display:none 应该是最常用的一种隐藏元素的方法,使用该方法隐藏的元素脱离文档流不占据空间,不会被浏览器解析,不能点击,搜索引擎可能会认为被隐藏的文字属于垃圾信息而被忽略,而且屏幕阅读器(是为视觉上有障碍的人设计的读取屏幕内容的程序)会忽略被隐藏的文字. 2.visibility:hidden 使用 visibility:hidden 隐藏的元素,不能点击,但是会占据文档空间,不够灵活,一般配合 posi

CSS 隐藏元素的八种方法

前言 总括: 本文详细讲述了在网页中用CSS隐藏元素的七种方法. 原文博客地址:从隐藏元素谈起 知乎专栏&&简书专题:前端进击者(知乎)&&前端进击者(简书) 博主博客地址:Damonare的个人博客 念念不忘,必有回响;有一口气,点一盏灯. 正文 说起隐藏元素我想每一个前端er都能说起几种,但能说全的我想就不是很多了.博主总结了几种隐藏元素的方法,总结如下: 1 div{ 2 3 overflow:hidden 4 opacity:0: 5 visibility:hidd