display none 隐藏后怎么显示_Web 隐藏技术:几中隐藏 Web 中的元素方法及优缺点
在 Web 开发中出于多种原因,我们需要隐藏元素。例如,一个按钮应该在移动中可见,而在桌面视口中隐藏。或者,在移动设备上隐藏但要在桌面上显示的导航元素。隐藏元素时有三种不同的状态:
- 元素完全隐藏并从文档流中删除。
- 元素只是隐藏在视觉上,而且仍然可以被辅助技术(AT)访问,比如屏幕阅读器。
- 元素是可见的,但仅对屏幕阅读器隐藏。
在这篇文章中,我们将学习在html和css中隐藏元素,并涵盖易访问性、动画和隐藏用例等方面,让我们开始吧。
HTML5 隐藏属性
它是一个布尔 HTML 属性,隐藏了附加到它的元素。当浏览器加载一个web页面时,它不会渲染带有hidden属性的元素,除非该元素被CSS手动覆盖,这与应用display: none的效果类似。
考虑下面的例子:
我们有一个title、一个figure和一个描述。只有当视口宽度大于400px时,才会显示该图。我向元素添加了hidden`属性。
在CSS中,我使用hidden属性仅在所需的视口大小中显示元素。
img[hidden] { display: none;}@media (min-width: 400px) { img[hidden] { display: block; }}
事例源码:https://codepen.io/shadeed/pen/373c8a132e5d72201b935689d6990d16?editors=1100
那么,你可能会问为什么不使用display: none呢?这是个好问题。当通过其hidden属性调用图像选择器时,我们可以确定即使CSS因为某种原因没有加载,元素也会被隐藏。
可访问性对hidden的影响
从可访问性的角度来看,hidden将元素完全隐藏在web页面之外,因此屏幕阅读器无法访问它。一定要避免使用它来隐藏仅用于表示目的的元素。
CSS display 属性
每个元素都有一个默认的display值,比如inline-block、block、table等等。要隐藏具有display属性的元素,我们应该使用display: none。当一个元素使用display: none隐藏时,它的所有后代都将被删除。
考虑下面的例子:
img { display: none;}@media (min-width: 400px) { img { display: block; }}
这将完全隐藏文档流和屏幕阅读器中的图像。也许你想知道文档流是什么?请参见下图:
注意,当蓝皮书被隐藏时,它已被完全从堆栈中删除。为它保留的空间已经消失了。同样的概念也适用于在HTML中隐藏元素时。元素的预留空间已经没有了,它更改了文档流,或者在我们的示例中,更改了图书流堆栈。
下面是一个动画,演示当移除书本时发生的情况:
如果资源隐藏在CSS中,它们会加载吗?
是的,会的。例如,如果被CSS隐藏,并且我们在某个断点处显示它,则它已经被加载。即使图片被CSS隐藏,该图片也会引起HTTP请求。
在下面的演示中,我只添加了一个图像,并使用CSS隐藏它。然后,我打开「DevTools」并检查networks选项卡,它显示图像已加载。
稍后我们将对此进行讨论,以解释如何在特定断点或视口大小中不需要HTTP请求时减少HTTP请求。
style 元素
值得一提的是,有些元素的默认值是display: none。可以将
「html」
display none 隐藏后怎么显示_Web 隐藏技术:几中隐藏 Web 中的元素方法及优缺点相关推荐
- display none 隐藏后怎么显示_web前端入门到实战:元素显示隐藏的9种思路
我自己是一名从事了多年开发的web前端老程序员,目前辞职在做自己的web前端私人定制课程,今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货,各种框架都有整理,送给每一位前端小伙伴 ...
- [WPF疑难] 模式窗口被隐藏后重新显示时变成了非模式窗口
原文:[WPF疑难] 模式窗口被隐藏后重新显示时变成了非模式窗口 [WPF疑难] 模式窗口被隐藏后重新显示时变成了非模式窗口 周银辉 现象: 大家可以试试下面这个很有趣但会带来Defect的现象:当我 ...
- display none 隐藏后怎么显示_display:none与visibility:hidden的区别?
" 因为平时总是觉得自己不停的修改bug,好记性不如烂笔头,所以把自己每天遇到问题记录下来." 要想知道两者的区别,就要知道他们代表的是什么意思, 其实两者都是对内容进行隐藏的的声 ...
- display none 隐藏后怎么显示_第12天:打破常规之 display
前面的课程讲解了盒子模型 第10天:撑起CSS布局的半壁江山---盒子模型,盒子的表现形式可以通过 display 这个属性控制,比如让 p 元素变成行内元素,让 span 元素变成块级元素.disp ...
- threejs 模型隐藏后不显示_教师资格证面试报名后显示“待审核”?不做这一步报名白费!...
19下教师资格证面试报名正在进行中,小可爱们都成功报名了吗? 这两天派派为大家回答问题的时候发现很多小可爱被卡在了"待审核"这一步,今天派派就跟大家聊聊"现场审核&quo ...
- origin坐标轴在隐藏后如何显示
选中图层(图层的框I被选中) 右键坐标轴 在"轴线和刻度线":标签中勾选"显示轴线和刻度线"即可
- html的隐藏标签的显示不出来,css如何让隐藏的元素显示出来
在css中,可以使用display属性让隐藏的元素显示出来,只需要给被隐藏的元素添加"display:block"样式即可.display属性规定元素应该生成的类型,当值为bloc ...
- html显示数据库表格asp,ASP实现在WEB中显示电子表格数据 显示数据及生成HTML表格...
在用asp语言开发的Web数据库应用程序中,ADO (ActiveX Data Objects) 已经成为非常流行的工具,而且对于真正的关系型数据库,比如Oracle.SQL Server,它都不会有 ...
- qt程序在Linux下字体乱了,解决linux/Ubuntu下Qt creater 界面程序在编译运行后无法显示中文或中文乱码问题!...
本文解决的主要是界面程序编译运行后无法显示中文的问题,如果在creater 中无法输入中文,下载个IBus或者搜狗之类的中文输入法即可解决! 首先说乱码问题,这个很好解决: 如果是在linux下打开W ...
最新文章
- 美国在人工智能领域亟待解决的5大难题
- 修改Kali Linux终端历史记录大小
- 【算法与数据结构】一道检测inversion count的初级算法
- 前端学习(3258):js高级教程(2)
- nutch2.1分布式抓取
- [CENTOS7] [IPTABLES] 卸载Firewall Id安装 IPTABLES及防火墙设置
- 设计模式—23种设计模式总览
- 华为平板鸿蒙发布,华为将发布鸿蒙平板,你期待吗?
- CMPP3.0协议(移动)
- 向你推荐一个五星级云原生DevOps论坛
- sklearn逻辑回归参数详解,及用逻辑回归制作评分卡
- Chrome插件:网易云音乐听歌识曲
- So easy ! 两句口号轻松搞懂Docker
- 进制之间的转换(计算机系统基础)
- 批处理——读写文件、字符串替换
- Java之利用Freemarker模板引擎实现代码生成器,提高效率
- FFmpeg提取视频音乐
- 字节跳动秋招提前批(计算机视觉工程师)
- 文件共享服务器onedrive,共享 OneDrive 文件和文件夹
- 利用新浪API实现股票交易实时监控
热门文章
- 送给前端开发者的一份新年礼物
- XIII Open Cup named after E.V. Pankratiev. GP of Ukraine
- 人生中一定要坚守的格言
- GY的实验室 - Phalcon+Nginx+PHP-FPM环境搭建
- jqGrid编辑—公共规则【附视频、ppt、源码】
- DeleteCommand属性---删除数据集指定的行保存到数据源中
- zzulioj 1065:统计数字字符个数
- php函数用竖线隔开,用指定的分隔符号把字符串转换成数组《 PHP 基础 》
- python pexpect模块详解_python pexpect模块
- 概率论 —— 数学期望