css样式 元素隐藏的优劣和适用场景

最新推荐文章于 2023-09-07 19:39:10 发布
最新推荐文章于 2023-09-07 19:39:10 发布
阅读量1.4k 收藏
点赞数 1
分类专栏： CSS 文章标签： css css3 前端 less sass
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37929303/article/details/109148065
版权
opacity: 0、visibility: hidden、display: none 优劣和适用场景
  1. opacity:0;占空间，父级设置之后，子级不能出现，能触发绑定事件；
  2. visibility:hidden;占空间，父级设置之后，子级可以通过visitility:visible;设置显示，显示之后能触发绑定事件；
  3. display:none;不占空间，父级设置之后，子级不能出现，不能触发绑定事件；
前端面试-CSS
wanglu458512的博客
09-19 3034
一、CSS基础 CSS选择器及其优先级 对于选择器的优先级： 标签选择器、伪元素选择器：1 类选择器、伪类选择器、属性选择器：10 id 选择器：100 内联样式：1000 注意事项： !important声明的样式的优先级最高； 如果优先级相同，则最后出现的样式生效； 继承得到的样式的优先级最低； 通用选择器（*）、子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以它们的权值都为 0 ； 样式表的来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用
比较opacity:0、visibility:hidden、display:none，优劣和适用场景
Menqq的博客
03-16 1231
display: none DOM 结构：浏览器不会渲染 display 属性为 none 的元素，会让元素完全从渲染树中消失，渲染的时候不占据任何空间； 事件监听：无法进行 DOM 事件监听，不能点击； 性能：修改元素会造成文档回流（reflow 与 repaint）,读屏器不会读取display: none元素内容，性能消耗较大； 继承：是非继承属性，由于元素从渲染树消失，造成子孙节点消失，即使修改子孙节点属性子孙节点也无法显示，毕竟子类也不会被渲染； 场景：显示出原来这里不存在的结构； tran..
opacity: 0、visibility: hidden、display: none 优劣和适用场景
qazxbjp2010的博客
03-18 338
素display:none DOM 结构：元素完全从渲染树中消失，不占据空间； 子节点：不会被子节点继承，子节点设置display:block也无法显示； 性能：改变此属性时会引起重排和回流，性能较差；但由于修改被隐藏的子节点时不会进行重排，所以在大量修改子节点样式时，先隐藏修改完在显示会有较好的性能； Event事件：无法进行 DOM 事件监听、无法被选中； transition：tra...
分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景
weixin_30707875的博客
07-26 321
display: none (不占空间，不能点击)（场景，显示出原来这里不存在的结构） visibility: hidden（占据空间，不能点击）（场景：显示不会导致页面结构发生变动，不会撑开） opacity: 0（占据空间，可以点击）（场景：可以跟transition搭配、自定义图片上传按钮） 转载于:https://www.cnblogs.com/wangxi01/p...
CSS实战笔记(八) 元素隐藏
半虹小站
03-15 358
在 CSS 中，隐藏一个元素有很多种方法，下面我们来一一介绍
解决父元素opacity会影响子元素的问题
最新发布
owo_ovo的博客
09-07 1222
如何解决父元素的opacity影响子元素的问题
引用css样式的书写格式详解
09-24
本文详细解释了CSS样式引用的三种书写格式，包括行内样式、内嵌样式和外联样式，它们各自的特点、使用场景以及优劣。 首先，行内样式是直接在HTML标签中使用style属性定义样式的方式。例如，要在段落标签中设置字体...
JS如何设置元素样式的方法示例
10-19
在本文中，我们将详细探讨三种通过JavaScript设置HTML元素样式的常见方法，并分析它们的特点和适用场景。 1. **通过元素的`style`属性设置样式** 这是最基本和直接的方法，通过`element.style.property = value`的...
学习笔记18:CSS清除浮动
01-08
这种方法适用于那些需要兼顾现代浏览器和部分旧版浏览器的场景。 以上四种方法各有优劣，开发者可以根据项目需求和浏览器兼容性选择合适的方法。在实际应用中，很多知名网站如百度、网易、淘宝等倾向于使用`:after`...
css:div的不透明度opacity问题（父级的opacity会影响子级）
qq_34169240的博客
02-28 2990
不透明度会作用于整个元素以及它所有的子元素 子元素不透明度=父元素不透明度乘以子元素本身不透明度，而opacity的范围是0~1，所以就算把子级的div的opacity设为1也没有用，子元素是没办法获得大于父元素的不透明度值的。 解决方法： 如果是万不得已视觉排版效果上的需要，可以分别设置两个兄弟元素的不透明度,然后用position的方法将一个放在另一个的上方。...
CSS实现隐藏页面元素的方法和区别
weixin_53748496的博客
11-19 325
CSS实现隐藏页面元素的方法和区别1.display: none;诛连性。不占位。 给谁设置，则谁原本占据的位置不存在（相当于直接被删除），同时其子级也消失浏览器直接不会解析该元素的所有元素，包括其子级元素 2.overflow: hidden; 超出部分隐藏，仍占位,视觉上消失，但仍在文档流中占据空间，等价于设置透明度为0，浏览器仍然解析该元素overflow: scroll;滚轮显示出全部opacity: 0;隐藏该元素，设置透明程度为0，但不影响布局，仍占位
[css] 分析比较opacity: 0、visibility: hidden、display: none三者的优劣和适用场景
歌谣的博客
02-05 488
[css] 分析比较opacity: 0、visibility: hidden、display: none三者的优劣和适用场景 opacity 0: 单纯视觉效果，除了看不见，其他都正常。 visibility: hidden: 可继承也可覆盖。 display: none: 元素不会渲染，不影响布局，不会被css计数，也不支持transition。 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题 ...
CSS隐藏页面上元素的三种方法 opacity display visibility 优劣使用场景
十二的博客
11-16 599
display:none 结构 : 会让元素完全从渲染树中消失 渲染的时候不占据任何空间 不能点击 继承 : 是非继承属性 子孙节点消失由于元素从渲染树消失造成 改子孙节点属性无法显示 性能 : 修改元素会造成文档回流 读屏器不会读取display:none元素内容 性能消耗较大 场景 : 显示出原来这里不存在的结构 transition : 不支持display 举例 : 从这个世界消失来 不存在了 visibility:hidden 结构 : 不会让元素从渲染树消失 渲染元素继续占据空间 只是内.
关于opacity:0、visibility:hidden、display:none三个属性的比较以及拓展
问白的博客
03-04 8386
今天上午看某头条的时候有个刚入门的前端小伙伴提问道opacity:0、visibility:hidden、display:none。这三个属性的区别，这三个属性在我们日常开发中也算是用到频率也是蛮多的，所以干脆就就把这三个属性放在一起，配合实例做一个比较。首先这三个属性依次设置为0/hidden/none都可以使得用户看不见页面上的元素，不过他们之间还是有区别的，不然若是一样的话，也就没必要用三个...
display:none、visibility:hidden、opacity:0三者之间的区别
me_ting的博客
08-19 3155
三者共同点都是隐藏。不同点： 一、是否占据空间 display:none，隐藏之后不占位置；visibility:hidden、opacity:0，隐藏后任然占据位置。 二、子元素是否继承 display:none---不会被子元素继承，父元素都不存在了，子元素也不会显示出。 visibility:hidden---会被子元素继承，通过设置子元素visibility:visible来显示...
CSS隐藏元素的几种方法
大脑和心脏都要跳动的97
09-17 130
Opacity:元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互; Visibility:与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏; Display:display 设为 none 任何对该元素直接打用户交互操作都不可能生效。此外，读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在; Position:不会影响布局，能让元素保持可以操作; Clip-path:clip-path 属性还...
CSS元素隐藏原理和效果小结
weixin_33800463的博客
01-08 83
转载和改编自：http://www.zhangxinxu.com/wordpress/ 一、CSS元素隐藏 在CSS中，让元素隐藏（指屏幕范围内肉眼不可见）的方法很多，有的占据空间，有的不占据空间；有的可以响应点击，有的不能响应点击。一个一个看。 { display: none; /* 不占据空间，无法点击 */ } /*********************************...
CSS阴影对比：drop-shadow vs box-shadow
在CSS样式中，drop-shadow和box-shadow都用于为元素添加阴影效果，但它们有着本质的不同。box-shadow主要用于为矩形元素添加阴影，而drop-shadow则更强大，它能够根据元素的不透明区域创建与之形状完全匹配的阴影。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值