js显示隐藏 display visibility以及jquery里的show hide的区别
原创
©著作权归作者所有：来自51CTO博客作者坚毅的小解同志的原创作品，请联系作者获取转载授权，否则将追究法律责任
js显示隐藏 display visibility以及jquery里的show hide的区别
文章包含个人理解，错误请您指出。
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不回流。
