display:none与visiblity:hidden的应用

最新推荐文章于 2025-03-09 15:58:11 发布
最新推荐文章于 2025-03-09 15:58:11 发布
阅读量3.9k 收藏 1
点赞数 1
分类专栏： Web前端 问题笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u011848397/article/details/88971146
版权

  1. display:none时，该对象不占用空间，也不可见
    visibility:hidden时，该对象占据空间，仅不可见

  2. JQuery中，.hiden()，.show()方法对应的时display的操作

  3. 要隐藏父元素的同时显示子元素该用visibility：

    父元素：visibility:hidden
子元素：visibility:visible
CSS元素的显示与可见性（详解Display和Visibility的用法）
百赢出品，必属精品
05-03 5249
1.DisplayDisplay主要用于控制元素的布局方式，包括块级、行内、弹性布局和网格布局等。Visibility主要用于控制元素的可见性，即元素是否在页面中可见，但不影响布局。display属性display属性用于定义元素应该生成的框的类型。常见的display属性值包括：none: 元素不会被渲染在页面上，且不占据空间。block: 元素被渲染为块级元素，占据一整行。inline: 元素被渲染为内联元素，不会独占一行，与其他内联元素在一行内显示。
display:none
热门推荐
进击的Coder菜鸟
08-21 11万+
1、display:none和visible:hidden都能把网页上某个元素隐藏起来。 2、但两者有区别: ●display:none ---不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。 ●visible:hidden--- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。 1、visibility: hid...
display:none;与visibility:hidden;的区别
米刀文
07-20 1万+
如果想让某一段代码在前台不显示，最简单的方法是用css的display:none即可，这样下边的内容就自动上移或右侧的左移来填补这个空隙。但特殊情况下我们只需要隐藏这个元素， 但它的位置不能被占了，那该怎么实现呢？接下来我们来看css的另外一个属性Visibility属性。 visibility:隐藏对应的元素但不挤占该元素原来的空间。 display:隐藏对应的元素并且挤占该元素原来的空间
display：none和visibility：hidden的区别
最新发布
2301_81192892的博客
03-09 292
如果只是想让元素不可见，但仍要保留其在页面中的位置，并且可能需要使用过渡效果或希望屏幕阅读器能够读取其内容等情况，通常使用。在实际应用中，如果需要完全隐藏元素且不希望它占据空间，也不需要过渡效果等，可以使用。
display:none和visibility:none的区别
程序员小周的博客
07-31 6886
联系：它们都能让元素不可见区别：display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间； visibility: hidden;不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见 display: none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示； visibility: hidden;是继承属性，子孙节点消失由于继
display：none
weixin_34075551的博客
04-28 409
2019独角兽企业重金招聘Python工程师标准>>> ...
两种隐藏元素方式【display: none】和【visibility: hidden】的区别
weixin_30505225的博客
08-26 306
此随笔的灵感来源于上周的一个面试，在谈到隐藏元素的时候，面试官突然问我【display: none】和【visibility: hidden】的区别，我当时一愣，这俩有区别吗，好像有，但是忘记了啊，因为平常基本都是用【display: none】，几乎没用过【visibility: hidden】，我只好如实回答。面试结束后回到家的第一件事就是敲代码测试，下面就是测试过程及结果： 一、...
display:none和visibility:hidden两者的区别
weixin_43535265的博客
03-09 2247
一、相同点 display:none和visibility:hidden 都能把网页上的某元素隐藏起来 二、不同点 示例代码如下： <!DOCTYPE html> <html> <head> <style> .hidden1 { display:none; } .hidden11 { display: inherit; } .hidden12 { display: block; } .hi
visiblity:hidden和display:none的差异
01-25
虽然将文本颜色设为与背景色相同或设置极小字号是更常见的做法，但使用 `visibility:hidden` 和 `display:none` 也可能引发同样的问题。只要不是为了欺骗搜索引擎，合理地使用这两个属性不会对SEO产生负面影响。 总...
RGBA和OPACITY的透明效果有何不同 DISPLAY:NONE和VISIBILITY：HIDDEN的区别
IT修真院：初学者转行到互联网的聚集地
05-31 483
这里是修真院前端小课堂，每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面深度解析前端知识/技能，本篇分享的是： 【 RGBA和OPACITY的透明效果有何不同 DISPLAY:NONE和VISIBILITY：HIDDEN的区别】 大家好，我是IT修真院北京分院第23期的学员郭婷婷，一枚正直纯洁善良的WEB前端程序员...
css中visiblity和display异同详解
09-25
这就是为什么 `display: none` 与 `visibility: hidden` 的关键区别。 在JavaScript操作中，比如 jQuery 的 `slideDown()` 和 `slideUp()` 方法，它们用于动态改变元素的高度以实现滑动显示或隐藏的效果。这些方法...
display: none;_display:none、visibility:hidden和opacity:0之间的区别
weixin_39774682的博客
11-30 101
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 554
关于如何解决块级元素消失底下的元素自动上移的问题
CSS隐藏属性display:none；visibility:hidden；overflow:hidden
Jorpeng的博客
10-28 4510
前端CSS元素隐藏的知识（display:none；visibility:hidden；overflow:hidden；opacity: 0）
css display:none使用
yymh123的专栏
10-15 1483
1.如果在样式文件或页面文件代码中直接用display:none对元素进行了隐藏，载入页面后，在没有通过js设置样式使元素显示的前提下，使用js代码会无法正确获得该元素的一些属性，比如offSetTop,offSetLeft等，返回的值会为0，通过js设置style.display来使元素显示后才能正确获得这些值 2.有些情况下可以使用style.visibility来代替style.displ
display:none 与 visibility:hidden
m0_50867898的博客
07-04 277
display:none 与 visibility:hidden 首先display:none 与 visibility:hidden 的共同点是都可让元素不可见。 区别是 display:none 是让元素从渲染树中完全消失，并且不占位置。 visibility:hidden不会让元素从渲染树中消失，所以会继续占位置，影响页面布局。 另外display:none是非继承属性，当父元素设置了display：none 之后该父元素的后代消失是因为父元素从渲染树中消失造成的，给后代添加属性也无法..
关于display：none的恢复问题 或取消display：none属性
liangshiyun1的博客
07-23 1万+
关于display：none的恢复问题 或取消display：none属性；通过display属性来设置元素的不显示及其恢复。
【前端】display:none和visibility:hidden两者的区别
努力才是唯一的入场券。
06-05 8102
【前端】display:none和visibility:hidden两者的区别
CSS中，display：none、visibility：hidden 和 opacity：0 之间的区别
LoveHaixin的博客
09-19 1275
display:none 隐藏之后不占位置，该元素和它所有的后代元素都会被隐藏，也无法使用屏幕阅读器等辅助设备访问；visibility:hidden 会被子元素继承，通过设置子元素visibility:visible来显示子元素。opacity:0 会被子元素继承，但是不能设置子元素opacity:0来重新显示。display:none 不会被子元素继承，父元素都不存在了，子元素也不会显示出。display:none 的元素都已经不再页面存在了，因此无法触发它绑定的事件。5、是否会产生生回流和重绘。
display:none与visible:hidden
04-06
display:none和visible:hidden都能隐藏元素，但区别在于： 1. display:none会将元素从文档流中完全移除，不占据任何空间，也不会触发任何事件，可以用来完全隐藏一个元素；而visible:hidden会将元素隐藏，但仍会占据相应的空间。 2. display:none是完全不可见，无论是对用户还是搜索引擎；而visible:hidden只是不可见，对搜索引擎是可见的。 所以，如果要完全隐藏一个元素，建议使用display:none。如果想隐藏元素但仍需要占据相应空间，可以使用visible:hidden。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值