visibility:none 和 display:none的区别

最新推荐文章于 2023-12-18 11:55:25 发布
最新推荐文章于 2023-12-18 11:55:25 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： Javascript 文章标签： div
本文介绍了如何使用CSS的visibility和display属性来控制div元素的显示与隐藏状态，并详细解释了这两种方式的区别。visibility属性使元素不可见但保留其在页面布局中的空间；而display属性则完全移除元素并释放其所占的空间。

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

两者都可以指定元素的隐藏

　div的visibility可以控制div的显示和隐藏，但是隐藏后页面显示空白：

 

　　style="visibility: none;"
　　document.getElementById("typediv1").style.visibility="hidden";//隐藏
　　document.getElementById("typediv1").style.visibility="visible";//显示

 

 

   通过设置display属性可以使div隐藏后释放占用的页面空间，如下


　　style="display: none;"
　　document.getElementById("typediv1").style.display="none";//隐藏
　　document.getElementById("typediv1").style.display="";//显示

7.22知识点总结：white-space，overflow，min-height，max-height，伪类对象选择器，display：none；和visibility：none；的区别
m0_60175058的博客
07-22 658
1.white-space:nowrap;文本强制在一行上显示 white-space:nowrap; white-space:pre;保留空白区域 white-space:pre; white-space:pre-line;合并空白符,保留换行 white-space:pre-line; white-space:pre-wrap;保留空白符,正常换行 white-space:pre-wrap; 2. overflow:visible; 默认 overflo...
`visibility: hidden`和`display: none`区别
最新发布
m0_72030584的博客
04-25 700
`visibility: hidden`和`display: none`区别
display:none和visibility:none的区别
程序员小周的博客
07-31 6902
联系：它们都能让元素不可见区别：display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间； visibility: hidden;不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见 display: none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示； visibility: hidden;是继承属性，子孙节点消失由于继
display:none与visible:hidden的区别
JorgenXu
09-06 634
http://www.cnblogs.com/nicholas_f/archive/2009/03/27/1423207.html     display:none和visible:hidden都能把网页上某个元素隐藏起来，但两者有区别: display:none ---不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。 visible:hidden-
visibility：none和display：none区别
Tsite2007的博客
02-27 779
区别:         1. 前者依然在文档流中;后者则是直接 移除.         2. 后者会引起重绘,关乎前端的性能问题.         3. 前者设置后,如果给其子元素设置visibility:visible,则子元素依然可见.
display:none和visibility:hidden的区别
杳杳捞到月亮了吗
02-07 970
display:none和visibility:hidden的区别
display:none和visibility:hidden的差别比较与演示代码
09-25
display:none和visibility:hidden的差别:visibility:hidden隐藏，但在浏览时保留位置；而CSS display:none视为不存在，且不加载,感兴趣的朋友可以研究下
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页面visible,Html学习 display:none与visible:hidden的区别
weixin_39754831的博客
06-09 1684
display:none和visible:hidden都能把网页上某个元素隐藏起来，但两者有区别:display:none ---不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。visible:hidden--- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。在平常使用时需要注以下事项：1、如果在样式文件或页面文件代码中...
CSS的display:none与visible:hidden区别
思维小刀
02-01 493
1 display:none和visible:hidden都能把网页上某个元素隐藏起来。 2区别 display:none 不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。 visible:hidden使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。 ...
android:visibility属性
widenstage的专栏
05-10 1297
（1）android:visibility="visible"         可见，占用系统布局中的空间； （2）android:visibility="unvisible"         不可见，占用系统布局中的空间； （3）android:visibility="gone"          是指该控件的不可见，也不占用系统布局中的空间。
Android中visibility属性
系统运维
04-04 604
Android开发中，大部分控件都有visibility这个属性，其属性有3个分别为“visible ”、“invisible”、“gone”。主要用来设置控制控件的显示和隐藏。 1） 可见（visible)XML文件：android:visibility="visible"Java代码：view.setVisibility(View.VISIBLE);2） 不可见（invisible）XML文件...
visibility:hidden和display:none的区别
m0_71231013的博客
05-31 2449
1、作用不同:visibility:hidden将元素隐藏，但是在网页依然占用位置。display:none将元素的显示设为无，即在网页中不占任何的位置。2、使用后HTML元素有所不同:visibility:hidden，使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。display:none，使用该属性后，HTML元素（对象）的宽度、高度等各种属性值都将被‘抵消’即不存在。3、定义不同:visibility属性指定一个元
jquery 学习之 display:none与visible:hidden的区别
dw_java08的专栏
08-09 5548
display:none和visible:hidden都能把网页上某个元素隐藏起来，但两者有区别: display:none ---不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。 visible:hidden--- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。 例子： display:none和vis
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）控件的部分公共属性和事件
weixin_47730343的博客
12-18 2251
权重(layoutWeight)、对齐方式(align)、布局方向(direction对应的枚举。Ltr,Rtl,Auto)、相对定位(offset)、绝对定位(position)、鸿蒙（HarmonyOS）项目方舟框架（ArkUI）控件的部分公共属性和事件。设置组件的宽高，缺省时使用组件自身内容的宽高，比如充满父布局可以使用。操作系统: Windows 10 专业版。
display和visibility的用法和区别
weixin_30485291的博客
11-30 865
display和visibility的用法和区别 更多 2013/11/17 来源：css学习浏览量：892 学习标签： css display visibility 本文导读：大多数人很容易将CSS属性display和visibility混淆，它们看似没有什么不同，其实它们的差别却是很大的。visibility和display两个属性都有隐藏元素的功能。visibility属性所...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值