CSS中元素的隐藏和显示(visibility, display)

最新推荐文章于 2024-04-17 01:51:34 发布
最新推荐文章于 2024-04-17 01:51:34 发布
阅读量1.4k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： JavaScript 文章标签： css div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/perfect5085/article/details/4888451
本文介绍了如何使用CSS的visibility和display属性来控制网页元素的显示与隐藏。visibility属性可以隐藏元素但保留其占用的空间，而display属性则可以完全移除元素及其所占空间。文章通过示例展示了不同属性值的效果。

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

 visibility: hidden, visible

 display: block, inline, none

 

visibility: 控制页面元素的显示和隐藏，不空值元素的位置特征。

 

document.getElementById("div").style.visibility = "hidden"; //隐藏元素

document.getElementById("div").style.visibility = "visible"; //显示元素

 

当元素在页面是隐藏时，会占据一个显示块，其它的元素不能使用这个位置。当元素隐藏时，它不能接收事件。

 

document.getElementById("div").style.display = "none";//从页面中移除这个元素，当然元素的位置也被移除。

document.getElementById("div").style.display = "inline";//此元素不会占据一行，和其它的元素一起组合显示。

document.getElementById("div").style.display = "block";//此元素占据一行，单独显示。

CSS元素的显示与可见性（详解Display和Visibility的用法）
百赢出品，必属精品
05-03 5545
1.DisplayDisplay主要用于控制元素的布局方式，包括块级、行内、弹性布局和网格布局等。Visibility主要用于控制元素的可见性，即元素是否在页面中可见，但不影响布局。display属性display属性用于定义元素应该生成的框的类型。常见的display属性值包括：none: 元素不会被渲染在页面上，且不占据空间。block: 元素被渲染为块级元素，占据一整行。inline: 元素被渲染为内联元素，不会独占一行，与其他内联元素在一行内显示。
CSS的元素的隐藏与显示
一风
04-23 1万+
显示与隐藏1、介绍：​ display：使段落生出行内框​ visibility ：属性规定元素是否可见。2、display属性值描述none此元素不会被显示。block此元素将显示为块级元素，此元素前后会带有换行符。inline默认。此元素会被显示为内联元素，元素前后没有换行符。inline-block行内块元素。（CSS2.1 新增的值）list-item此元素会作为列表显示。run-in此元...
显示和隐藏元素display&&visibility
u012338255的专栏
07-05 390
block块级元素显示时，一般会另起一行显示 使用display属性可以更改块级元素为inline元素，或者反之 display：block； display: inline; 行内元素 display：inline-block: 让元素与其他元素处于同一行，同时具有块级元素属性 display：none时元素不显示，不留任何痕迹visibility：hidden 元素不可见，但是会留下一
CSS之隐藏Div属性
绣花针
12-25 2615
1.占据空间隐藏,看到的是空白 style="visibility: hidden;"//隐藏 style="visibility: visible;"//显示 2.不占空间隐藏  style="display: none;"//隐藏 style="display: block;"//显示  ...
[css] 元素的隐藏和显示
adisMadman的博客
04-20 599
类似网站广告，当我们点击关闭就不见了，但是我们重新刷新界面，会重新出现！ 本质：让一个元素在页面中隐藏或者显示出来。 一：display属性 display属性用于设置一个元素应如何显示： display：none；隐藏对象 display：block；除了转换为块级元素以外，同时还有显示元素的意思 display隐藏元素后，不再占有原来的位置 二：visibility可见性 visibility属性用于指定一个元素应可见还是隐藏 visibility：visible；元素可视 visib
CSS—显示属性
有道无术，术尚可求，有术无道，止于术。
01-27 491
显示 显示方式 display常用显示方式  属性 display 取值 none：让生成的元素不显示 - 隐藏 特点： 脱离文档流   block：让元素表现的和块级元素一样 特点：独占一行、允许修改尺寸、允许正常处理垂直方向的外边距           inline： 让元素表现的和行内元素一样  特点：多个元素一行...
谈谈CSS隐藏元素(display,visibility)的区别
09-25
在CSS中，隐藏元素是网页设计中常见的需求，主要通过`display`和`visibility`两个属性来实现。它们之间的区别在于元素的占用空间、可点击性、页面渲染的影响以及对子孙元素的影响。 首先，`display:none`是完全隐藏...
css元素隐藏原理及display:none和visibility:hidden
09-22
综上所述，了解CSS中元素隐藏的原理及其属性的使用方法，对于前端开发者来说至关重要。它们不仅可以帮助实现复杂的页面设计，还能在维护页面性能方面发挥关键作用。在日常开发中，合理运用display和visibility属性，...
通过display或visibility来实现HTML元素的显示与隐藏
09-28
在HTML中控制元素的显示与隐藏是前端开发中的常见需求，主要可以通过CSS属性display和visibility来实现。两者都允许开发者根据特定条件（比如用户的交互行为、数据的变化等）来控制页面上元素的可见性。 首先，...
css-元素的显示和隐藏
qq_39111074的博客
05-07 244
元素的显示和隐藏方法 元素的显示和隐藏可以使用这3种css属性：visibility、display、overflow 示例代码1： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" cont
CSS-显示属性
一条大河
09-21 1004
1， 显示方式 1， 什么是显示方式 决定了元素是以什么样的方式显示在网页中；（块级/行内/行内块） 2， 语法结构 属性：display 取值： 1, none 让元素不显示 - 隐藏 脱离文档流，不占据页面空间 2，block ...
CSS Display(显示) 与 Visibility（可见性）
Top5软件工程硕士，先后在京东、字节从事多年Java后端开发、实时和离线大数据开发
10-22 694
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局 隐藏不释放空间； display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。 隐藏释放空间；
CSS 元素的显示与隐藏（display属性、visibility属性、overflow属性）
蟹黄堡
05-14 1567
元素的显示与隐藏 本质：让一个元素在在页面中隐藏或者显示出来。 1.dispaly属性 display: none; 隐藏对象 display: block; 除了转换为块级元素之外，还有显示元素的意思 注意： 1、display隐藏元素之后，不再占有原来的位置 2.visibility属性 visibility: visible; 元素可视 visibility: hidden; 元素隐藏 注意： 1、visibility隐藏元素后，继续占有原来的位置 3.overfl
CSS基础之元素的隐藏与显示，多线程在web项目的应用
最新发布
2401_84138890的博客
04-17 429
小编的一位同事在校期间连续三年参加ACM-ICPC竞赛。从参赛开始，原计划每天刷一道算法题，实际上每天有时候不止一题，一年最终完成了 600+：凭借三年刷题经验，他在校招中很快拿到了各大公司的offer。入职前，他把他的刷题经验总结成1121页PDF书籍，作为礼物赠送给他的学弟学妹，希望同学们都能在最短时间内掌握校招常见的算法及解题思路。整本书，我仔细看了一遍，作者非常细心地将常见核心算法题和汇总题拆分为4个章节。
Flex中真正隐藏控件
fhuan123的专栏
10-29 255
[code="java"] [/code] 通常大家都会设置visible属性为false。但这样做还是会有问题：组件仍然占用原来的位置。 最后同时使用includeInLayout与visible属性来解决。...
css中实现元素隐藏的几种方法
热门推荐
simple_Xsg的博客
04-09 2万+
一、display:none; display翻译成中文是显示、展览的意思；将display的属性改为none可以实现元素的隐藏，元素和盒子模型也不生成，被隐藏的元素不占位置，看不见摸不着，它会导致浏览器的重排和重绘。 二、visibility:hidden; visibility翻译成中文是能见、可见性的意思；hidden翻译成中文的是隐藏、不易察觉的意思。将visibility的属性改成hidden可以实现元素的隐藏，和display:none的区别是它占位置，看不见但是摸得着，所以它只会导致浏览
css3新增选择器、伪元素、隐藏元素的方法、visibility: hidden与display：none；的区别 、遮罩层效果、​ 三级菜单制作、选项卡制作——css3知识点总结
TKY666的博客
03-15 2724
一、css3新增选择器 1、兄弟选择器 相邻兄弟选择器 E + F { } 紧挨选择器E后的那个兄弟选择器F /* 相邻兄弟选择器，该代码意思是选择紧邻div后的那一个span元素，且只有第一个span会被选中。 */ div+span{ color: pink; } 通用兄弟选择器 E ~ F{ } 选择器E后的所有的兄弟选择器F /* 通用兄弟选择器，选择所有div元素后面的span元素 */ /* 一对.
:visible 选择器选取可见元素
FancierX的专栏
08-21 2856
CSS visibility 属性
前端小99的博客
04-18 3256
属性定义及使用说明 visibility属性指定一个元素是否是可见的。 提示:即使不可见的元素也会占据页面上的空间。请使用 "display" 属性来创建不占据页面空间的不可见元素。 默认值： visible 继承： yes 版本： CSS2 JavaScript 语法： object.style.vi
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

perfect5085

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

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

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

打赏作者

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

抵扣说明：

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

余额充值