CSS display:none和visibility:hidden区别

最新推荐文章于 2024-04-06 23:07:09 发布
最新推荐文章于 2024-04-06 23:07:09 发布
阅读量695 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/rdman/article/details/27702685
本文介绍了两种常见的CSS隐藏元素的方法：使用display:none使元素完全不占空间；使用visibility:hidden使元素保持原有空间但变得不可见。这两种方法在网页布局中各有用途。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

使用CSS display:none属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”;而使用visibility:hidden属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。
display:none和visibility:hidden两者的区别
weixin_43535265的博客
03-09 2252
一、相同点 display:none和visibility:hidden 都能把网页上的某元素隐藏起来 二、不同点 示例代码如下： <!DOCTYPE html> <html> <head> <style> .hidden1 { display:none; } .hidden11 { display: inherit; } .hidden12 { display: block; } .hi
关于display:none、visibility:hidden的简单认识
wsgjcxy13的博客
01-08 282
今天在一个需求中，用到了opacity:0，来“隐藏”内容，并且知道了会产生所谓的“株连性”，即父元素如果用了某个样式，其所有的子元素无论怎么修改，都只能按照父元素的样式走。例如这里的opacity以及题目中display。 但是我又需要父元素在隐藏的情况下，能看到某个子元素，这样才能进行我的业务操作的时候，显然opacity和display并不能满足我的需求，于是就通过强大的搜索引擎，发现di...
display:none | visibility:hidden 的区别
Fanbin168的专栏
07-06 1696
Index4 小苹果 圣女果
display: none；和visiblilty:hidden；的区别
fagdg的博客
03-16 1539
一、相同点： 两者都可以隐藏元素 二、不同点： 1、是否占据空间： display: none;隐藏时不占原先的页面空间，不影响页面布局 visiblilty:hidden;隐藏时占据原先的页面空间，影响页面布局 2、是否具有继承性： display: none;不具有继承属性，元素display:none及其子元素都将隐藏不可见 ...
display：none；与 visibility：hidden；的区别
香墨里的博客
10-31 1068
display:none 与 visibility:hidden 的区别
display:none与visibility:hidden不得不说的秘密
shengbeer的博客
03-02 4858
CSS布局中大家可能经常会用到display:none和visibility:hidden，可能很多同学都知道这两个属性是用来隐藏元素的；如果说这两个用来隐藏的属性有什么区别，大家可能会说：display:none 隐藏的元素不占据物理空间,visibility:hidden隐藏的元素占据物理空间。visibility可以被子元素继承，而display:none不能被子元素继承....等。这些是...
display:none和visibility:hidden的差别比较与演示代码
01-19
前言： 在使用css隐藏栏位或物件的时候， 常常会使用到display:none和visibility:hidden这两个属性， 但却很容易分不清楚这两个的差别， 或是乾脆同时使用两种属性，来确保物件一定被隐藏， 其实我们可以很简单的来...
css元素隐藏原理及display:none和visibility:hidden
09-22
在介绍了这么多隐藏元素的方法之后，我们要特别注意display:none和visibility:hidden两种属性的主要区别。这两者之间的差异主要表现在以下几个方面： 1. 空间占据：display:none;隐藏的元素不占据任何布局空间，而...
display:none和visibility:hidden的区别
热门推荐
flower521528的博客
03-16 1万+
display：none 和visibility：hidden都可以实现让元素隐藏的效果，但原理是大不相同 1.display:none是让这个元素失去块元素的效果，其本身这个元素也是直接消失，会影响到布局问题。 2.visibility:hidden:可以让元素消失，属于css样式，它只是简单的让元素看不见，但本身的位置还在，如果对div进行hidden，那么div除了看不见，其他所有的样式都在。 ...
opacity:0；Display:none 、visibility:hidden的区别
Ahua_Core的博客
08-14 1276
Display:none详解display:none的用处display:none的实例visibility:hidden也可以隐藏元素display：none的注意事项 display:none的用处 display:none 一般用于JavaScript动态隐藏元素，值得注意的是：被隐藏的元素不占据原本的位置空间 display:none的实例 设置三个行内块盒子，添加相关属性，代码如下： <div class="box1">I am Box 1</div> &l
display:none和visibility:hidden区别
最新发布
m0_47013706的博客
04-06 428
display:none和visibility：hidden区别
display: none和visibility: hidden的区别解释
qq_37734787的博客
11-02 1028
很多前端的同学认为visibility: hidden和display: none的区别仅仅在于display: none隐藏后的元素不占据任何空间，而visibility: hidden隐藏后的元素空间依旧保留 ，实际上没那么简单，visibility是一个非常有故事性的属性 1、visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质
display:none和visibility:hidden的区别和用法
lxy123456780的博客
01-06 685
#div1 { width: 200px; height: 200px; visibility:hidden; /* display: none; */ background-color: red; } display:none; 在网页中不占用位置，也不会产生box，然而其实是存在的。 visibility:hidden; 在网页中是存在的，只不过是一片空
display:none与visibility:hidden的区别是什么
sindlly的博客
09-22 929
display : 隐藏对应的元素但不挤占该元素原来的空间。visibility: 隐藏对应的元素并且挤占该元素原来的空间。   即是，使用CSS display:none属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”;而使用visibility:hidden属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。
display: none与visibility: hidden的区别
qq_43940172的博客
04-11 728
1. visibility具有继承性，给⽗元素设置visibility:hidden;⼦元素也会继承这个属 性。但是如果重新给⼦元素设置visibility: visible,则⼦元素⼜会显示出来。这个 和display: none有着质的区别 2. visibility: hidden不会影响计数器的计数，如图所示，visibility: hidden虽然让⼀ 个元素不⻅了，但是其计数器仍在运⾏。这和display: none完全不⼀样 3.display;none表示直接消失 代码演示 c
揭示CSS隐藏元素奥秘：display:none与visibility:hidden差异
本文将详细介绍几种常见的元素隐藏技巧：`display:none`、`visibility:hidden`，以及它们与`position`属性的结合使用，同时还会探讨`opacity`和`filter`用于透明度控制的情况。 1. **display:none**: `display:...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值