display:none、display:block、visibility:hidden、visibility:visible

最新推荐文章于 2022-11-24 06:00:00 发布
最新推荐文章于 2022-11-24 06:00:00 发布
阅读量321 收藏 2
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46224265/article/details/105164939
版权

display:none：元素本身和元素位置都隐藏
display:block：元素显示在页面上，它是块模式显示，和周围的元素不在一行,自己单独一行（会换行）
visibility:hidden：元素本身隐藏（变得透明）但元素位置不隐藏（位置仍然占用）
visibility:visible：正常显示

weixin_46224265
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
元素的显示和隐藏（display、visibility、overflow）
qq_43623147的博客
12-13 970
类似网页广告，当点击关闭就不见了，但重新刷新页面，就会重新出现。 本质：让元素在页面中显示或者隐藏。 一、display 显示 display属性用于设置一个元素如何显示。 display: none; 隐藏对象 display: block; 转换为块级元素；显示元素 display隐藏元素后，不再占有原来的位置。 二、visibility 可见性 visibility属性用于指定一个元素可见还是隐藏。 visibility: visible; 元素可视 visibility: hidd
display(block,inline,none),visibility(visible,hidden)之间的关系及区别（不同）
germmy-神一样的开发
03-02 174
 这段时间一直对display属性的block,inline,none和visibility属性的visible，hidden一直很模糊，总觉得很难理解，通过下面这个实例，就可以很好的牢记这几者之间的区别。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm...
CSS属性中Display与Visibility的不同
不积跬步 无以至千里 不积小流 无以成江海
10-29 129
visibility属性用来确定元素是显示还是隐藏，这用visibility="visible|hidden"来表示， visible表示显示， hidden表示隐藏。当visibility被设置为"hidden"的时候，元素虽然被隐藏了，但它仍然占据它原来所在的位置。 例：   <script language="JavaScript"> function toggleVi...
display:block/none与visibility:visible/hidden的区别
Logica的专栏
03-19 5607
display:none和visibility:hidden 都是将网页上的某个元素隐藏一起来，但是display:none会连原先元素的位置一并隐藏 visibility:hidden则只是让这个元素变的透明，它所占的位置还是在页面上。 block与hidden类似 都是将网页上的某个元素显示在页面上 用JS实现隐藏域的显示与隐藏 例： 隐藏文本 function tes
display和visibility的区别
我用键盘敲出一个世界
09-28 449
display通常可以设置为none、inline、block visibility通常可以设置为hidden、visible; display的显示和隐藏在前端用的很多，这样他可以减少页面的空间的使用了，不占用原来的页面的空间，比如说弹框等。并且diplay inline可以改变标签的属性，行级标签改变成块级标签或者行块都可以。 visibility使用后隐藏后的元素还占用原来的页面的空间。
css元素display和visibility,visible区别
u014227715的专栏
03-05 599
display:none;隐藏不占位、无法点击（隐藏会产生reflow（回流）和repaint(重绘)）显示不写或者block,inline;意思分别为显示，显示为div（块级元素），显示为span（行类元素）visibility:hidden;隐藏占位无法点击（所占用的空间任然存在）visible（服务器控件）隐藏不占位无法点击，要与 runat="server"一起用<div visib...
display和visibility
FairyKunKun的博客
04-01 83
display: none; 隐藏，释放文档流空间 display: block; 显示隐藏元素 visibility: hidden; 隐藏，不释放文档流空间 visibility: visible; 显示隐藏元素
display属性常用的四个值：block、inline、inline-block、none
No8g攻城狮的博客
01-07 2885
目录 1、block 块级元素 1.1、块级元素特点 1.2、常用的块状元素有 2、inline 内联（行级）元素 2.1、块级元素特点 2.2、常用的内联元素有 3、display:none 4、总结 1、block 块级元素 1.1、块级元素特点 a. block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父级宽度。 b. ...
display:none/block的应用以及和visibility的区别，隐藏/显示内容
u012309349的博客
10-24 4033
display:none/block; visibility:hidden/visible;
关于display:none和display:block的问题
热门推荐
不积跬步，无以至千里
08-21 2万+
如果使用了display:none，会使该标签消失；可以通过display:block重新恢复该标签。但是这里有一个问题，使用了display：none之后会使该标签原本的样式被清除，所以就算重新恢复标签也不会恢复原本的样式。 解决办法： 不要直接令某一个标签的display属性设置为none，应当用一个div标签将要消失的标签包起来，然后通过该div标签的display来实现内部标签的隐藏和
css visibility和display属性区别
little_newBee的博客
01-19 594
visibility有两个值分别是：visible和hidden，意思分别是显示和隐藏，不过，当表现为隐藏时，次元素仍然没有脱离流，正常占据它的位置 display有三个值分别是：inline，block，none。inline表现为行内元素，例如：div这个元素给它加inline则表现的跟span这个元素一样可以多个显示在一行；block为默认值，就是      正常的显示，而none就是表
question1（display: block；和display: none；冲突吗）
w296932099的博客
08-01 1132
aaa
div display: blok/none 总结
qdpurple
04-19 241
本文为转帖, 原帖请看: http://www.cnblogs.com/Bill_Lee/archive/2011/04/11/2013110.html   几点, display:block: 自动换行 display:none : 隐藏div内容,与 hidden相比, 不占用位置.    摘抄:   2、display的值有哪些 Css display值与解释 参数：...
CSS基础-08-Display（隐藏元素 display:none，内联元素转块元素 display:inline，块元素 → 内联元素 display:block）
运维玄德公
04-12 382
1. 隐藏元素 （display:none） 1.1 Display 1.2 和 Visibility比较 2. 内联元素→ 块元素 （display:inline） 3. 块元素 → 内联元素 （display:block）
CSS显示和隐藏元素「display」「visibility」
ChuanyangChen的博客
10-08 281
CSS显示和隐藏元素「display」「visibility」 display属性（⚠️ 用的更多）： display属性用于设置一个元素应如何显示 display:none; 隐藏对象 display:block; 除了转化成块级元素外，同时还有显示元素的意思 display隐藏元素后，不再占有原来的位置（人走 ???? 茶凉 ????????系列） 该属性可以搭配JS做很多网页特效 visibliity属性： visiblity属性用于指定一个元素是可见的还是隐藏的 visibility:visi
CSS中Display（显示）和Visibility（可见）
Z_CH8648的博客
11-24 1419
display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。 隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。
解决display:none到display:block无法实现过渡效果的问题(转换解决思路)
weixin_41033048的博客
12-23 7936
主要是解决问题的思路要转换一下 一开始我们的解决办法或许是通过transition来实现过渡的，但是对于不存在的元素我们是无法从无到有来过渡的。 所以我们可以通过先让内容显示出来，然后再给他们加入animation的动画来实现。具体办法就是让父容器作为display:none和display:block的显示过程。而里面的内容就相当于一开始就是存在的了，我们再让它从透明度为0到1的显示就可以了。 <div class="hover-on"> <div class=".
display:none和和visibility:hidden的差别比较与演示代码的差别比较与演示代
最新发布
09-09
display:none和visibility:hidden都是控制元素不显示的属性。它们之间的主要差别是显示方式的不同。 display:none会将元素从页面流中完全删除，即使元素占据了一定的空间，但它不会在页面上展示任何内容。相当于元素不存在。 visibility:hidden则是将元素隐藏起来，但仍然占据空间。换句话说，元素仍然存在于页面流中，只是不可见。 由于display:none从页面中删除元素，所以隐藏和显示这个元素都需要重新渲染整个页面，这会导致页面的重新布局和重新绘制，可能会产生额外的开销。而visibility:hidden只是将元素隐藏，所以在显示和隐藏时不需要重新渲染页面，性能上相对会更好一些。 下面是一个简单的演示代码来比较两者的差别： <html> <head> <style> #element1 { display: none; } #element2 { visibility: hidden; } </style> </head> <body> <h1>display:none与visibility:hidden的比较</h1> <div id="element1">我是display:none，隐藏的内容</div> <div id="element2">我是visibility:hidden，隐藏的内容</div> <button onclick="toggleDisplay()">切换显示和隐藏（display:none）</button> <button onclick="toggleVisibility()">切换显示和隐藏（visibility:hidden）</button> <script> function toggleDisplay() { var element = document.getElementById("element1"); element.style.display = element.style.display === "none" ? "block" : "none"; } function toggleVisibility() { var element = document.getElementById("element2"); element.style.visibility = element.style.visibility === "hidden" ? "visible" : "hidden"; } </script> </body> </html> 点击按钮会切换两个元素的显示和隐藏，观察页面的变化可以更好地理解display:none和visibility:hidden的差别。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值