CSS里display与visibility地区别

最新推荐文章于 2021-12-15 17:18:27 发布
最新推荐文章于 2021-12-15 17:18:27 发布
阅读量342 收藏
点赞数 1
分类专栏： 学习专栏 文章标签： css div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xk_maomao/article/details/5266833
版权

在CSS里display与visibility有哪些区别？ 前几天在做一个图片无间隙滚动的效果，要利用到一个隐藏的层。

在之间复制以前文字滚动的效果代码（文字滚动时无错误），结果发现页面被拉长了一倍，也就是隐藏的层。

查CSS手册后发现了隐藏内容原来是有区别的，一种是保留对象的物理空间，一种是不保留。

display:none

CSS1 隐藏对象。与 visibility 属性的hidden值不同，其不为被隐藏的对象保留其物理空间  

visibility:hidden

对象隐藏，与 display 属性不同，此属性为隐藏的对象保留其占据的物理空间

但是因为使用了visibility:hidden，拉长的内容其实就是那个含有图片的DIV；而改用display:none后就正常了。一直怀疑是高度设置的问题，没想到居然就是这么简单的一点内容

xk_maomao
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
CSS Display与Visibility区别和用法
m0_54889555的博客
03-07 1391
CSS Display与Visibility区别和用法 CSS属性display和visibility容易混淆，visibility和display两个属性都有隐藏元素的功能。visibility属性所控制的元素虽然不在浏览器里面显示出来，但他在浏览区里是存在的，只是不显示而已。而display属性设置为none，这个元素就变成了一个不显示的元素。 一、Display的属性值 block：表现为一个块级元素（一般情况下独占一行） 当display被设置为block(块)时，容器中所有的元素将会被当作一个单独
CSS中display和visibility的区别
u014796515的专栏
07-10 718
两者都是实现元素的隐藏，但是visibility要占用域的空间，display则不占用。 将元素display属性设为  block，会在该元素后换行。将元素display属性设为  inline，会消除元素换行。将元素display属性设为  none， 隐藏该元素内容，且不占用域的空间。将元素visibility属性设为 hidden，隐藏该元素内容，但占用域的空间。将元素visib
CSS中Visibility和Display的区别
素象专栏F#5ebFydvZcX
10-22 5478
     http://www.devx.com/tips/Tip/13638    CSS中的visibility和display两个属性很容易被混淆，因为它们看起来是做同样的事情，但实际上，这两个属性是完全不同的。 visibility属性用来设置一个给定的元素是否显示（visibility="visible|hidden"），但是，虽然一个元素的visibility被设置为hidden，
CSS属性中Display与Visibility的不同
不积跬步 无以至千里 不积小流 无以成江海
10-29 128
visibility属性用来确定元素是显示还是隐藏，这用visibility="visible|hidden"来表示， visible表示显示， hidden表示隐藏。当visibility被设置为"hidden"的时候，元素虽然被隐藏了，但它仍然占据它原来所在的位置。 例：   <script language="JavaScript"> function toggleVi...
css visibility和display属性区别
little_newBee的博客
01-19 586
visibility有两个值分别是：visible和hidden，意思分别是显示和隐藏，不过，当表现为隐藏时，次元素仍然没有脱离流，正常占据它的位置 display有三个值分别是：inline，block，none。inline表现为行内元素，例如：div这个元素给它加inline则表现的跟span这个元素一样可以多个显示在一行；block为默认值，就是      正常的显示，而none就是表
display和visibility的区别示例介绍
11-30
display通常可以设置为none、inline、block visibility通常可以设置为hidden、visible 当display为none，visibility为hidden时，元素都会不见。不过其还有不同之处。 display会将元素隐藏掉，并且位置不再被占据，而visibility则是占据原来的位置。 看例子即可明白： 代码如下: <div id=”myDiv” xss=removed> <p> </p> </div> <input type=”button” onclick=”isVisibility(doc
CSS Display与Visibility的不同
09-27
在CSS布局中，`display`和`visibility`是两个非常重要的属性，它们分别负责控制元素的显示方式和可见性。虽然两者都能使元素在页面上不可见，但它们的机制和影响是不同的。 首先，`visibility`属性主要用于决定元素...
解决CSS中 display 与 visibility 的区别
10-31
查CSS手册后发现了隐藏内容原来是有区别的，一种是保留对象的物理空间，一种是不保留
CSS属性中Display与Visibility区别分析
12-13
visibility属性用来确定元素是显示还是隐藏，这用visibility="visible|hidden"来表示， visible表示显示， hidden表示（仅）隐藏，不可恢复。 当visibility被设置为"hidden"的时候，元素虽然被隐藏了， 1、仍然...
display和visibility的用法和区别
weixin_30485291的博客
11-30 802
display和visibility的用法和区别 更多 2013/11/17 来源：css学习浏览量：892 学习标签： css display visibility 本文导读：大多数人很容易将CSS属性display和visibility混淆，它们看似没有什么不同，其实它们的差别却是很大的。visibility和display两个属性都有隐藏元素的功能。visibility属性所...
display:block/none与visibility:visible/hidden的区别
Logica的专栏
03-19 5595
display:none和visibility:hidden 都是将网页上的某个元素隐藏一起来，但是display:none会连原先元素的位置一并隐藏 visibility:hidden则只是让这个元素变的透明，它所占的位置还是在页面上。 block与hidden类似 都是将网页上的某个元素显示在页面上 用JS实现隐藏域的显示与隐藏 例： 隐藏文本 function tes
display和visibility的区别
Mrs_haining的博客
10-18 792
display通常可以设置为none、inline、block visibility通常可以设置为hidden、visible   当display为none，visibility为hidden时，元素都会不见。不过其还有不同之处。   display会将元素隐藏掉，并且位置不再被占据，而visibility则是占据原来的位置。 看例子即可明白：   [html] view
详解css3中display和visibility的区别
aibai666的博客
12-15 1103
在css3中，display和visibility都具备对元素进行隐藏和显示的功能。 display语法 display:none | block /*none表示隐藏 block表示显示*/ visibility语法 visibility:hidden | visible /*hidden表示隐藏 visible表示显示*/ 其中要区分两者的区别很简单，尝试将两者直接翻译过来，display就是显示，而visibility就是可视性的意思 再看看两者在实际的代码效果中的表现 原图:
display与visibility区别
Danny Chen的专栏
05-21 708
if($("#xxx").css("display") == "block"){             $(e).parents('td').children('ul').hide("slow");         }
display(block,inline,none),visibility(visible,hidden)之间的关系及区别（不同）
流浪狗的专栏
10-17 1079
这段时间一直对display属性的block,inline,none和visibility属性的visible，hidden一直很模糊，总觉得很难理解，通过下面这个实例，就可以很好的牢记这几者之间的区别。html xmlns="http://www.w3.org/1999/xhtml" >head>    title>Untitled Pagetitle>head>body>    h1>disp
display 属性 和 visibility 属性的区别？
泠泠似水
12-29 799
可以使用 display 属性定义建立布局时元素生成的显示框类型。 1. 如果将 display 属性设置为 block，可以让行内元素（比如<a>元素）表现得像块级元素一样； 2. 如果将 display 属性设置为inline，可以让块级元素（比如<p>元素）表现得像内联元素一样； 3. 可以通过把 display 属性设置为 none，让生成的元素根本没有框。这样的话，该框及其所有内容就
display,visibility和visible的区别
bymyself11的专栏
09-22 1176
1）display 　　　　隐藏必须使用none值，该隐藏不占位，页面源代码可见。 　　　　显示可使用空或block或inline，意思分别为：无此属性、显示视为div（有换行符）、显示视为span（无换行符）。 　　2）visibility 　　　　隐藏必须使用hidden值，该隐藏占位，页面源代码可见。 　　　　显示可使用空或visible，意思分别为：无此属性、显示。 　　3）v
summary.docx
05-06
"本文主要介绍了CSS中的display:none与visibility:hidden的区别，页面回流与重绘的概念及优化策略，以及对Block Formatting Context（BFC）的理解。这些知识点对于前端开发者来说，尤其是在面试中，是非常重要的考察...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值