display:none 和visibility:hidden的区别

最新推荐文章于 2024-04-06 23:07:09 发布
原创 最新推荐文章于 2024-04-06 23:07:09 发布 · 217 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了CSS中display:none与visibility:hidden两种属性对元素可见性的控制方式。display:none使元素及其后代完全从文档流中消失，导致页面回流，性能较差；而visibility:hidden则保留元素位置，仅使其视觉上不可见，避免了回流问题。文章深入分析了这两种方法的差异及其对页面布局和性能的影响。
  • display: none
  1. 设置属性后，元素消失在文档流中，不再占位。因此也会导致文档页面重新构建，产生回流。=》性能差。
  2. 元素以及它的所有后代元素都会隐藏。
  • visibility: hidden
  1. 隐藏元素仍需占用与未隐藏时一样的空间，即仍然会占位，影响页面布局。也因此不会产生回流。
  2. visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。如果重新给子元素设置visibility: visible,子元素又会显示出来。

回流和重绘～～～

display:none和visibility:hidden的差别比较与演示代码
01-19
前言： 在使用css隐藏栏位或物件的时候， 常常会使用到display:none和visibility:hidden这两个属性， 但却很容易分不清楚这两个的差别， 或是乾脆同时使用两种属性，来确保物件一定被隐藏， 其实我们可以很简单的来区分两者的差别。 AD： 你知道CSS display:none和visibility:hidden的区别吗，这里和大家分享一下，使用CSS display:none属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”;而使用visibility:hidden属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。
display:none和visibility:hidden的区别
新博客地址：blog.songchunmin.com
07-23 2500
display:none和visibility:hidden的区别 display:none:隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢， 就当他从来不存在。 visibility:hidden:隐藏对应的元素，但是在文档布局中仍保留原来的空间。
display:none和visibility:hidden两者的区别
热门推荐
越努力，越幸运！
06-24 12万+
使用css让元素不可见的方法有很多种，裁剪、定位到屏幕外边、透明度变换等都是可以的。但是最常用两种方式就是设置元素样式为display: none或者visibility: hidden。很多公司的面试官也常常会问面试者这两者之间的区别。 display与元素的隐藏 如果给一个元素设置了display: none，那么该元素以及它的所有后代元素都会隐藏，它是前端开发人员使用频率最高的一种隐藏方...
display:none和visibility:hidden区别？
weixin_48037671的博客
03-19 461
display:none和visibility:hidden区别 1.占位 2.重绘和渲染
css元素隐藏原理及display:none和visibility:hidden
09-22
在介绍了这么多隐藏元素的方法之后，我们要特别注意display:none和visibility:hidden两种属性的主要区别。这两者之间的差异主要表现在以下几个方面： 1. 空间占据：display:none;隐藏的元素不占据任何布局空间，而...
display:none与visibility:hidden的区别 ，还有html5的新属性hidden
xiaomizhou66a的博客
07-04 1631
display:none与visibility:hidden的区别 还有html5的新属性hidden    ①三者都能把网页上某个元素隐藏起来，    ②display:none与visibility:hidden他们不是html元素的属性，是css样式的属性，内联方式编辑要写在style属性里    ③hidden 是html的属性，可以直接写在html元素   。XML严格模式 hidden...
display：none与visibility：hidden的区别是什么？
LuckXinXin的博客
02-27 379
display：隐藏对应的元素但不挤占该元素原来的空间。 visibility：隐藏对应的元素并且挤占该元素原来的空间。 即，使用CSS的display：none属性后，HTML元素（对象）的宽度，高度等各种属性值都将“丢失”；而使用visibility：hidden属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而他所占据的空间位置仍然存在。 ...
display：none；与visibility：hidden的区别是什么？
zyzyzouyou的博客
10-10 782
1、display:none它不占据空间，对后面的元素布局没有任何影响，visibility:hidden会占据原本的空间，会影响后面元素的布局。 这是不加任何样式的三个盒子的排列 这是加了display:none的样式,第一个盒子已经完全消失了 这是加了visibility：hidden的样式,虽然盒子不见了,但是那个位置依然被占据. 2、如果给父元素设置display:none，给它的子元素设置display:block，也不能显示出来，如果给父元素设置visibili...
display: none和visibility: hidden的区别解释
qq_37734787的博客
11-02 1069
很多前端的同学认为visibility: hidden和display: none的区别仅仅在于display: none隐藏后的元素不占据任何空间，而visibility: hidden隐藏后的元素空间依旧保留 ，实际上没那么简单，visibility是一个非常有故事性的属性 1、visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质
前端面试题（2017-12-4）
Vivianluolita的专栏
11-30 779
http://www.100mian.com/mianshi/webqianduan/49981.htmldisplay:none和visibility:hidden的区别？ 1.display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；2.使用visibility
display:none和visibility:hidden区别
最新发布
m0_47013706的博客
04-06 513
display:none和visibility：hidden区别
回流与重绘(浏览器渲染原理)
小鹿的博客
09-01 2389
前言 回流与重绘，听起来很高深的概念，其实它们两个只是重复执行浏览器渲染的过程而已。 所以，此博客将从浏览器渲染机制开始讲起 浏览器渲染页面过程 这里主要以webkit内核引擎的chrome浏览器进行讲解 先将图中的几个名词概念解释一下： DOM Tree: 浏览器将HTML解析成树形的数据结构 Style Rules: 浏览器将CSS解析成树形的数据结构(也就是常说的CSSOM) Attachment: 用来连接DOM与CSSOM以构建渲染树 Render Tree: Render Tree可以
visibility:hidden和display:none的区别
m0_71231013的博客
05-31 2538
1、作用不同:visibility:hidden将元素隐藏，但是在网页依然占用位置。display:none将元素的显示设为无，即在网页中不占任何的位置。2、使用后HTML元素有所不同:visibility:hidden，使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。display:none，使用该属性后，HTML元素（对象）的宽度、高度等各种属性值都将被‘抵消’即不存在。3、定义不同:visibility属性指定一个元
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、付费专栏及课程。

余额充值