三者都可以实现隐藏元素的效果

1:display:none 就是把元素隐藏，即在页面上看不到这个元素，并且不占据任何位置

2：hidden="hidden"在页面展示出来效果跟display:none是一样的，并且我们可以在浏览器控制台看到，浏览器就是把它解析为display:none

但是hidden="hidden" 是html，html 是有语义的，跟我们的input等等一样，他的语义就是跟浏览者不相关的，不需要的，这样的话，浏览器解析的时候就会把它隐藏掉，

因为元素不需要被浏览者看到，但是在别的地方，比如屏幕阅读器或者其它依赖语义的地方，可能就会用到它。我们常常用来提交隐藏的hidden到后端

而display:none 则是css样式相关的，从样式层面隐藏隐藏元素，并且可以程序切换它的隐藏和显示，所以，它并不是跟浏览者不相关的，而是暂时不需要显示而已

3：visibility:hidden 也是css层面的，它会隐藏元素，但是 保留元素所在页面的位置，例如

以上就是三者的异同，原答案请看知乎大神的回答

https://www.zhihu.com/question/35952297?sort=created

hidden="hidden"，display:none, visibility:hidden 三者的区别的更多相关文章

  1. display:none;visibility:hidden;opacity:0;之间的区别

    什么是回流 当render tree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建.这就称为回流(reflow).每个页面至少需要一次回流,就是在页面第一次加载的时候,这时候是 ...

  2. 基础总结（04）-- display:none;&&visibility:hidden;区别

    display:none 1.使元素隐藏,不再占据空间. 2.动态操作时会引起页面回流和重绘,影响性能. 3.子元素也会被隐藏并且添加display:block/visibility:visible无 ...

  3. 元素隐藏的方式之--hidden，display，visibility

    <html lang="en"> <head> <meta charset="UTF-8"> <title>标签 ...

  4. JQuery可见性过滤选择器:hidden无法获取通过visibility:hidden样式隐藏的元素-遁地龙卷风

    1.版本问题 如果你可以获取下列元素 <input type="hidden"/> <div style="display:none"> ...

  5. CSS display和visibility的用法和区别

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt408 大多数人很容易将CSS属性display和visibility混淆,它 ...

  6. CSS隐藏元素 display、visibility、opacity的区别

    关于使指定元素无法在视野内看到,有3个方法 display: none; opacity: 0; visibility: hidden; 1.display: none; 该方法会改变页面布局. 元素 ...

  7. style="visibility: hidden" 和 style=“display:none”区别

    大多数人很容易将CSS属性display和visibility混淆,它们看似没有什么不同,其实它们的差别却是很大的. visibility属性用来确定元素是显示还是隐藏的,这用visibility=& ...

  8. css中display:none与visibility: hidden的区别

    display: none; 隐藏元素,不占用其本来空间------对应元素显示用的是display:block; visibility: hidden:元素隐藏,占用其本来的页面空间-------- ...

  9. style="visibility: hidden"和 style=“display:none”之间的区别

    style=“display:none” 隐藏页面元素: <html> <head> <script type="text/javascript"&g ...

随机推荐

  1. 20144303石宇森 《网络对抗》 WEB基础实践

    20144303石宇森 <网络对抗> WEB基础实践 实验后回答问题 一.什么是表单 表单是一个包含表单元素的区域.用form来定义. HTML是静态显示网页的,无法跟服务器进行交互,所以 ...

  2. C++11标准 STL正则表达式 验证电子邮件地址

    转自:http://www.cnblogs.com/yejianfei/archive/2012/10/07/2713715.html 我们最经常遇到的验证,就是电子邮件地址验证.网站上常见.各种网页 ...

  3. Effective TensorFlow Chapter 4: TensorFlow中的广播Broadcast机制【转】

    本文转载自:https://blog.csdn.net/LoseInVain/article/details/78763303 TensorFlow支持广播机制(Broadcast),可以广播元素间操 ...

  4. Linux内存管理--虚拟地址、逻辑地址、线性地址和物理地址的区别(二)【转】

    本文转载自:http://blog.csdn.net/yusiguyuan/article/details/9668363 这篇文章中介绍了四个名词的概念,下面针对四个地址的转换进行分析 CPU将一个 ...

  5. IE6里样式表不起作用解决方法

    写的html页面引用外部css文件的时候在IE7,IE8和FF中能正常作用,即能正常显示,可在IE6中却完全没有作用到,即css文件里的样式根本未被解析到我们的html页面,这是什么原因? 开 始把c ...

  6. 动态规划模板2|LCS最长公共子序列

    LCS最长公共子序列 模板代码: #include <iostream> #include <string.h> #include <string> using n ...

  7. FJUT 奇怪的数列（线性选择算法）题解

    题意:找出无需数列中位数(偶数为两个中位数平均数向下取整) 思路:用nth_element(a + first,a + k,a+ end + 1)找出中位数,复杂度一般为O(n).这个STL能将 [ ...

  8. SPOJ Hacking（字典树 + 搜索）题解

    思路1:字典树存每个串,然后dfs遍历是否存在.这里有个技巧,如果每次都重新初始化字典树为-1,那么会超时,所以我先初始化为-1,然后设一个Case,每个test时Case都++,那么只要开一个数组判 ...

  9. 第九章 对称加密算法--IDEA

    注意:本节内容主要参考自<Java加密与解密的艺术(第2版)>第7章“初等加密算法--对称加密算法” 9.1.IDEA 特点: 先于AES出来取代DES 安全性极高 常用于电子邮件加密算法 ...

  10. @SuppressWarings注解的作用和用法

    一.前言 编码时我们总会发现如下变量未被使用的警告提示: 上述代码编译通过且可以运行,但每行前面的“感叹号”就严重阻碍了我们判断该行是否设置的断点了.这时我们可以在方法前添加 @SuppressWar ...