display和visibility都是css样式，而show hide则是jquery的方法
display
| 值 | 描述 |
| none | 此元素不会被显示。 |
| block | 此元素将显示为块级元素，此元素前后会带有换行符。 |
| inline | 默认。此元素会被显示为内联元素，元素前后没有换行符。 |
<style> body{ border: 1px solid black; } #a1{ display: none; } </style> </head> <body> <div id="a1" style="background-color:red; height: 30px; width: 30px;"></div> <div id="a2" style="background-color:yellow;height: 30px; width: 30px;"> </div><div id="a3" style="background-color:blue;height: 30px; width: 30px;"></div> </div> </body>
编辑
给a1设置display隐藏之后，剩下了黄色和蓝色，并且黄色变成了第一个
visibility
| visible | 默认值。元素是可见的。 |
| hidden | 元素是不可见的。 |
| collapse | 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。 |
| inherit | 规定应该从父元素继承 visibility 属性的值。 |
<style> body{ border: 1px solid black; } #a1{ /* display: none; */ visibility: hidden; } </style> </head> <body> <div id="a1" style="background-color:red; height: 30px; width: 30px;"></div> <div id="a2" style="background-color:yellow;height: 30px; width: 30px;"> </div><div id="a3" style="background-color:blue;height: 30px; width: 30px;"></div> </div> </body>
编辑
同样只是生下了黄色和蓝色，但是保留了红色位置。
这是为什么呢？
display属性应用之后会引起页面的重塑和回流，而visibility只会引起重塑不会回流，
通俗讲就是 display隐藏之后自己的位置没有了，visibility隐藏之后虽然东西没了，但还站着原来的位置。
hide show
<style> body{ border: 1px solid black; } #a1{ /* display: none; */ /* visibility: hidden; */ } </style> <script src='http://libs.baidu.com/jquery/2.1.1/jquery.min.js'></script> <script> $(function(){ $('#a1').hide(); }) </script> </head> <body> <div id="a1" style="background-color:red; height: 30px; width: 30px;"></div> <div id="a2" style="background-color:yellow;height: 30px; width: 30px;"> </div><div id="a3" style="background-color:blue;height: 30px; width: 30px;"></div> </div> </body>
编辑
这次我们使用了hide方法，跟display一样剩下了黄色和蓝色的div并且黄色跑到了顶部，
其实hide方法就相当于display none隐藏，不会保留原位置。
那么如果都设置了谁的级别更高呢？
<style> body{ border: 1px solid black; } #a1{ visibility: visible; display: none; } </style> <script src='http://libs.baidu.com/jquery/2.1.1/jquery.min.js'></script> <script> // $(function(){ // $('#a1').hide(); // }) </script> </head> <body> <div id="a1" style="background-color:red; height: 30px; width: 30px;"></div> <div id="a2" style="background-color:yellow;height: 30px; width: 30px;"> <div id="a3" style="background-color:blue;height: 30px; width: 30px;"></div> </div> </div>
编辑
红色隐藏了，是不是说display的级别更大呢？
我们试试visibility的隐藏
<style> body{ border: 1px solid black; } #a1{ visibility: hidden; display: block; } </style> <script src='http://libs.baidu.com/jquery/2.1.1/jquery.min.js'></script> <script> // $(function(){ // $('#a1').hide(); // }) </script> </head> <body> <div id="a1" style="background-color:red; height: 30px; width: 30px;"></div> <div id="a2" style="background-color:yellow;height: 30px; width: 30px;"> </div> <div id="a3" style="background-color:blue;height: 30px; width: 30px;"></div> </div> </body>
编辑
这下是visibility的隐藏起作用了 那究竟是谁的级别更高呢
个人认为：谁隐藏谁级别就高，会优先执行隐藏属性，display隐藏就使用display回流，visibility隐藏就使用visibility不回流。
