css三种隐藏元素的比较

1.opacity:0

该元素隐藏起来了，但不会改变页面布局，如果它还绑定一些点击事件之类的，只要点中它也会触发事件。

2.visbility:hidden

该元素隐藏起来了，但不会改变页面布局，不会脱离文档流，如果它还绑定一些事件也不会触发。

3.display:none

把元素隐藏起来了，但是会改变页面布局，脱离了文档流，可以理解为把该元素删除了。

时间： 2024-10-10 18:38:28

css三种隐藏元素的比较的相关文章

三种隐藏元素方法的区别

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

css三种引用方式

1 直接在标签内添加 style属性 1 <body> 2  3 <div style="color: red;font-size: 20px">山无陵,天地合</div> 4 </body> 运行效果: 2 写在标签<head>中,内部样式 1 <html lang="en"> 2 <head> 3 <meta charset=&q

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

目录 CSS3--3种隐藏元素方法的区别 display: none visibility: hidden opacity: 0 CSS3--3种隐藏元素方法的区别 display: none DOM结构: 浏览器不会渲染display:none 的元素, 并且不占据页面空间事件监听: 无法对元素进行事件监听继承: 不会被子元素继承(子元素设置display: block 不会显示) 改动: 改动属性值会引起页面的重排和重绘过渡: 无法设置过渡效果 transition: display无

CSS设计指南之CSS三种机制:继承、层叠和特指

一.继承 CSS中的祖先元素也会向后代传递一样东西:CSS属性的值.body元素是所有元素的祖先,所有标签都是它的后代,比如为body元素设置一种字体,那么文档中的所有元素,无论它在层次结构中多么靠下,都将继承这些样式.CSS中有很多属性都可以继承,其中相当一部分都与文本有关. 二.层叠层叠,就是层叠样式表中的层叠,是一种样式在文档层次中逐层叠加的过程.目的是让浏览器面对某个标签特定属性的多个来源时,确定最终使用哪个值. 1.样式来源浏览器默认样式表:因为你还没有显示设置CSS属性,h1就会

python里三种等待元素的方法

在做web或app的自动化测试经过会出现找不到元素而报错的情况,很多时候是因为元素还没有被加载出来,查找的代码就已经被执行了,自然就找不到元素了.那么我可以用等待元素加载完成后再执行查找元素的code. Python里有三种等待的方式:一. 强制等待 Sleep(54) 这个方法在time模块,使用时通过from time import sleep导入比如: Sleep(10) #表示强行等待10s再执行下一句代码 Driver.find_element_by_xpath("xxxxxx&q

CSS三种样式

插入CSS的三种方法有三种方式插入样式表: 外部样式表内部样式表行内式样外部样式表使用外部样式表,值改变一个文件,您可以改变整个网站的外观! 每个页面必须包含一个外部样式表文件的引用,在<link> 元素里面. <link> 元素包含在 <head> 里面: <head> <link rel="stylesheet" type="text/css" href="mystyle.css"

CSS三种插入样式表格式

首先简单理解浏览器与网页的交互过程 CSS样式表(stylesheet) cascading style sheet 级联样式表表现HTML或XHTML文件样式的计算机语言:包含对字体.颜色.边距.高度.背景图片.网页定位等设定 css优势:内容于表现分离网页的表现统一,容易修改丰富的样式,使得页面布局更加灵活减少网页的代码量,增加网页的浏览速度,节省网络带宽运用独立于页面的css有利于网页被搜索引擎收录插入CSS样式表分为三种: 外部样式表(External style sheet

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

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

css中三种隐藏方式

1.overflow 溢出隐藏 overflow:hidden 2.display 隐藏不占据原来的文档,即会让出空间 display:black 显示 display:none 隐藏 3.visibility 隐藏占据原来的文档,不会让出原来所占的空间. visibility:hidden 隐藏 visibility:visible 显示