注意display：none的使用

最新推荐文章于 2024-05-30 15:07:12 发布
最新推荐文章于 2024-05-30 15:07:12 发布
阅读量87 收藏
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/formylovetm/article/details/134555787
版权

按照html解析顺序，img1.jpg的图像文件会被请求。

<div style="display:none">
	<img src="img1.jpg">
</div>

按照css解析顺序，发现父级使用了display：none，再去计算子级的样式就没有多大意义了，所以就不会去下载子级div的背景图像

<div style="display:none">
	<div style="background:url(img2.jpg)"></div>
</div>
亮学长
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
display none 隐藏后怎么显示_你用对了隐藏的方法了吗
weixin_39938331的博客
11-29 1万+
在 Web 开发中出于多种原因，我们需要隐藏元素。例如，一个按钮应该在移动中可见，而在桌面视口中隐藏。或者，在移动设备上隐藏但要在桌面上显示的导航元素。隐藏元素时有三种不同的状态：元素完全隐藏并从文档流中删除。元素只是隐藏在视觉上，而且仍然可以被辅助技术(AT)访问，比如屏幕阅读器。元素是可见的，但仅对屏幕阅读器隐藏。在这篇文章中，我们将学习在html和css中隐藏元素，并涵盖易访问性、...
css display:none使用注意事项小结
10-30
web页面前台编码时经常用到display:none样式，平常使用时发现有几点特征需要注意
给img加display: none；一样会消耗资源请求
前端精髓
08-21 1112
<img style="display: none;" src="https://img.pic88.com/preview/2020/08/05/15966339251452714.jpg!s640w" alt="logo"> 浏览器还是会发送图片资源请求，这样并没有达到懒加载图片的作用！！！
关于display：none；的图片加载
luo1914_的博客
05-22 1652
1、如果元素有{display: none;}的样式的话，标签上的图片会被请求加载，但是不会被渲染 例子： <style> .img-container { background-image: url(../imgs/icon1.png); } </style> <div class="img-container" style="display:none"></div> <img src="../imgs/icon2.png" style="displ
HTML有displaynone无法隐藏,display：none显示和隐藏
weixin_42613017的博客
06-04 4809
显示和隐藏问题#a{width: 500px;height: 300px;background-color: red;/*display:none;*/visibility:hidden;}#b{width: 100px;height: 200px;background-color: green;display:block;/*display:none;*/visibility: hidden;}...
question1（display: block；和display: none；冲突吗）
w296932099的博客
08-01 1104
aaa
前端面试题：display:none与visibility:hidden的区别有哪些
薇z的博客
06-25 2520
面试题：display:none与visibility:hidden的区别 ？
display:none； visibility:hidden； opacity:0 区别
weixin_36430673的博客
01-11 1061
display:none 1、DOM结构：浏览器不会渲染display为none的元素，不占据空间； 2、事件监听：无法进行DOM事件监听； 3、性能：动态改变DOM结构，会引起重排，性能较差； 4、继承：不会被子元素继承，因为子元素不会被渲染； 5、transition:不支持display。 visibility:hidden 1、DOM结构：元素被隐藏，还存在文档流中，占据一定的空间； 2、事件监听：无法进行DOM事件监听 3、性能：动态改变此属性会引起重绘，性能友好； 4、继承：
CSS隐藏属性display:none；visibility:hidden；overflow:hidden
Jorpeng的博客
10-28 4112
前端CSS元素隐藏的知识（display:none；visibility:hidden；overflow:hidden；opacity: 0）
【Echarts】当容器div为display:none，图表初始化显示问题
tl101120的博客
11-27 5414
场景：想对如下echarts折线图做切换近一年、近六个月、近三个月图表展示的功能时，遇到了如下问题 如上图，切换到近六个月时，出现了图表的宽度没有自适应的问题。而且我对比了一下展示正常的和不正常的区别 大家注意看我标记的地方，正常展示的图表宽度正常，但是显示不正常的图表宽度为100px，这就是显示不正常的问题所在。至于这个为什么会是100px，大家先往下看，后边会有解释。 遇到问题之后，先看...
display:none 与 visibility:hidden 的区别
weixin_39307273的博客
02-14 1144
除了是否占据空间外，还有其他区别要注意 1、空间占据 display:none 隐藏后不占据额外空间，相当于删除元素 visibility:hidden占据着空间 opacity:0占据着空间 2、子元素继承 display:none 元素被删除，子元素也会被删除，自然也就不会显示 visibility:hidden 子元素具有继承性，可以通过设置子元素v...
jQuery使用height()获取高度需要注意的地方
12-10
本文实例分析了jQuery使用height()获取高度需要注意的地方。分享给大家供大家参考。具体分析如下： jQuery脚本如下： 代码如下:var aNode = $(‘#demo’); var height = aNode.height(); //如果在获取height前，a...
easy-resize-watchers.js:注意调整大小事件
07-12
轻松调整观察者 这是我们经常使用的脚本集合，用于构建适应屏幕尺寸变化的 JavaScript 界面。 watchResize() 调整浏览器大小时触发... display: none; } @media only screen and (min-width: 20em) { #getActiveMQ-w
Javascript测验：多选JavaScript测验
02-19
我通过添加和删除“ hide”类，并在CSS中为“ hide”类赋予“ display：none”属性，来利用“ hide”类来隐藏和显示它们。 最大的挑战： 循环浏览问题以显示当前问题是第一个大挑战。 我尝试了很多次迭代
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
山花的博客
05-30 329
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
记录一次前端页面崩溃的产生及处理
最新发布
weixin_51123079的博客
05-30 409
记录一次前端页面崩溃的产生及处理
web前端三大主流框架
低调做人，低调编码，神码都是浮云
05-30 875
Web前端三大主流框架介绍：Angular、React、Vue
【JS实战案例汇总——不定时更新版】
微木
05-30 215
练习JS的实用案例
python前端通过API接口调用与后端进行数据交互前端如何调用api接口通过关键词获取电商平台热销商品数据
2301_78159247的博客
05-23 768
请求参数：q=女装&start_price=0&end_price=0&page=1&cat=0&discount_only=&sort=&page_size=&seller_info=&nick=&ppath=&imgid=&filter=参数说明：q:搜索关键字。
css:display:none的使用注意事项
05-09
CSS的display:none是一种隐藏元素的方式，它让元素不会在页面中显示，但它作为一个元素还是存在于DOM中，因此在使用时需要注意以下几点： 1. 影响页面效率：因为元素没有被显示，所以它们不会占用空间，这可能会...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值