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

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. sql注入学习心得与sqlmap使用心得

    做题是最好的老师 首先先来分享一下我用来练手的题目,实验吧中的简单的sql注入1,2,3 不得不说,sql注入真是一个神奇的东西,至少我以前看起来一点头绪都没有的题目能入手了 首先是简单的sql注入3 ...

  2. 车载项目问题解（memset）

    1memset函数解 1.void *memset(void *s,int c,size_t n) 总的作用:将已开辟内存空间 s 的首 n 个字节的值设为值 c.2.例子 #includevoid ...

  3. 探索Java8：(二)Function接口的使用

    Java8 添加了一个新的特性Function,顾名思义这一定是一个函数式的操作.我们知道Java8的最大特性就是函数式接口.所有标注了@FunctionalInterface注解的接口都是函数式接口 ...

  4. SC命令---安装、开启、配置、关闭windows服务 bat批处理(转载)

    转载:http://www.jb51.net/article/49627.htm 转载:http://blog.csdn.net/c1520006273/article/details/5053905 ...

  5. LTE-A 载波聚合（Carrier Aggregation）介绍【转】

    本文转自:https://blog.csdn.net/txgc1009/article/details/46467255 载波聚合(Carrier Aggregation) 首先介绍几个基本概念 Pr ...

  6. JavaScript 装饰者模式（this运用）

    例: function ConcreteClass() { this.performTask = function () { this.preTask(); console.log('doing so ...

  7. Leetcode——Target Sum

    Question You are given a list of non-negative integers, a1, a2, ..., an, and a target, S. Now you ha ...

  8. Win7上安装WMware虚拟机和Ubuntu操作系统

    效果图: 问题拾遗: 一.如何划分一个新硬盘空间? 参考链接:如何新建磁盘空间 效果图: 我划分了20G的内存空间给Ubuntu的硬盘空间.一般来说15G就够用了. 二.VMware上拷贝Ubuntu ...

  9. HDU 6083 度度熊的午饭时光（01背包+记录路径）

    http://acm.hdu.edu.cn/showproblem.php?pid=6083 题意: 思路: 01背包+路径记录. 题目有点坑,我一开始逆序枚举菜品,然后一直WA,可能这样的话路径记录 ...

  10. Ajax 随笔

    例子:实现AJAX效果(投票例子) 后端代码 前端代码 原理是使用HTTP状态码204的特性(请求成功,但是不会返回内容,所以浏览器不会进行跳转) 例子:实现AJAX效果(投票例子2) 前端代码 原理 ...