visibility:hidden和display:none的区别

最新推荐文章于 2024-04-06 23:07:09 发布
最新推荐文章于 2024-04-06 23:07:09 发布
阅读量104 收藏
点赞数
分类专栏： javascript+css+html 文章标签： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gundumw100/article/details/83441730
版权
大家知道，如果想让某一段代码在前台不显示，最简单的方法是用css的display:none即可，这样下边的内容就自动上移或右侧的左移来填补这个空隙。但特殊情况下我们只需要隐藏这个元素，但它的位置不能被占了，那该怎么实现呢。

　　突然发现css还有一个visibility属性，用 visibility:hidden;可以很方便实现隐藏元素在前台的显示，但它的位置不会被后边的元素抢占。神了吧！！
gundumw100
关注
专栏目录
display:none和visibility:hidden的差别比较与演示代码
09-25
display:none和visibility:hidden的差别:visibility:hidden隐藏，但在浏览时保留位置；而CSS display:none视为不存在，且不加载,感兴趣的朋友可以研究下
visibility:hidden；与display:none；的区别和渐进增强与优雅降级的区别
wx112728的博客
03-16 1803
1.作用不同 visibility:hidden; 将元素隐藏，但是在网页中的位置不会被取缔。 display:none; 将元素的显示设为无，在网页中不占任何位置。 2.定义不同 visibility 属性指定一个元素是否可见的 display 这个属性用于定义建立布局时元素生成的显示框类型 visibility:hidden;会触发重绘（repaint） display:none;会触发回流（reflow） 重绘不一定回流，回流一...
opacity: 0、visibility: hidden、display: none 有啥区别
zhoukaibai的博客
05-18 1516
这三种方式的使用场景分别是：● opacity: 0：隐藏元素，但是需要占据原来的空间；需要注意的是，opacity 属性不仅影响元素的可见性，还影响其交互行为（例如点击事件的响应）● visibility: hidden：隐藏元素，但是需要占据原来的空间，并且保持元素布局不变；● display: none：隐藏元素，并且不需要占据原来的空间，也不影响其他元素的布局。
关于opacity:0、visibility:hidden、display:none三个属性的比较以及拓展
问白的博客
03-04 8382
今天上午看某头条的时候有个刚入门的前端小伙伴提问道opacity:0、visibility:hidden、display:none。这三个属性的区别，这三个属性在我们日常开发中也算是用到频率也是蛮多的，所以干脆就就把这三个属性放在一起，配合实例做一个比较。首先这三个属性依次设置为0/hidden/none都可以使得用户看不见页面上的元素，不过他们之间还是有区别的，不然若是一样的话，也就没必要用三个...
display:none和visibility:hidden区别
最新发布
m0_47013706的博客
04-06 272
display:none和visibility：hidden区别
css元素隐藏原理及display:none和visibility:hidden
09-22
在介绍了这么多隐藏元素的方法之后，我们要特别注意display:none和visibility:hidden两种属性的主要区别。这两者之间的差异主要表现在以下几个方面： 1. 空间占据：display:none;隐藏的元素不占据任何布局空间，而...
visiblity:hidden和display:none的差异
01-25
`visibility:hidden` 和 `display:none` 的主要区别在于，前者隐藏元素的同时保留其占据的空间，而后者则完全从布局中移除元素。这种差异在处理页面布局时尤为关键。例如，如果一个元素的 `display` 被设置为 `none`...
实例详解display:none与visible:hidden的区别
08-30
总的来说，理解 `display:none` 和 `visibility:hidden` 的区别对于优化网页性能和用户体验至关重要。正确使用它们可以让你更好地控制网页元素的可见性和布局，提升网站的可访问性和可用性。在实际工作中，应根据...
回流与重绘(浏览器渲染原理)
小鹿的博客
09-01 2262
前言 回流与重绘，听起来很高深的概念，其实它们两个只是重复执行浏览器渲染的过程而已。 所以，此博客将从浏览器渲染机制开始讲起 浏览器渲染页面过程 这里主要以webkit内核引擎的chrome浏览器进行讲解 先将图中的几个名词概念解释一下： DOM Tree: 浏览器将HTML解析成树形的数据结构 Style Rules: 浏览器将CSS解析成树形的数据结构(也就是常说的CSSOM) Attachment: 用来连接DOM与CSSOM以构建渲染树 Render Tree: Render Tree可以
display: none和visibility: hidden的区别解释
qq_37734787的博客
11-02 952
很多前端的同学认为visibility: hidden和display: none的区别仅仅在于display: none隐藏后的元素不占据任何空间，而visibility: hidden隐藏后的元素空间依旧保留 ，实际上没那么简单，visibility是一个非常有故事性的属性 1、visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质
在页面上隐藏元素的方式有哪些，分别应用在哪些场景？display:none 与 visibility:hidden 的区别
小草莓的博客
07-21 602
点击链接时，会产生一个虚线框，对于IE还好，没什么问题，虚线框只是在背影图片大小。，子孙节点消失是由于继承了 hidden，通过修改子孙节点的属性visibility:visible 可以让子孙节点显示；IE采用的遍历方法(HTC,css表达式)有些耗系统资源，正好我们只需要隐藏FF下的虚线框就行了，IE就不管了，说一下。将文字甩到屏幕看不到的地方。，子孙节点会随着父节点从渲染树消失，通过修改子孙节点的属性也无法显示；，子孙节点会随着父节点从渲染树消失，通过修改子孙节点的属性也无法显示；
前端面试题（2017-12-4）
Vivianluolita的专栏
11-30 722
http://www.100mian.com/mianshi/webqianduan/49981.htmldisplay:none和visibility:hidden的区别？ 1.display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；2.使用visibility
详解display:none和visibility: hidden的区别
包磊磊的博客
01-18 2288
本章的主要内容是利用CSS控制元素的“显隐”，说道显隐，之前其实已经提供了一些非常规的CSS方法，如clip，z-index，opacity等，本章我们来深入探究一下display:none和visibility: hidden折两个属性。 1.display与元素的显隐 对于一个display计算值是none的元素而言，该元素及其后代元素全部都被隐藏（请记住这个概念，等下对比下visibi...
css3新增选择器、伪元素、隐藏元素的方法、visibility: hidden与display：none；的区别 、遮罩层效果、​ 三级菜单制作、选项卡制作——css3知识点总结
TKY666的博客
03-15 2458
一、css3新增选择器 1、兄弟选择器 相邻兄弟选择器 E + F { } 紧挨选择器E后的那个兄弟选择器F /* 相邻兄弟选择器，该代码意思是选择紧邻div后的那一个span元素，且只有第一个span会被选中。 */ div+span{ color: pink; } 通用兄弟选择器 E ~ F{ } 选择器E后的所有的兄弟选择器F /* 通用兄弟选择器，选择所有div元素后面的span元素 */ /* 一对.
display:none和visibility:hidden的区别
热门推荐
flower521528的博客
03-16 1万+
display：none 和visibility：hidden都可以实现让元素隐藏的效果，但原理是大不相同 1.display:none是让这个元素失去块元素的效果，其本身这个元素也是直接消失，会影响到布局问题。 2.visibility:hidden:可以让元素消失，属于css样式，它只是简单的让元素看不见，但本身的位置还在，如果对div进行hidden，那么div除了看不见，其他所有的样式都在。 ...
visibility: hidden；与display:none；区别
qq_43812504的博客
12-02 7158
visibility:hidden;和display:none;的区别： visibility:hidden;属性会使对象不可见，但该对象在网页所占的空间没有改变，等于留出了一块空白区域， display:none属性会使这个对象彻底消失不显示，也不再占用位置。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewp
面试题16：重绘（reflow）和回流（repaint）,visibility: hidden 和 display: none的区别
qq_51066068的博客
04-23 3814
面试官：请说一下什么是重绘和回流和visibility: hidden 和 display: none的区别 回流与重绘 概念 当JS对页面的节点进行操作时，就会产生回流或重绘 回流/重排（reflow）： 因为节点的尺寸、布局、显示(display: none/block)改变这些属性改变的时候，渲染树中的一部分或者全部需要重新构建，这种重新构建的现象就是回流。一个页面至少有一次回流。 重绘（repaint）： 回流时，浏览器会看重新构建受影响部分的渲染树，只要渲染树一被改变或重新构建，就一定会.
元素隐藏之display:none、visibility:hidden、opacity:0、overflow:hidden区别
DZQ1223的博客
03-23 1054
元素隐藏
visibility: hidden ，opacity display:none
06-01
这三个CSS属性都可以用于隐藏元素，但有一些区别： 1. `visibility: hidden`：元素不可见，但仍占用布局空间，即元素仍然存在于DOM中，可以通过更改CSS属性或通过JavaScript让其可见。 2. `opacity: 0`：元素透明...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值