display:none和visibility:hidden的区别

最新推荐文章于 2022-05-31 22:24:57 发布
最新推荐文章于 2022-05-31 22:24:57 发布
阅读量358 收藏
点赞数
分类专栏： 面试题 文章标签： displaynone和visibili
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39430589/article/details/77937182
版权



display:none:隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢， 就当他从来不存在。(通俗来说，就是display的隐藏，不仅仅是隐藏就连他原本的位置也会消失)

visibility:hidden:隐藏对应的元素，但是在文档布局中仍保留原来的空间。

（然而这个隐藏只是隐藏了元素，并没有去掉他原本的位置）

小崔崔的博客
关注
专栏目录
html5中display属性,display的属性
weixin_39647180的博客
06-05 2576
在一般的css布局制作时候，我们常常会用到display对应值有block、none、inline这三个值。,display这个属性用于定义建立布局时元素生成的显示框类型。对于 html 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 html 中已经定义的显示层次结构。对于 xml，由于 xml 没有内置的这种层次结构，所有 display 是绝对必要的,要了解display...
display:none和visibility:hidden的区别？
斑码教育的博客
10-11 115
display:none和visibility:hidden的区别？ 相同点：元素都会隐藏不见 不同点： display的none隐藏，在文档流中的位置空间被其他元素占据 visibility的hidden隐藏，在文档流中的位置空间继续保留，不会被其他元素占据 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport.
css中visibily:hidden和display:none的区别
the_lower的博客
08-28 408
1、display:none视为不存在且不加载，不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失； visibility:hidden隐藏，但在浏览时保留位置，即对象在网页上不可见，但该对象在网页上所占的空间没有改变； 2、使用 display:none属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”; 而使用visibility:hidden属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。即它 仍具有高度、宽度等属性值。 ...
displaynone与visiblehidden的区别
wangshu696的专栏
01-27 775
displaynone与visiblehidden的区别 displaynone和visiblehidden都能把网页上某个元素隐藏起来，但两者有区别 displaynone ---不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。 visiblehidden--- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说
display的block、none、inline属性及解释
某年某月某条街
08-21 2797
display:block的作用： 让被隐藏的块级元素显示出来，一般是相对于diplay:none;使用的 比较常用于a、span这两个标签——因为这两个标签非块元素，如果不用display:block;定义一下，那么定义width、height等和长宽相关的css属性时会发现完全不生效。 display:block不换行的办法： 设置display属性为inline-block，则不会换行
display:none和visibility:hidden两者的区别
weixin_43535265的博客
03-09 2163
一、相同点 display:none和visibility:hidden 都能把网页上的某元素隐藏起来 二、不同点 示例代码如下： <!DOCTYPE html> <html> <head> <style> .hidden1 { display:none; } .hidden11 { display: inherit; } .hidden12 { display: block; } .hi
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
热门推荐
进击的Coder菜鸟
08-21 11万+
1、display:none和visible:hidden都能把网页上某个元素隐藏起来。 2、但两者有区别: ●display:none ---不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。 ●visible:hidden--- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。 1、visibility: hid...
display:none与display:block隐藏与显示内容？
weixin_44657272的博客
01-01 4141
如果把这里的:target中的display:block改为display:inline，可以达到同样的效果，即最初隐藏dl中的内容，点击了指向dl的链接后才显示对应的dl的内容。那用display:block的原因是什么？ ...
visibility:hidden和display:none的区别
m0_71231013的博客
05-31 2292
1、作用不同:visibility:hidden将元素隐藏，但是在网页依然占用位置。display:none将元素的显示设为无，即在网页中不占任何的位置。2、使用后HTML元素有所不同:visibility:hidden，使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。display:none，使用该属性后，HTML元素（对象）的宽度、高度等各种属性值都将被‘抵消’即不存在。3、定义不同:visibility属性指定一个元
display:none与visible:hidden的区别
weixin_30848775的博客
03-27 267
display:none和visible:hidden都能把网页上某个元素隐藏起来，但两者有区别: display:none ---不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。 visible:hidden--- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。 例子： <html> <he...
display和visibility的区别
liangboqingtan的博客
07-06 829
visibility和display属性的差别可以从它们对使用静态或相当定位的元素的影响中看到。对于一个常规布局流中的元素，设置visibility属性为hidden使得元素不可见，但是在文档 布局流中的元素，设置visibility属性为hidden使得元素不可见，但是在文档布局中扔保留了它的空间。类似的元素可以重复隐藏和显示而不改变文档的布局。但是，如果元素的display属性设置为none，
display和visibility的用法和区别
weixin_30485291的博客
11-30 810
display和visibility的用法和区别 更多 2013/11/17 来源：css学习浏览量：892 学习标签： css display visibility 本文导读：大多数人很容易将CSS属性display和visibility混淆，它们看似没有什么不同，其实它们的差别却是很大的。visibility和display两个属性都有隐藏元素的功能。visibility属性所...
CSS属性Display（显示）和Visibility（可见性）
weixin_30486037的博客
07-22 183
隐藏一个元素可以通过把display属性设置为“none”，或把visibility属性设置为“hidden”。但是请注意，这两种方法会产生不同的效果。 Visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。 display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元...
display:none 和 visibility:hidden
最新发布
07-17
display:none和visibility:hidden的区别在于： display:none会将元素完全隐藏，不占据任何空间，即使在HTML代码中也不会显示出来；而visibility:hidden则是将元素隐藏，但仍然占据空间，即在HTML代码中仍然存在，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值