div css怎么实现显示隐藏(2)-木庄网络博客

visibility:hidden：可以隐藏某一元素，但隐藏的元素仍需占用与未隐藏之前一样的空间，也就是说，该元素虽然被隐藏了，但仍然会影响布局。

1	`h1.hidden {visibility:hidden;}`

display:none：可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

1	`h1.hidden {display:none;}`

所以display和visibility控制的分别是html元素是否存在和是否显示，dispay的属性定义该元素存在或不存在，而visibility属性只是控制该元素是否显示出来，实际上还是存在的。

【推荐学习：css视频教程】

使用JQuery的 show() 和 hide() 方法将一个div显示或隐藏：

注：show() 适用于通过 jQuery 方法和 CSS中 display:none 隐藏的元素（你适用于通过 visibility:hidden 隐藏的元素）。

语法：$ (selector).show(speed,easing,callback) 具体参数详情点这里

$("button").click(function(){
    $("p").show();
});

提示：这与CSS属性display:none 类似。

注释：隐藏的元素不会被完全显示（不影响页面的布局）。

语法：$ (selector).hide(speed,easing,callback) 具体参数详情点这里

$("button").click(function(){
    $("p").hide();
});

以上就是div css怎么实现显示隐藏的详细内容，更多文章请关注木庄网络博客！

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者