关于visibility和display

最新推荐文章于 2026-03-16 16:37:22 发布

原创最新推荐文章于 2026-03-16 16:37:22 发布 · 590 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

html/css/js/ajax/json

当前文章被收录于：

html/css/js/ajax/json

2 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文解析了CSS中visibility与display属性的区别。visibility用于使元素保持占位但不可见，而display则可以使元素完全消失，其空缺位置由其他元素填充。文章强调了在使用display属性时需为元素添加style属性。

visibility是占位的，也就是隐藏的时候也占位置，不会引起其它元素的变动。取值：visible和hidden

style的display则是不占位的，如果隐藏了，其它位置会自动填充。取值：block和none

PS：如果要使用style.display设置可见与否，需给元素添加style属性，否则报错的。。。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

boooch

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

CSS中display和visibility的区别

低代码布道师的博客

10-31

884

在 CSS 中，display 和 visibility 是两个用于控制元素显示和布局的属性，但它们的作用和效果是不同的。

参与评论您还未登录，请先登录后发表或查看评论

[Python] 为什么你的脚本明明没报错，却什么也没发生？

最新发布

技术小甜甜：传播可落地技术，帮助个人和企业降低解决真实场景问题的成本

03-16

263

Python脚本运行后没报错却没结果？这是许多开发者遇到的棘手问题。文章分析了六种常见原因：代码未进入目标逻辑分支、输出路径错误、中间数据为空、异常被吞掉、异步操作未完成、运行了错误脚本版本。建议通过"过程可视化"排查，如打印关键变量、检查工作目录、验证数据状态等。职场中更应关注结果验证而非单纯代码执行，确保脚本真正解决问题。建立结果验证意识是从"会写代码"到"稳定交付"的关键转变。

visibility占位不完整，不全问题

qq_36539696的博客

06-09

405

visibility占位问题

1996-2023年各省农业总产值数据

1996-2023年各省农业总产值数据（无缺失）1、时间：1996-2023年2、来源：国家统计J、各省NJ3、指标：农业总产值4、范围：31省

display和visibility

lucyliucuiyue的博客

11-30

512

前端开发中常用到display来隐藏元素 display：none（隐藏元素，不占位） display：block（显示元素，站位）常见的与js结合的交互 function run1(){ oDiv.style.display="block"; } function run2(){ oDiv.style.display="none";

CSS的display、visibility、overflow：hidden属性关于显示与隐藏的占位问题

6747的博客

08-01

2618

CSS的display、visibility、overflow：hidden属性关于显示与隐藏的占位问题

html隐藏但是不占空间,谈谈CSS隐藏元素(display,visibility)的区别

weixin_29050271的博客

06-03

499

复制代码代码如下:{ display: none; /* 不占据空间，无法点击 */ }{ visibility: hidden; /* 占据空间，无法点击 */ }{ position: absolute; top: -999em; /* 不占据空间，无法点击 */ }{ position: relative; top: -999em; /* 占据空间，无法点击 */ }{ position: ...

CSS 之 display属性详解

热门推荐

weixin_45092437的博客

10-18

3万+

display的属性值有：block、inline、flex、grid、table、flow、flow-root、ruby、list-item、table-row、table-cell、table-column、table-caption、table-row-group、table-header-group、table-footer-group、table-column-group、ruby-base、ruby-text、ruby-base-container、ruby-text-container等等。

visibility: hidden；与display:none；区别

qq_43812504的博客

12-02

7304

visibility:hidden;和display:none;的区别： visibility:hidden;属性会使对象不可见，但该对象在网页所占的空间没有改变，等于留出了一块空白区域， display:none属性会使这个对象彻底消失不显示，也不再占用位置。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewp

visibility与display的区别：

jinlovo

01-08

6127

visibility与display之设置元素显隐的区别在CSS里的visibility 属性，通常其值被设置成visible 或hidden。 visibility：hidden 相当于display：none，能把元素隐藏起来，但是两者的区别在于： display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘） visibility：hidden 隐藏对应元素，在...

display和visibility的用法和区别

gongze_yan的博客

12-04

1万+

大多数人很容易将CSS属性display和visibility混淆，它们看似没有什么不同，其实它们的差别却是很大的。visibility和display两个属性都有隐藏元素的功能。visibility属性所控制的元素虽然不在浏览器里面显示出来，但他在浏览区里是存在的，只是不显示而已。而display属性设置为none，这个元素就变成了一个不显示的元素。一、Display的属性值 blo...

html的display和visibility

YuTinH的博客

05-24

1020

display和visibility：这两个样式在实际开发中还是很重要的。

display和visibility的区别

hkduan的博客

12-20

246

display和visibility的区别，在控件中使用： display:none 隐藏后不会占位置下面的元素会跳上来而visibility:hidden隐藏后它还是会将这个位置占着下面的元素上不来

DIV Display属性和Visibility属性

yanzhibo的专栏IlgawME)Y*Ml

01-25

2万+

visibility属性是隐藏元素但保持元素的浮动位置，而display实际上是设置元素的浮动特征，虽然它们都可以达到隐藏页面元素的目的，但它们的区别在于如何回应正常文档流。 visibility属性：确定元素显示还是隐藏； visibility="visible|hidden"，visible显示，hidden隐藏。当visibility被设置为"hidden"的

CSS的visibility:hidden和display:none的区别

qq2071114140的博客

05-23

829

CSS的visibility:hidden和display:none的区别 1.visibility属性取值 visible 元素的默认值 hidden 元素被隐藏，任然占据空间 2.visibility:hidden和display:none两种隐藏的区别 visibility:hidden隐藏后，仍然会占据页面空间 div{ width: 100px; heig...

visibility和display

Blog

09-10

399

visibility和display这两个属性很容易被混淆，比如它们看起来是干一样的事情，就是将让我们看不见元素。display通常可以设置为：none，inline，block visibility通常可以设置为：hidden，visibledisplay：none; visibility:hidden;这两条样式都能使得元素隐藏。但是，display会将元素掉，并且位置不再占用。而visibi

display和visibility隐藏元素

JunGuanDreams的博客

05-07

190

1，区别：visibility默认是show，如果设置为hidden，元素会隐藏，但是还会占位。而display不会占位。4，第二种方式的演示结果。

display和visibility隐藏元素的区别

zh1106的博客

07-18

751

display和visibility隐藏元素的区别本人菜鸡一枚display隐藏元素visibility隐藏元素总结本人菜鸡一枚也是最近几个月才接触到前端开发的，过程中遇到过一些问题，对于一些概念也有部分自己的观点，不完全正确，纯为知识交换。 display隐藏元素对于display这个属性大家应该不会陌生，block常用来定义元素的类型，常用的属性值如block,inline-block,...

div层的visibility和display区别

一只苟延残喘的卑微蝼蚁

01-04

667

使用display和visibility都可以隐藏指定的区域，区别是，display隐藏后不会留空白，而visibility则会在页面上留有空白。一般，用display的情况要多些！ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>...

display ， visibility

weixin_45820444的博客

08-15

1040

display: none; 与 visibility: hidden; 的区别：相同：它们都能让元素不可见区别： display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间； visibility: hidden;不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见 display: none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示； visibility:hidden;是继承属性，子孙节点消失由于继承了 hidden，通过设

display none和visibility hidden两者的区别_visibility hidden和display none

2401_85011985的博客

05-15

953

给元素设置visibility: hidden也可以隐藏这个元素，但是隐藏元素仍需占用与未隐藏时一样的空间，也就是说虽然元素不可见了，但是仍然会影响页面布局。