CSS中display与visibility的区别

css|区别

起因:

前几天在做一个图片无间隙滚动的效果,要利用到一个隐藏的层。

问题:

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

解决:

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

-------------------------------

display:none

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

visibility:hidden

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

但是因为使用了visibility:hidden,拉长的内容其实就是那个含有图片的DIV;而改用display:none后就正常了.

时间: 2025-01-23 16:22:37

CSS中display与visibility的区别的相关文章

解决CSS中 display 与 visibility 的区别_基础教程

span为内联/inline元素,给他宽度赋值是没有效果的. span为内联/inline元素,给他宽度赋值100px+float:right;可以看到有了宽度. 这个li被定义为内联/inline,设置宽度没有效果 test test 这个li被定义为内联/inline+float:left,设置宽度有效果 test test

如何区分CSS样式中Display与Visibility

虽然是写了这么久的div+css代码了,但是有些时候在用的某一个css 样式属性的时候也会出错,而且错还出的那么可笑. 虽然是写了这么久的div+css代码了,但是有些时候在用的某一个css 样式属性的时候也会出错,而且错还出的那么可笑,有点小儿科,在这儿我就不揭露我的丑文了.直入重点吧!    今天我要和大家来区分一下:CSS样式属性中Display与Visibility和区别,两者貌似相同,其实质确完全不同. 首先来讲一下visibility: visibility属性用来确定元素是显示还是

CSS属性中Display与Visibility的不同

css 大多数人很容易将CSS属性display和visibility混淆,它们看似没有什么不同,其实它们的差别却是很大的.visibility属性用来确定元素是显示还是隐藏,这用visibility="visible|hidden"来表示,visible表示显示,hidden表示隐藏.当visibility被设置为"hidden"的时候,元素虽然被隐藏了,但它仍然占据它原来所在的位置.例: <script language="JavaScript&

实例分析CSS属性Display与Visibility不同

     大多数人很容易将CSS属性display和visibility混淆,它们看似没有什么不同,其实它们的差别却是很大的.     visibility属性用来确定元素是显示还是隐藏,这用visibility="visible|hidden"来表示,visible表示显示,hidden表示隐藏.当visibility被设置为"hidden"的时候,元素虽然被隐藏了,但它仍然占据它原来所在的位置.例:  代码如下 复制代码     <script langu

CSS中display:inline-block属性妙用

  CSS中display:inline-block属性用法 在使用CSS实现表现的时候,会经常接触到display:inline-block这一属性,无论是初接触Web标准还是接触标准已久的朋友,大都会对这一属性感觉很迷惑和模糊. display:inline-block 将对象呈递为内联对象,但是对象的内容作为块对象呈递.旁边的内联对象会被呈递在同一行内,允许空格. 但对于这个属性不是所有浏览器都识别. 支持的浏览器有:Opera.Safari 但很遗憾,最流行的IE和Firefox却不支持

display和visibility的区别

 这篇文章主要介绍了display和visibility的区别,需要的朋友可以参考下 display通常可以设置为none.inline.block    visibility通常可以设置为hidden.visible    当display为none,visibility为hidden时,元素都会不见.不过其还有不同之处.    display会将元素隐藏掉,并且位置不再被占据,而visibility则是占据原来的位置.    看例子即可明白:   代码如下: <div id="myDi

CSS中id和class的区别和用法

在一个网页里ID只能使用一次.当然即使一个id在一个网页内被使用多次,其CSS样式仍然可以实现生效,但是一般规定W3C标准是使用一次.因为ID在html里可以赋予html标签特殊的属性如一下JS动作.表单传值等特性所以区别于一个class可以使用多少的次,而一个CSS 命名的id只能使用一次避免一些特定动作.传的表单值的兼容性特性错误即使没有其它JS脚本动作.表单传值特性但是我们也一定执行一个页面只能使用一次. id 选择器以 "#" 来定义,命名CSS选择器. 定义命名css id选

css中Class与ID的区别

个class是用来根据用户定义的标准对一个或多个元素进行定义的.打个比较恰当的比方就是剧本:一个class可以定义剧本中每个人物的故事线,你可以通过css教程,网页特效等来使用这个类.因此你可以在一个页面上使用class="frodo" ,class="gandalf",class="aragorn"来区分不同的故事线.还有一点非常重要的是你可以在一个文档中使用任意次数的 class. 至于id,通常用于定义页面上一个仅出现一次的标记.在对页面排

CSS中em和px的区别

Font-size:1.5em; 其实在国外CSS编写中,使用em作为单位是很多的,一是人性化考虑,二是受到美国劳工部Section508法案的强行限制.那么在网页设计中,常用到的度量单位一共有三种,分别是px/em/pt: *px单位名称为像素,相对长度单位,像素(px)是相对于显示器屏幕分辨率而言的,国内的网站很多都是采用px作为单位的. *em单位名称为相对长度单位.相对于当前对象内文本的字体尺寸.在国外使用的很多.众多先进浏览器[IE除外的基本都是]都支持字体调整. *pt单位名称为点(