display: none；与visibility: hidden；的区别

最新推荐文章于 2025-05-09 16:28:44 发布
原创 最新推荐文章于 2025-05-09 16:28:44 发布 · 90 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #html #css3

本文探讨了`display:none`与`visibility:hidden`两种CSS属性的区别，包括元素可见性、渲染树影响、重排或重绘行为，以及对读屏器的影响。关键在于理解它们如何影响元素布局和可访问性。

  • 联系：它们都能让元素不可见

  • 区别：

    • display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility: hidden;不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见
    • display: none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示；visibility: hidden;是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式
    • 修改常规流中元素的display通常会造成文档重排。修改visibility属性只会造成本元素的重绘。
    • 读屏器不会读取display: none;元素内容；会读取visibility: hidden;元素内容
display:none和visibility:hidden两者的区别
weixin_43535265的博客
03-09 2294
一、相同点 display:none和visibility:hidden 都能把网页上的某元素隐藏起来 二、不同点 示例代码如下： <!DOCTYPE html> <html> <head> <style> .hidden1 { display:none; } .hidden11 { display: inherit; } .hidden12 { display: block; } .hi
display:none和visibility:none的区别
程序员小周的博客
07-31 6918
联系：它们都能让元素不可见区别：display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间； visibility: hidden;不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见 display: none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示； visibility: hidden;是继承属性，子孙节点消失由于继
display:none和visibility:hidden的区别
xiaoHelloWord的博客
06-27 805
display:none和visibility:hidden他们属性相同之处都是隐藏元素。 但是我们透过表面看本质，就会发现他们两有个不同之处，首先display:none。隐藏的元素消失不会占据空间也不会影响布局。 如果给父级元素设置display:none随之子元素也会消失。 还有就是display:none不会影响animation动画效果,但是会影响transitin的过渡效果，所以在使用...
display:none 和 visibility:hidden 区别小结
qq_42683507的博客
04-09 468
display:none 和 visibility:hidden 这两个方法一般都常用于前端的页面编写的布局上。 但是根据不同的业务需求还是有不一样的使用特点 区别1： 如果给一个元素设置了display: none，那么该元素以及它的所有后代元素都会隐藏； 给元素设置visibility: hidden也可以隐藏这个元素，但是隐藏元素仍需占用与未隐藏时一样的空间，也就是说虽然元素不可见了，但是仍然会影响页面布局。 <!DOCTYPE html> <html> <head&g
visibility:none 和 display:none的区别
Kevin的程序人生
01-15 1159
两者都可以指定元素的隐藏　div的visibility可以控制div的显示和隐藏，但是隐藏后页面显示空白： 　　style="visibility: none;" 　　document.getElementById("typediv1").style.visibility="hidden";//隐藏 　　document.getElementById("typediv1")
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 与 visibility: hidden 的区别
qq_44254672的博客
05-13 607
当我们想要隐藏一个元素时，通常会用display: none; 或者visibility: hidden; 来设置元素。但实际上，两者还是有十分明显的区别。 简单来说： visibility: hidden 为：隐藏对应的元素并且挤占该元素原来的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。 display: none 为 ：隐藏对应的元素但不挤占该元素原来的空间。也...
display:none
热门推荐
进击的Coder菜鸟
08-21 11万+
1、display:none和visible:hidden都能把网页上某个元素隐藏起来。 2、但两者有区别: ●display:none ---不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。 ●visible:hidden--- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。 1、visibility: hid...
CSS display: none
2401_83708850的博客
05-09 448
使元素在页面中不占据任何空间，也不会被渲染。是一个用于控制元素显示与隐藏的属性值，其核心作用是。
两种隐藏元素方式【display: none】和【visibility: hidden】的区别
weixin_30505225的博客
08-26 333
此随笔的灵感来源于上周的一个面试，在谈到隐藏元素的时候，面试官突然问我【display: none】和【visibility: hidden】的区别，我当时一愣，这俩有区别吗，好像有，但是忘记了啊，因为平常基本都是用【display: none】，几乎没用过【visibility: hidden】，我只好如实回答。面试结束后回到家的第一件事就是敲代码测试，下面就是测试过程及结果： 一、...
display: none;_display:none、visibility:hidden和opacity:0之间的区别
weixin_39774682的博客
11-30 131
Title *{ margin: 0; padding: 0; } .none{ /*display: none;*/ width: 100px; height: 100px; background: red; transition: all 1s linear; } .hidden{ width: 100px; height: 100px; background: #399; visibi...
display:none;和 visibility: hidden;知多少
骆天一
10-20 583
关于如何解决块级元素消失底下的元素自动上移的问题
CSS隐藏属性display:none；visibility:hidden；overflow:hidden
Jorpeng的博客
10-28 4727
前端CSS元素隐藏的知识（display:none；visibility:hidden；overflow:hidden；opacity: 0）
display: none； visibility: hidden； opacity: 0； 三者的区别
blog
08-28 910
文章目录前言一、display: none二、visibility: hidden三、opactiy: 0四、测试代码总结 前言 display: none; visibility: hidden; opacity: 0; 均是 css 中控制元素在页面中隐藏的属性值，但是它们之间隐藏的方式效果及性能又有所不同，下面我们将一起来探讨探讨。 一、display: none DOM 结构：浏览器不会渲染 display 属性为 none 的元素，不占据空间； 事件监听：无法进行 DOM 事件监
css display:none使用
yymh123的专栏
10-15 1543
1.如果在样式文件或页面文件代码中直接用display:none对元素进行了隐藏，载入页面后，在没有通过js设置样式使元素显示的前提下，使用js代码会无法正确获得该元素的一些属性，比如offSetTop,offSetLeft等，返回的值会为0，通过js设置style.display来使元素显示后才能正确获得这些值 2.有些情况下可以使用style.visibility来代替style.displ
display:none;与visibility:hidden;的区别
米刀文
07-20 1万+
如果想让某一段代码在前台不显示，最简单的方法是用css的display:none即可，这样下边的内容就自动上移或右侧的左移来填补这个空隙。但特殊情况下我们只需要隐藏这个元素， 但它的位置不能被占了，那该怎么实现呢？接下来我们来看css的另外一个属性Visibility属性。 visibility:隐藏对应的元素但不挤占该元素原来的空间。 display:隐藏对应的元素并且挤占该元素原来的空间
display:none与visibility:hidden的区别？
最新发布
11-21
在CSS中，`display:none` 和 `visibility:hidden` 都用于隐藏元素，但它们的行为有很大的不同。 `display:none` 会使元素完全从文档流中移除，该元素不会在页面上占据任何空间，就好像它根本不存在于HTML文档中一样。这意味着它不会影响其他元素的布局，并且该元素及其子元素的事件绑定也不会触发，在浏览器渲染时也不会绘制该元素。例如： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .hidden-display { display: none; } </style> </head> <body> <div class="hidden-display">这个元素使用display:none隐藏</div> <div>这是另一个元素</div> </body> </html> ``` 在上述代码中，使用 `display: none` 的元素不会在页面上显示，也不会占据空间，后面的元素会填充其原本的位置。 而 `visibility:hidden` 只是让元素不可见，但元素仍然会在文档流中占据它原本的空间，它的布局位置不会改变，就好像元素是透明的一样。元素及其子元素的事件绑定仍然存在，只是因为不可见而无法触发。例如： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .hidden-visibility { visibility: hidden; } </style> </head> <body> <div class="hidden-visibility">这个元素使用visibility:hidden隐藏</div> <div>这是另一个元素</div> </body> </html> ``` 在这个例子中，使用 `visibility: hidden` 的元素虽然不可见，但它原本的空间仍然被保留，后面的元素不会填充该位置 [^1][^2][^3]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小码哥・Martin

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值