css元素隐藏display:none和visibility:hidden

最新推荐文章于 2024-10-22 17:07:10 发布
最新推荐文章于 2024-10-22 17:07:10 发布
阅读量703 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： CSS 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/erciyuan_nuonuo/article/details/53872501
本文介绍了CSS中两种不同的隐藏元素的方法：使用display:none和visibility:hidden。display:none使元素完全不显示，不占据空间且不可点击；而visibility:hidden则保留了元素的空间布局但使其不可见且不可点击。此外还讨论了这两种方法对子元素的影响及引起的页面重绘和回流。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

display: none

  1. DOM中存在display: none的元素，但是浏览器不显示
  2. 不占据空间，无法点击，动态改变此属性会引起回流与重绘
  3. 不会被子类继承，但是所有的子类都不会显示的，子类的任何手段都无效

visibility: hidden

  1. 占据空间，无法点击
  2. 只引起重绘
  3. 子类可以通过visibility: visible显示
css元素隐藏原理及display:none和visibility:hidden
09-22
本文将详细探讨CSS元素隐藏的原理以及display:none和visibility:hidden这两个属性的不同应用及其影响。 首先，CSS元素隐藏的原理主要包括两个方面：空间占据和交互能力。元素被隐藏后，有些方式仍然保留了元素的...
javascript获取隐藏元素(display:none)的高度和宽度的方法
10-25
为了获取display:none元素的尺寸，一个常见的方法是临时将该元素的display属性更改为visibility:hidden，从而使其获得尺寸信息，再通过计算其样式来获得高度和宽度。但是，这会导致元素暂时变为可见，可能会在页面上...
《掌握CSS三大特性，轻松解决CSS代码失效难题》
最新发布
在逃小屁王的博客
10-22 691
在前端学习中，CSS三大特性是必学且很重要的知识点，其中三大特性分别是：层叠性、继承性和优先级。三大特性亦是一种‘规则’，精通并‘遵守’是帮助你彻底解决CSS代码失效问题的关键！
透明滤镜导致overflow:visible变为hidden
逆退相干
07-30 278
如下: [code="java"] *{ margin:0px; padding:0px; } #d01{ /*IE有滤镜的时候这里会被当作hidden,导致显示区域被剪切,而其它浏览器没有这种情况*/ /*另外补充一点,在IE下,不触发layout,透明滤镜不会生效*/ overflow:visible; positi...
CSS中display属性 block，inline，none的区别
达叔
01-19 3629
display的属性值有很多，最常用的是以下三种。 值 描述 none 此元素不会被显示。 block 此元素将显示为块级元素，此元素前后会带有换行符。 inline 默认。此元素会被显示为内联元素，元素前后没有换行符。 下面附上一个例子，更加直观的体现了他们三者之间的区别。 This is a
display:none到display:block失效问题及解决办法
海风依旧
10-19 4004
项目开发中display:none到display:block失效问题及解决办法
hide,hidden,display:none,visibility的区别
lm13420109892的博客
02-26 2803
display是css中的样式,规定元素是否显示 style="display:none"：不可见，不占用内存空间 visibility是css中的样式,规定元素是否可见 style="visibility:hidden" :不可见，占用内存空间 hide()实际上是设置了css中的display：none，show()实际上是设置 了css中的display：block css里面的display会覆盖html中的hidden属性 eg: <div class="box" s..
display:none和visibility:hidden的差别比较与演示代码
01-19
前言： 在使用css隐藏栏位或物件的时候， 常常会使用到display:none和visibility:hidden这两个属性， 但却很容易分不清楚这两个的差别， 或是乾脆同时使用两种属性，来确保物件一定被隐藏， 其实我们可以很简单的来...
display:none和visibility:hidden的区别
flower521528的博客
03-16 1万+
display：none 和visibility：hidden都可以实现让元素隐藏的效果，但原理是大不相同 1.display:none是让这个元素失去块元素的效果，其本身这个元素也是直接消失，会影响到布局问题。 2.visibility:hidden:可以让元素消失，属于css样式，它只是简单的让元素看不见，但本身的位置还在，如果对div进行hidden，那么div除了看不见，其他所有的样式都在。 ...
CSS display:none和visibility:hidden区别
jiaguo699的专栏
03-29 853
CSS display:none和visibility:hidden的区别 visibility:hidden隐藏，但在浏览时保留位置；CSS display:none视为不存在，且不加载！ Overflow属性值{visible|hidden|scroll|auto}前提是先要限制DIV的宽度（width）和高度（height）。二者都是隐藏HTML元素，在视觉效果上没有区别，但在一些DOM
当元素的样式为display:none时获取他的宽高
weixin_34128839的博客
09-03 259
其实这里可以用一个偷梁换柱的办法，把display:none改为 display:block;visibility:hidden;position:absolute; 在jquery的swap方法中实现了这种效果，我们来看源码： 1 var swap = function( elem, options, callback ) { 2 var ret, name, 3 ...
解决HTML节点属性为display:none的问题
iczfy585的博客
09-02 1万+
写了一个简单的例子，单击按钮会调用js中的change()函数使得div的display的属性边成none，效果就是使得图片被隐藏了。源码如下： <!DOCTYPE html> <html> <head> <title>display test</title> <meta charset="utf-8"> <scr...
页面内容的隐藏和显示-hide()方法和show()方法
Java程序源
11-28 3万+
有些时候我们需要在一个页面中不刷新页面直接隐藏和显示部分信息，这个时候我们可以使用hide()方法和show()方法。 hide()方法： 描述：使用自定义效果来隐藏匹配的元素。 show()方法： show() 方法显示隐藏的被选元素。 注意：show() 适用于通过 jQuery 方法和 CSS 中 display:none 隐藏的元素（不适用于通过 visibility
css中display:none、visible:hidden、和jquery中的hide()的区别
Danielmumu的博客
02-13 5466
首先这三者都是隐藏，只是有微小的差别css中display:none是元素是否显示，通俗点就是看不见就不占位置；visible:hidden是元素能否看得见，不管看不看得见都占着那个位置。而jquery中的hide则是设者display为none，而show（）就是设置display为block，而display的作用貌似可以覆盖visible，具体还要进一步测试。...
css(显示与隐藏、溢出)
Himalaya-hsf
08-26 4363
显示与隐藏、溢出 知识点1.visibility 显示隐藏 设置或检索是否显示对象。与display属性不同，此属性为隐藏的对象保留其占据的物理空间。这意味着元素仍占据其本来的空间，不过可以完全不可见。 visibility:hidden与display:none的区别 visibility:hidden设置不可见的元素也会占据页面上的空间。 display:none设置元素的不可见...
web前端的基础考试题
热门推荐
zhang_ran123的博客
02-24 5万+
Web前端阶段考试 一、选择题（每题2分*40=80分） 1.下列元素中，为行内元素的是（B）。  A.div  B.span  C.p  D.h3 2.下列HTML代码中，能在新窗口中打开新浪首页的是（C）。  A. 新浪  B. 新浪  C. 新浪  D. 新浪 3.需要创建一个多选框，且和文本关联起来（单击文本就像单击核选框一样）。下列 H
揭示CSS隐藏元素奥秘：display:none与visibility:hidden差异
本文将详细介绍几种常见的元素隐藏技巧：`display:none`、`visibility:hidden`，以及它们与`position`属性的结合使用，同时还会探讨`opacity`和`filter`用于透明度控制的情况。 1. **display:none**: `display:...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值