[前端三剑客之CSS]display:none opacity:0 visibility:hidden三角恋的爱恨情仇

三种方法均可隐藏元素。不同在于以下几点:

一、空间占据

display:none 的元素不会占据，但是设置display:none 会引发回流和重绘
opacity:0和visibility:hidden 的元素会占据位置，但是改变这属性时只会触发重绘

二、子元素继承

display:none 不会被子元素继承，但是父元素都不在了，子元素自然也就不会显示了。
visibility:hidden 会被子元素继承，可以通过设置子元素visibility:visible 使子元素显示出
opacity: 0 也会被子元素继承，但是不能通过设置子元素opacity: 0使其重新显示

三、事件绑定
display:none 的元素都已经不再页面存在了，因此肯定也无法触发它上面绑定的事件；
visibility:hidden 元素上绑定的事件也无法触发；
opacity: 0 元素上面绑定的事件是可以触发的。

四、过渡动画
transition对于display肯定是无效的，大家应该都知道；
transition对于visibility也是无效的；
transition对于opacity是有效.

[前端三剑客之CSS]display:none opacity:0 visibility:hidden三角恋的爱恨情仇相关推荐

[css] 分析比较opacity: 0、visibility: hidden、display: none三者的优劣和适用场景
[css] 分析比较opacity: 0.visibility: hidden.display: none三者的优劣和适用场景 opacity 0: 单纯视觉效果,除了看不见,其他都正常. visib ...
Html与CSS的爱恨情仇第一式---第一系列
本文整理与慕课网,仅用于个人学习提高简单来说就是 1.HTML是整个网页的界面 2. CSS是网页的颜料 3. JavaScript是动态的效果的实现常见元素解析 1.<h1>< ...
前端后端的爱恨情仇--续集
文章目录前端妹子给我打电话了 Eolink 直呼真香 1. DTDD:文档与测试驱动开发 2. API研发测试天花板 3. 超强的Mock API 4. 隐秘又好用的小亮点 5 . 针对开发者比较友 ...
前端三剑客之 CSS - JavaEE初阶 - 细节狂魔
文章目录前言 CSS CSS 的引入方式 CSS 的代码风格样式格式样式大小写选择器选择器的分类 1.基础选择器标签选择器类选择器 id 选择器通配符选择器提示复合选择器后代选择 ...
Web前端三剑客之CSS基础
文章目录常识简介 css概述 CSS作用 CSS代码主要组成部分在页面中使用CSS 内联样式表内部样式表注意外部样式表 CSS选择器元素选择器注意类(class)选择器 ID选择器后 ...
display、opacity、visibility的区别？
共同点都让元素不可见二者区别隐藏后是否占据原有空间 display:none ,不占据空间,页面重新渲染 visibility:hidden 占据空间,不能触发点击事件 opacity:0 ,占 ...
前端“三剑客”——HTML,CSS,JS
文章目录一,前端是什么? 二,HTML 三,CSS (一)CSS简介 (二)CSS定义规则: (三)两种使用方式 1,内嵌式 2,链入式 3,CSS选择器和常用属性 (1),标记选择器 (2),类选 ...
前端三剑客 Html Css JavaScript
html和css HTML(Hyper Text Markup Language) HTML 不是一门编程语言,而是一种用来告知浏览器如何组织页面的标记语言.HTML 可复杂.可简单,一切取决于开发 ...
后端程序员的前端基础-前端三剑客之CSS
文章目录 1 CSS简介 1.1 CSS概念 1.2 CSS功能 1.3 CSS书写规范 1.4 基础语法 1.5 CSS选择器 2 CSS导入方式 2.1 内嵌方式(内联方式) 2.2 内部方式 2 ...

[前端三剑客之CSS]display:none opacity:0 visibility:hidden三角恋的爱恨情仇

[前端三剑客之CSS]display:none opacity:0 visibility:hidden三角恋的爱恨情仇相关推荐

最新文章

热门文章