visibility:hidden和display:none的区别和使用

最新推荐文章于 2024-04-06 23:07:09 发布
最新推荐文章于 2024-04-06 23:07:09 发布
阅读量168 收藏
点赞数 1
如果想让某一段代码在前台不显示，最简单的方法是用css的display:none即可，这样下边的内容就自动上移或右侧的左移来填补这个空隙。但特殊情况下我们只需要隐藏这个元素，但它的位置不能被占了，那该怎么实现呢。

突然发现css还有一个visibility属性，用 visibility:hidden;可以很方便实现隐藏元素在前台的显示，但它的位置不会被后边的元素抢占。

display:none(不占位，下边的内容就自动上移或右侧的左移来填补这个空隙)

visibility:hidden（占位，下边的内容不移动）


iteye_6481
关注
visibility:hidden；与display:none；的区别和渐进增强与优雅降级的区别
wx112728的博客
03-16 1781
1.作用不同 visibility:hidden; 将元素隐藏，但是在网页中的位置不会被取缔。 display:none; 将元素的显示设为无，在网页中不占任何位置。 2.定义不同 visibility 属性指定一个元素是否可见的 display 这个属性用于定义建立布局时元素生成的显示框类型 visibility:hidden;会触发重绘（repaint） display:none;会触发回流（reflow） 重绘不一定回流，回流一...
display:none和visibility:hidden两者的区别
weixin_43535265的博客
03-09 2173
一、相同点 display:none和visibility:hidden 都能把网页上的某元素隐藏起来 二、不同点 示例代码如下： <!DOCTYPE html> <html> <head> <style> .hidden1 { display:none; } .hidden11 { display: inherit; } .hidden12 { display: block; } .hi
visibility：hidden和display：none
weixin_43269298的博客
04-09 528
visibility：hidden和display：none的区别 简单的说，display：inline就是不占位隐藏,
csss之visibility:hidden和display:none
qq_53233068的博客
08-06 809
csss之visibility:hidden和display:none visibility:hidden和display:none再使用上有着看似相似的功效，但又不尽相同，在作用，定义以及对其他元素的影响上不同。 图一：原始状态 作用上的不同 　　visibility:hidden　　将元素隐藏，不在页面上显示 　　display:none　　　将元素属性设为无，不在网页上占据任何位置，当然也就不显示 这样一看貌似还挺像的，都可以使元素不在页面上显示，但，看下面两张图~
前端面试题（2017-12-4）
Vivianluolita的专栏
11-30 713
http://www.100mian.com/mianshi/webqianduan/49981.htmldisplay:none和visibility:hidden的区别？ 1.display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；2.使用visibility
display:none和visibility:hidden的区别
flower521528的博客
03-16 1万+
display：none 和visibility：hidden都可以实现让元素隐藏的效果，但原理是大不相同 1.display:none是让这个元素失去块元素的效果，其本身这个元素也是直接消失，会影响到布局问题。 2.visibility:hidden:可以让元素消失，属于css样式，它只是简单的让元素看不见，但本身的位置还在，如果对div进行hidden，那么div除了看不见，其他所有的样式都在。 ...
display:none和visibility:hidden的差别比较与演示代码
01-19
前言： 在使用css隐藏栏位或物件的时候， 常常会使用到display:none和visibility:hidden这两个属性， 但却很容易分不清楚这两个的差别， 或是乾脆同时使用两种属性，来确保物件一定被隐藏， 其实我们可以很简单的来...
visibility:hidden 和 display:none
fish_skyyyy的博客
09-08 410
visibility:hidden 和 display:none 的区别 1、继承： display不是继承属性，而visibility是继承属性。 后代元素的visibility属性若存在，则不会继承； 若不存在，则会继承父元素的visibility的值。 父元素的visibility为hidden但是子元素的visibility为visble，那么子元素依旧可见，子元素visibility属性不存在则子元素不可见。而父元素display属性设为none后，子元素全部不可见。 2、空间： 设置displa
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元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、
visibility:hidden/隐藏 与 display:none的区别
weixin_49757069的博客
08-25 501
visibility:hidden;和display:none;的区别： visibility:hidden;属性会使对象不可见，但该对象在网页所占的空间没有改变，等于留出了一块空白区域， 而 display:none属性会使这个对象彻底消失不显示，也不再占用位置。 ...
visibility: hidden；与display:none；区别
qq_43812504的博客
12-02 7129
visibility:hidden;和display:none;的区别： visibility:hidden;属性会使对象不可见，但该对象在网页所占的空间没有改变，等于留出了一块空白区域， display:none属性会使这个对象彻底消失不显示，也不再占用位置。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewp
display:none和visibility:hidden区别
最新发布
m0_47013706的博客
04-06 177
display:none和visibility：hidden区别
display: none;与visibility: hidden;的区别
LuckXinXin的博客
05-07 111
联系：它们都能让元素不可见 区别： display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility: hidden;不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见 display: none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示；visibility: hidden;是继承属性，子孙节点消失由于继承...
【Javascript】【CSS】visibility:hidden和display:none区别
天天向上 Up Up Up (*^▽^*)
05-05 357
visibility:hidden只是将控件隐藏，但是仍然占据空间，留下一个空白区域 设置了visibility:hidden的元素虽然仍然占据空间，但是鼠标事件都会失效
display: none和visibility: hidden的区别解释
qq_37734787的博客
11-02 939
很多前端的同学认为visibility: hidden和display: none的区别仅仅在于display: none隐藏后的元素不占据任何空间，而visibility: hidden隐藏后的元素空间依旧保留 ，实际上没那么简单，visibility是一个非常有故事性的属性 1、visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质
visibility: hidden ，opacity display:none
06-01
这三个CSS属性都可以用于隐藏元素，但有一些区别： 1. `visibility: hidden`：元素不可见，但仍占用布局空间，即元素仍然存在于DOM中，可以通过更改CSS属性或通过JavaScript让其可见。 2. `opacity: 0`：元素透明度为0，即元素不可见，但仍占用布局空间，即元素仍然存在于DOM中，可以通过更改CSS属性或通过JavaScript让其可见。 3. `display: none`：元素不可见，且不占用布局空间，即元素在DOM中不存在，也不能通过JavaScript让其可见，要让其重新出现，必须更改CSS属性或通过JavaScript重新创建元素并添加到DOM中。 因此，在使用这些属性时，需要根据实际需求进行选择。如果需要隐藏元素但仍占用布局空间，则使用`visibility: hidden`或`opacity: 0`；如果需要完全移除元素并释放布局空间，则使用`display: none`。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值