区分CSS Display Visibility

最新推荐文章于 2025-08-28 11:34:12 发布
最新推荐文章于 2025-08-28 11:34:12 发布 · 87 阅读 · 0

本文详细解释了CSS中两种隐藏元素的方法：使用visibility:hidden和display:none的区别。visibility:hidden使元素不可见但保留其空间；而display:none则完全移除元素及其占用的空间。

/***************************by garcon1986********************************/

区分 visibility:hidden 和 display:none

visibility:hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout.

Display: none hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as the element is not there.

待续

iteye_309
关注
HTML5和CSS3 WEB技术开发
张晨光老师的播客
01-02 7838
B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup
CSS类名参考.ppt
12-05
- 首先，应该设置**布局定位属性**，如`display`、`position`、`float`、`clear`和`visibility`。`display`尤为重要，因为它决定了元素的渲染模式，如块级、行内、盒模型等。 - 接着是**自身属性**，包括`width`、...
display:none和visibility:hidden的区别
flower521528的博客
03-16 1万+
display：none 和visibility：hidden都可以实现让元素隐藏的效果，但原理是大不相同 1.display:none是让这个元素失去块元素的效果，其本身这个元素也是直接消失，会影响到布局问题。 2.visibility:hidden:可以让元素消失，属于css样式，它只是简单的让元素看不见，但本身的位置还在，如果对div进行hidden，那么div除了看不见，其他所有的样式都在。 ...
display: none；和visiblilty:hidden；的区别
fagdg的博客
03-16 1609
一、相同点： 两者都可以隐藏元素 二、不同点： 1、是否占据空间： display: none;隐藏时不占原先的页面空间，不影响页面布局 visiblilty:hidden;隐藏时占据原先的页面空间，影响页面布局 2、是否具有继承性： display: none;不具有继承属性，元素display:none及其子元素都将隐藏不可见 ...
visibility:hidden和display:none的区别
热门推荐
SoLoJia的博客
03-15 2万+
visibility:hidden和display:none有以下几种不同，分别是1、作用不同；2、使用后HTML元素有所不同；3、定义不同。 1、作用不同: visibility:hidden将元素隐藏，但是在网页中该占的位置还是占着。 display:none将元素的显示设为无，即在网页中不占任何的位置。 2、使用后HTML元素有所不同: visibility:hidden，使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、
display:none 与 visibility:hidden 的区别
weixin_39307273的博客
02-14 1641
除了是否占据空间外，还有其他区别要注意 1、空间占据 display:none 隐藏后不占据额外空间，相当于删除元素 visibility:hidden占据着空间 opacity:0占据着空间 2、子元素继承 display:none 元素被删除，子元素也会被删除，自然也就不会显示 visibility:hidden 子元素具有继承性，可以通过设置子元素v...
初级前端面试题——CSS（1）
weixin_48915353的博客
04-11 1540
有两种， IE 盒子模型、W3C 盒子模型；盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；标准(W3C)盒模型：元素宽度 = width + padding + border + margin怪异(IE)盒模型：元素宽度 = width + margin区 别： IE 的 content 部分把 border 和 padding 计算了进去;
display:none和visibility:hidden的差别比较与演示代码
01-19
在使用css隐藏栏位或物件的时候， 常常会使用到display:none和visibility:hidden这两个属性， 但却很容易分不清楚这两个的差别， 或是乾脆同时使用两种属性，来确保物件一定被隐藏， 其实我们可以很简单的来区分两者...
CSS隐藏元素：display、visibility与opacity对比解析
文章重点讲解了CSS中的三个属性：`display`、`visibility`和`opacity`，它们都可以用来隐藏元素，但各自有不同的效果。 ### 1. `visibility` `visibility`属性用于规定元素是否可见。即使元素设置为不可见（`...
display: none和visibility: hidden的区别解释
qq_37734787的博客
11-02 1084
很多前端的同学认为visibility: hidden和display: none的区别仅仅在于display: none隐藏后的元素不占据任何空间，而visibility: hidden隐藏后的元素空间依旧保留 ，实际上没那么简单，visibility是一个非常有故事性的属性 1、visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质
display:none和visible:hidden区别
allen88的专栏
05-08 1421
3、例如有三个table，将中间的一个table hidden掉，你会发现在那个被hidden的table看不见了，但是，中间会留有很大的一空白，而这个空白就是这个table没有被隐藏时所占的位置。●visible:hidden--- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。1、visibility: hidden----将元素隐藏，但是在网页中该占的位置还是占着。2、display: none----将元素的显示设为无，即在网页中不占任何的位置。
visibility:hidden 和 display:none
fish_skyyyy的博客
09-08 529
visibility:hidden 和 display:none 的区别 1、继承： display不是继承属性，而visibility是继承属性。 后代元素的visibility属性若存在，则不会继承； 若不存在，则会继承父元素的visibility的值。 父元素的visibility为hidden但是子元素的visibility为visble，那么子元素依旧可见，子元素visibility属性不存在则子元素不可见。而父元素display属性设为none后，子元素全部不可见。 2、空间： 设置displa
【前端】display:none和visibility:hidden两者的区别
努力才是唯一的入场券。
06-05 8302
【前端】display:none和visibility:hidden两者的区别
【CSS 面经】display:none 与 visibility:hidden 的区别
lph159的博客
12-10 1290
特性元素是否从页面流中移除是，元素完全移除，页面布局重新计算否，元素仍然占据原来的位置元素是否响应用户交互否，元素完全消失，无法响应任何交互否，元素不可见，但仍然可以响应交互（如点击事件）对布局的影响会改变页面布局，后续元素会填充空白不会改变布局，元素仍然占据空间性能影响因为重新计算了布局，性能影响较大性能影响较小，只是隐藏元素应用场景适用于完全移除元素，且不希望它对页面布局产生任何影响适用于隐藏元素，但保留其占用的空间，如悬浮菜单是否占用空间不占用任何空间仍然占用空间。
面试题之：display: none 和 visibility: hidden 的区别
最新发布
xiaoxin_040112的博客
08-28 1034
CSS中display:none和visibility:hidden都能隐藏元素，但存在关键区别：1) display:none不占空间且完全移除元素，会触发重排；visibility:hidden保留空间仅隐藏内容，仅触发重绘；2) display:none的元素不可交互，子元素也无法显示；visibility:hidden的元素仍可响应JS事件，子元素可单独显示；3) 性能上前者开销更大，后者更优；4) 前者适合彻底隐藏元素（如弹窗），后者适合保留占位的场景（如加载动画）。无障碍访问方面，两者都不推荐用
display:none和visibility:hidden区别
m0_47013706的博客
04-06 523
display:none和visibility：hidden区别
在页面上隐藏元素的方式有哪些，分别应用在哪些场景？display:none 与 visibility:hidden 的区别
小草莓的博客
07-21 713
点击链接时，会产生一个虚线框，对于IE还好，没什么问题，虚线框只是在背影图片大小。，子孙节点消失是由于继承了 hidden，通过修改子孙节点的属性visibility:visible 可以让子孙节点显示；IE采用的遍历方法(HTC,css表达式)有些耗系统资源，正好我们只需要隐藏FF下的虚线框就行了，IE就不管了，说一下。将文字甩到屏幕看不到的地方。，子孙节点会随着父节点从渲染树消失，通过修改子孙节点的属性也无法显示；，子孙节点会随着父节点从渲染树消失，通过修改子孙节点的属性也无法显示；
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值