display:none和visibility:hidden的区别

最新推荐文章于 2024-05-03 12:12:21 发布
最新推荐文章于 2024-05-03 12:12:21 发布
阅读量719 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaoHelloWord/article/details/93872632
版权

display:none和visibility:hidden他们属性相同之处都是隐藏元素。
但是我们透过表面看本质，就会发现他们两有个不同之处，首先display:none。隐藏的元素消失不会占据空间也不会影响布局。
如果给父级元素设置display:none随之子元素也会消失。
还有就是display:none不会影响animation动画效果,但是会影响transitin的过渡效果，所以在使用在transitin的过渡效果和隐藏，应该考虑使用不使用display:none。
visibility:hidden给父级元素设置会继承到子元素上。回占用页面的空间。如果给子元素设置visibility: visible,那么子元素就会显示出来。
写的并不是很完善，欢迎继续补充

真的不想哇
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
visibility:hidden；与display:none；的区别和渐进增强与优雅降级的区别
wx112728的博客
03-16 1733
1.作用不同 visibility:hidden; 将元素隐藏，但是在网页中的位置不会被取缔。 display:none; 将元素的显示设为无，在网页中不占任何位置。 2.定义不同 visibility 属性指定一个元素是否可见的 display 这个属性用于定义建立布局时元素生成的显示框类型 visibility:hidden;会触发重绘（repaint） display:none;会触发回流（reflow） 重绘不一定回流，回流一...
2021/3/17--前端第9天--display、visibility
A444477的博客
03-17 223
2021/3/17–前端学习第9天笔记 隐藏元素： display:none 设置显示方式 消失、不占位 visibility:hidden 设置可见度：消失占位 opacity:0 设置透明度 display:none和visibility:hidden(visible)两者的区别： 隐藏后一个占位一个不占位。 1、visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则
关于display:none隐藏不隐藏子元素
weixin_41154720的博客
02-01 454
解决dispaly:none样式不继承
CSS元素的显示与可见性（详解Display和Visibility的用法）
最新发布
百赢出品，必属精品
05-03 2565
1.DisplayDisplay主要用于控制元素的布局方式，包括块级、行内、弹性布局和网格布局等。Visibility主要用于控制元素的可见性，即元素是否在页面中可见，但不影响布局。display属性display属性用于定义元素应该生成的框的类型。常见的display属性值包括：none: 元素不会被渲染在页面上，且不占据空间。block: 元素被渲染为块级元素，占据一整行。inline: 元素被渲染为内联元素，不会独占一行，与其他内联元素在一行内显示。
display:none和visible:hidden区别
allen88的专栏
05-08 1062
3、例如有三个table，将中间的一个table hidden掉，你会发现在那个被hidden的table看不见了，但是，中间会留有很大的一空白，而这个空白就是这个table没有被隐藏时所占的位置。●visible:hidden--- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。1、visibility: hidden----将元素隐藏，但是在网页中该占的位置还是占着。2、display: none----将元素的显示设为无，即在网页中不占任何的位置。
display和visibility隐藏的区别
weixin_44874595的博客
08-12 346
一、display：none隐藏 用display：hidden隐藏的时候，会对元素的原先所占的空间也进行隐藏，即当它隐藏时，它不再占有原来的空间。 二、visibility：hidden隐藏 用visibility：hidden隐藏的时候，元素原来所占据的空间依然占据。 ...
css中元素的显示与隐藏
fighting_dream的博客
01-30 464
1.display属性 display:none；【隐藏元素】 未加display属性时： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</titl
display:none和visibility:hidden的差别比较与演示代码
09-25
display:none和visibility:hidden的差别:visibility:hidden隐藏，但在浏览时保留位置；而CSS display:none视为不存在，且不加载,感兴趣的朋友可以研究下
css元素隐藏原理及display:none和visibility:hidden
09-22
在CSS中，让元素隐藏指屏幕范围内肉眼不可见的方法很多，只不过有的依然保留空间，而有的却消失的不留痕迹,接下来本文将详细介绍下css元素隐藏原理，感兴趣的你可不要错过了哈
实例详解display:none与visible:hidden的区别
11-27
总结一下，`display:none` 和 `visibility:hidden` 的主要区别在于： - `display:none` 会完全移除元素在布局中的存在，而 `visibility:hidden` 只是让元素变得不可见，但保留其在布局中的位置。 - `display:none` ...
css元素隐藏原理及displaynone和visibilityhidden
11-22
在CSS中，让元素隐藏（指屏幕范围内肉眼不可见）的方法很多，有的占据空间，有的不占据空间；有的可以响应点击，有的不能响应点击。一个一个看。
面试题16：重绘（reflow）和回流（repaint）,visibility: hidden 和 display: none的区别
qq_51066068的博客
04-23 3727
面试官：请说一下什么是重绘和回流和visibility: hidden 和 display: none的区别 回流与重绘 概念 当JS对页面的节点进行操作时，就会产生回流或重绘 回流/重排（reflow）： 因为节点的尺寸、布局、显示(display: none/block)改变这些属性改变的时候，渲染树中的一部分或者全部需要重新构建，这种重新构建的现象就是回流。一个页面至少有一次回流。 重绘（repaint）： 回流时，浏览器会看重新构建受影响部分的渲染树，只要渲染树一被改变或重新构建，就一定会.
display: none与visibility: hidden的区别
qq_43940172的博客
04-11 639
1. visibility具有继承性，给⽗元素设置visibility:hidden;⼦元素也会继承这个属 性。但是如果重新给⼦元素设置visibility: visible,则⼦元素⼜会显示出来。这个 和display: none有着质的区别 2. visibility: hidden不会影响计数器的计数，如图所示，visibility: hidden虽然让⼀ 个元素不⻅了，但是其计数器仍在运⾏。这和display: none完全不⼀样 3.display;none表示直接消失 代码演示 c
display:none与visibility:hidden的区别是什么
sindlly的博客
09-22 894
display : 隐藏对应的元素但不挤占该元素原来的空间。visibility: 隐藏对应的元素并且挤占该元素原来的空间。   即是，使用CSS display:none属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”;而使用visibility:hidden属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。
display:none与visibility:hidden的区别 ，还有html5的新属性hidden
xiaomizhou66a的博客
07-04 1453
display:none与visibility:hidden的区别 还有html5的新属性hidden    ①三者都能把网页上某个元素隐藏起来，    ②display:none与visibility:hidden他们不是html元素的属性，是css样式的属性，内联方式编辑要写在style属性里    ③hidden 是html的属性，可以直接写在html元素   。XML严格模式 hidden...
static 和 visibility hidden 的区别
span76的专栏
01-17 3437
做 C 的人都知道如果所定义函数只在本文件中用，那么应该声明为 static 但看 Android 看 bionic 的代码 bionic/libc/bionic/pthread.c 发现有这样的代码片段 1269 __LIBC_HIDDEN__ 1270 int pthread_mutex_unlock_impl(pthread_mutex_t *mutex) 1271 {
display:none和visibility:hidden两者的区别
weixin_43535265的博客
03-09 2108
一、相同点 display:none和visibility:hidden 都能把网页上的某元素隐藏起来 二、不同点 示例代码如下： <!DOCTYPE html> <html> <head> <style> .hidden1 { display:none; } .hidden11 { display: inherit; } .hidden12 { display: block; } .hi
display:none 和 visibility:hidden
07-17
display:none和visibility:hidden的区别在于： display:none会将元素完全隐藏，不占据任何空间，即使在HTML代码中也不会显示出来；而visibility:hidden则是将元素隐藏，但仍然占据空间，即在HTML代码中仍然存在，只是不可见。 举个例子，如果一个div元素设置了display:none，那么它的宽度和高度都为，而如果设置了visibility:hidden，那么它的宽度和高度仍然存在，只是不可见。 因此，如果需要完全隐藏一个元素并且不占据空间，可以使用display:none；如果需要隐藏一个元素但仍然占据空间，可以使用visibility:hidden。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值