CSS的display:none与visibility:hidden

最新推荐文章于 2024-08-09 10:34:44 发布
最新推荐文章于 2024-08-09 10:34:44 发布
阅读量270 收藏
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42394911/article/details/110120289
版权

CSS的display:none与visibility:hidden

display:none

display:none彻底不显示元素，元素不占空间,等于没有。

visibility:hidden

visibility:hidden只是把元素隐藏不显示，仍然占有原来的位置空间

我在修改页面时发现，使用display的话想要再次显示会出现问题。如果想让隐藏的内容再次显示，需要使用visibility:hidden。display:none表示这个部分不展示给别人，visibility则是暂时隐藏，触发某事件时可以打开。

黑马嘎
关注
css display:none使用注意事项小结
10-30
web页面前台编码时经常用到display:none样式，平常使用时发现有几点特征需要注意
CSS隐藏属性display:none；visibility:hidden；overflow:hidden
Jorpeng的博客
10-28 4306
前端CSS元素隐藏的知识（display:none；visibility:hidden；overflow:hidden；opacity: 0）
CSS：display显示与隐藏元素
最新发布
听海边涛声
08-09 361
CSS：display显示与隐藏元素
HTML与CSS之display：none
a404007652的博客
08-03 183
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>下拉框</title> 6 <style> 7 *{ 8 ...
CSS 隐藏属性 -- display:none、visibility:hidden、opacity:0三者的区别
19年的墨先生的博客
09-27 1540
一、空间占据 display:none 不会占据额外空间，会产生重排（回流）和重绘 visibility:hidden和opacity:0 会占据空间，只会产生重绘 visibility:hidden 不会影响列表的计数 <ol> <li>元素1</li> <li style=" visibility:hidden">元素2</li> <li>元素3</li> </ol> // 1.元素1 //
css display:none使用注意
aitaji9988的博客
07-23 492
css display:none使用注意 1、如果在样式文件或页面文件代码中直接用display:none对元素进行了隐藏，载入页面后，在没有通过js设置样式使元素显示的前提下，使用js代码会无法正确获得该元素的一些属性，比如offSetTop,offSetLeft...
display:none和visibility:hidden的差别比较与演示代码
01-19
前言： 在使用css隐藏栏位或物件的时候， 常常会使用到display:none和visibility:hidden这两个属性， 但却很容易分不清楚这两个的差别， 或是乾脆同时使用两种属性，来确保物件一定被隐藏， 其实我们可以很简单的来...
css元素隐藏原理及display:none和visibility:hidden
09-22
本文将详细探讨CSS元素隐藏的原理以及display:none和visibility:hidden这两个属性的不同应用及其影响。 首先，CSS元素隐藏的原理主要包括两个方面：空间占据和交互能力。元素被隐藏后，有些方式仍然保留了元素的...
display:none和visibility:hidden的区别
热门推荐
flower521528的博客
03-16 1万+
display：none 和visibility：hidden都可以实现让元素隐藏的效果，但原理是大不相同 1.display:none是让这个元素失去块元素的效果，其本身这个元素也是直接消失，会影响到布局问题。 2.visibility:hidden:可以让元素消失，属于css样式，它只是简单的让元素看不见，但本身的位置还在，如果对div进行hidden，那么div除了看不见，其他所有的样式都在。 ...
CSS基础-08-Display（隐藏元素 display:none，内联元素转块元素 display:inline，块元素 → 内联元素 display:block）
运维玄德公
04-12 392
1. 隐藏元素 （display:none） 1.1 Display 1.2 和 Visibility比较 2. 内联元素→ 块元素 （display:inline） 3. 块元素 → 内联元素 （display:block）
CSS的display:none与visible:hidden区别
Java&Develop的博客
06-16 351
display:none和visible:hidden都能把网页上某个元素隐藏起来。2区别display:none 不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。visible:hidden使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。...
CSS基础知识（二十）：display：none和visibility：hidden的区别
前端
11-12 1011
display：none和visibility：hidden的区别 （1）display: none隐藏后的元素不占据任何空间，无法使用屏幕阅读器等辅助设备访问，而visibility: hidden隐藏后的元素空间依旧保留 （2） visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。display: none非继承性，重新设置子元素也不会显示 （3）visibility
【CSS】CSS元素隐藏：display:none | visibility:hidden | opacity:0 的区别
ColdCoder的博客
04-07 1364
我们有几种方式可以隐藏一个元素： CSS position绝对定位，使元素位于可视范围外 type="hidden"的表单元素。 宽度和高度都显式设置为0。 CSS display的值是none。 CSS visibility的值是hidden CSS opacity的值是0 下面重点是说一下常用即面试常被问到的三种隐藏元素方式：display: none | visibility: hidden opacity: 0 基本功能： display: none: 元素自身及后代元素都会隐藏，隐藏后的元素无
html属性display,cssdisplaynone属性
weixin_42208901的博客
06-05 232
css中display怎么做显示或隐藏为什么display:none css代码无用CSS3 display none 到 display block 有过渡效果没 举个例呗那个是从：opacity: 1; 到 opacity: 0; 跟display没关系，display表示展现方式，透明度才能确定渐变程度。css中把一个div设置display: none属性，等到displa请问我应该怎么设...
CSS基础笔记八，display属性详解（变成弹性盒子flex，隐藏none，变成块级元素bolck，变成行内元素inline，变成行内块级元素inlen-bolck）
qq_55006020的博客
06-28 2534
前瞻：display属性可以设置弹性盒子 flex可以设置元素隐藏 none可以更改元素的属性变成块级 bolck变成行内 inline变成行内块级元素 inlen-bolck补充 让一个元素隐藏的几种方式1，更改属性使其隐藏 display：none 隐藏自己，不保留原来的位置2，bisbility：hidden 隐藏自己，保留原来位置3，opacity ：0 背景虚化 虚化到0的时候 自然就隐藏了，隐藏自己 保留原来的位置。
CSS系列之元素的显示与隐藏 - display：none，visibility：hidden和opacity：0三者区别
m0_60502378的博客
10-06 499
display：none，visibility：hidden和opacity：0
css display:none 和 visibility:hidden 的区别
且听风吟的博客
10-24 259
关于display:none 和 visibility:hidden 的区别，自己做了两个小例子： <!DOCTYPE html> <html> <head> <title>display:none和visibility:hidden的区别</title> </head> <style type="text/css"&...
CSS——display:none与visibility:hidden的区别
chengzhangdewo的博客
10-18 1034
隐藏元素的方法有很多，比如：让元素变透明：opcity:0,设置display:none，或设置visibility:hidden。 1、display:none 给元素设置了display：none后，那么该元素及其后代都会被隐藏，在页面中看不见点不到，但是它还存在于页面中，只是它不占据空间，对后面的元素布局没有任何影响。 2、visibility:hidden visibility:hidden与display：none有同样的作用，不同的是设置了它之后，元素会占据原本的空间，会影响后面元素的布局
揭示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、付费专栏及课程。

余额充值