display:none和visibility:hidden的区别

CSS隐藏元素技巧
最新推荐文章于 2024-04-06 23:07:09 发布
原创 最新推荐文章于 2024-04-06 23:07:09 发布 · 806 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文深入探讨了CSS中display:none和visibility:hidden两种隐藏元素的方法。详细分析了它们在空间占用、子元素影响及动画效果上的差异，为开发者提供选择依据。
部署运行你感兴趣的模型镜像

display:none和visibility:hidden他们属性相同之处都是隐藏元素。
但是我们透过表面看本质，就会发现他们两有个不同之处，首先display:none。隐藏的元素消失不会占据空间也不会影响布局。
如果给父级元素设置display:none随之子元素也会消失。
还有就是display:none不会影响animation动画效果,但是会影响transitin的过渡效果，所以在使用在transitin的过渡效果和隐藏，应该考虑使用不使用display:none。
visibility:hidden给父级元素设置会继承到子元素上。回占用页面的空间。如果给子元素设置visibility: visible,那么子元素就会显示出来。
写的并不是很完善，欢迎继续补充

您可能感兴趣的与本文相关的镜像

Qwen-Image

Qwen-Image

图片生成
Qwen

Qwen-Image是阿里云通义千问团队于2025年8月发布的亿参数图像生成基础模型，其最大亮点是强大的复杂文本渲染和精确图像编辑能力，能够生成包含多行、段落级中英文文本的高保真图像

display:none和visibility:hidden两者的区别
weixin_43535265的博客
03-09 2294
一、相同点 display:none和visibility:hidden 都能把网页上的某元素隐藏起来 二、不同点 示例代码如下： <!DOCTYPE html> <html> <head> <style> .hidden1 { display:none; } .hidden11 { display: inherit; } .hidden12 { display: block; } .hi
display:none和visibility:hidden的差别比较与演示代码
01-19
前言： 在使用css隐藏栏位或物件的时候， 常常会使用到display:none和visibility:hidden这两个属性， 但却很容易分不清楚这两个的差别， 或是乾脆同时使用两种属性，来确保物件一定被隐藏， 其实我们可以很简单的来...
display:none与visible:hidden的区别
weixin_30848775的博客
03-27 338
display:none和visible:hidden都能把网页上某个元素隐藏起来，但两者有区别: display:none ---不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。 visible:hidden--- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。 例子： <html> <he...
css元素隐藏原理及display:none和visibility:hidden
09-22
在介绍了这么多隐藏元素的方法之后，我们要特别注意display:none和visibility:hidden两种属性的主要区别。这两者之间的差异主要表现在以下几个方面： 1. 空间占据：display:none;隐藏的元素不占据任何布局空间，而...
display: none和visibility: hidden的区别解释
qq_37734787的博客
11-02 1075
很多前端的同学认为visibility: hidden和display: none的区别仅仅在于display: none隐藏后的元素不占据任何空间，而visibility: hidden隐藏后的元素空间依旧保留 ，实际上没那么简单，visibility是一个非常有故事性的属性 1、visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质
display:none和visibility:hidden区别？
weixin_48037671的博客
03-19 461
display:none和visibility:hidden区别 1.占位 2.重绘和渲染
display:none和visibility:none的区别
程序员小周的博客
07-31 6919
联系：它们都能让元素不可见区别：display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间； visibility: hidden;不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见 display: none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示； visibility: hidden;是继承属性，子孙节点消失由于继
display:none和visibility:hidden区别
最新发布
m0_47013706的博客
04-06 515
display:none和visibility：hidden区别
display:none与visibility:hidden的区别是什么
sindlly的博客
09-22 946
display : 隐藏对应的元素但不挤占该元素原来的空间。visibility: 隐藏对应的元素并且挤占该元素原来的空间。   即是，使用CSS display:none属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”;而使用visibility:hidden属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。
display:none 和 visibility:hidden
07-17
display:none和visibility:hidden的区别在于： display:none会将元素完全隐藏，不占据任何空间，即使在HTML代码中也不会显示出来；而visibility:hidden则是将元素隐藏，但仍然占据空间，即在HTML代码中仍然存在，只是不可见。 举个例子，如果一个div元素设置了display:none，那么它的宽度和高度都为，而如果设置了visibility:hidden，那么它的宽度和高度仍然存在，只是不可见。 因此，如果需要完全隐藏一个元素并且不占据空间，可以使用display:none；如果需要隐藏一个元素但仍然占据空间，可以使用visibility:hidden。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值