CSS display:none和visibility:hidden区别

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

本文详细解析了CSS中display:none与visibility:hidden两种隐藏方式的区别，包括它们对元素宽度、高度的影响，以及在视觉上的表现差异。同时，介绍了CSS选择器的基础知识，包括类别选择器、标签选择器、ID选择器、后代选择器、子选择器、伪类选择器、通用选择器和群组选择器等。

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

CSS display:none和visibility:hidden区别

使用CSS display:none属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”;而使用visibility:hidden属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。visibility:hidden隐藏，但在浏览时保留位置；CSS display:none视为不存在，且不加载！

css选择器

  1. 类别选择器  .class
  2.  标签选择器   p
  3. ID选择器      #id1
  4. 后代选择器  .father .child
  5. 子选择器   .father > .child 第一个子元素
  6. 伪类选择器 a:hover
  7. 通用选择器 *
  8. 群组选择器 li,p
  9. 相邻同胞选择器 h1+p
  10. 属性选择器 input[type] 属性是否存在 input[type='text'] 某个属性值

display:none和visibility:hidden两者的区别
weixin_43535265的博客
03-09 2262
一、相同点 display:none和visibility:hidden 都能把网页上的某元素隐藏起来 二、不同点 示例代码如下： <!DOCTYPE html> <html> <head> <style> .hidden1 { display:none; } .hidden11 { display: inherit; } .hidden12 { display: block; } .hi
html属性display,cssdisplaynone属性
weixin_42208901的博客
06-05 265
css中display怎么做显示或隐藏为什么display:none css代码无用CSS3 display none 到 display block 有过渡效果没 举个例呗那个是从：opacity: 1; 到 opacity: 0; 跟display没关系，display表示展现方式，透明度才能确定渐变程度。css中把一个div设置display: none属性，等到displa请问我应该怎么设...
[HTML/CSS]display:none和visibility:hidden的区别
weixin_34124651的博客
02-02 148
写在前面 在群里有朋友问这样一个问题，display:none的标签，影响了布局。这就引出了本篇这样的问题，印象中display:none的块元素是不占位置的。 一个例子 &lt;!DOCTYPE html&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta http-equiv="...
DIV CSS display (block none inline)属性的用法
akiyame的专栏
12-13 1767
原文：http://www.cnblogs.com/Bill_Lee/archive/2011/04/11/2013110.html DIV CSS display (block none inline)属性的用法 在一般的CSS布局制作时候，我们常常会用到display对应值有block、none、inline这三个值。下面我们来分别来认识和学习什么时候用什么值。这里通过
精通CSS之深入理解display属性none block inline和inline-block的区别和细节
ScottePerk的博客
09-05 867
首先最常用也最好用的是inline-block。因为在页面中，我们经常需要让父元素子适应子元素大小。inline-block默认就是这样，inline虽然也是可以自适应，当inline的宽高都是不可以改变的。当你需要水平居中的时候，优先考虑block，block水平居中是非常方便的。display有非常多的值，这三个是非常基础的值。在实际使用的时候如果理解的不是很透彻，有时候会非常的困惑为什么这里要用这个。而且不要和float混着理解，因为那是两回事。下面详细介绍特点，和在实际开发中的使用情况。
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的区别
热门推荐
flower521528的博客
03-16 1万+
display：none 和visibility：hidden都可以实现让元素隐藏的效果，但原理是大不相同 1.display:none是让这个元素失去块元素的效果，其本身这个元素也是直接消失，会影响到布局问题。 2.visibility:hidden:可以让元素消失，属于css样式，它只是简单的让元素看不见，但本身的位置还在，如果对div进行hidden，那么div除了看不见，其他所有的样式都在。 ...
CSS中display属性 block，inline，none的区别
JYXbuhuibiancheng的博客
08-16 290
css基础
理解与应用css中的display属性
Liuqz2009的专栏
02-12 9429
　　display属性是我们在前端开发中常常使用的一个属性，其中，最常见的有：noneblockinlineinline-blockinherit　　下面，我将按照顺序将上述几种属性做一个完整的讲解。第一部分：display:none　　none这个值表示此元素将不被显示。比如，当我们在浏览网页时，如果看到了某个烦人的广告遮挡了我们的实现，更为可气的是，它还没有关闭的选项，这时（以chrome为例...
CSS隐藏属性display:none；visibility:hidden；overflow:hidden
Jorpeng的博客
10-28 4650
前端CSS元素隐藏的知识（display:none；visibility:hidden；overflow:hidden；opacity: 0）
CSS基础：display的3个常见属性值详解
u013179804的博客
04-19 3729
display属性用于控制元素的显示方式：是否显示/如何显示元素。大多数元素的display属性有两种状态：块级元素（Block）和 内联元素（Inline）。除了这两种常见的状态外，还有一些其他的display属性取值，如flexgrid等，用于实现更灵活的布局和样式效果。因为，对于新手，其他属性相对复杂，本次呢，我们么主要来介绍display的 3 个基础常用的属性值。
【前端】display:none和visibility:hidden两者的区别
努力才是唯一的入场券。
06-05 8179
【前端】display:none和visibility:hidden两者的区别
CSS display: none
最新发布
2401_83708850的博客
05-09 401
使元素在页面中不占据任何空间，也不会被渲染。是一个用于控制元素显示与隐藏的属性值，其核心作用是。
DIV CSS display (block none inline)属性的用法教程
fenghome的专栏
06-13 1739
在一般的CSS布局制作时候，我们常常会用到display对应值有block、none、inline这三个值。下面我们来分别来认识和学习什么时候用什么值。这里通过CSS display知识加实例、图演示讲解方法来学习和了解DIV CSS display。 目录 CSS display使用 display的值有哪些 css display block显示 css disp
6-2、选择器
鸵鸟
09-06 1027
选择器
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值