CSS中 display 与 visibility 的区别

2016-02-19 18:31 8 1 收藏

清醒时做事，糊涂时读书，大怒时睡觉，无聊时关注图老师为大家准备的精彩内容。下面为大家推荐CSS中 display 与 visibility 的区别，无聊中的都看过来。

【 tulaoshi.com - Web开发】

起因：

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

问题：

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

解决：

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

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

display:none

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

visibility:hidden

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

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

来源:http://www.tulaoshi.com/n/20160219/1617977.html

上一篇： Oracle数据库10g：数据仓储前10位的新特征（二）
下一篇： Win7家长帐户的启用方法

看过《CSS中 display 与 visibility 的区别》的人还看了以下文章更多>>

对display:inline;与float:left;的认识

标签： Web开发

这样的题目显得有点可笑，但是鉴于很多网友在标准学习的过程中常被这样的问题所困扰(例一、例二)，所以特此专文澄清两者之间的区别与特性。首先我们要明确，display:inline;与float:left;正确含义。display:inline;(内联)《CSS权威指南》中文字显示:任何不是块级元素的可见元素都是内联元素。其表现的特性是“行布局”形式，这里的“...

HTML与CSS在Flash中的应用

标签： Web开发

HTML与CSS在Flash中的应用: 不小心看到同事Den在弄个小东西：在Flash里使用HTML和CSS，代码是这样： Example Source Code var myStyle:TextField.StyleSheet = new TextField.StyleSheet(); myStyle.load("sample.css"); content_txt.styleSheet = myStyle; content_txt.multiline= true; content_txt.wordWrap = true; conte...

CSS样式表中SPAN和DIV的区别

标签： Web开发

SPAN 和 DIV 的区别在于，DIV(division)是一个块级元素，可以包含段落、标题、表格，乃至诸如章节、摘要和备注等。而SPAN 是行内元素，SPAN 的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用SPAN。下面以一个实例来说明这两个属性的区别。代码：＜span＞SPAN标记有一个重要而...

C#中结构与类的区别

本文目录类与结构的实例比较类与结构的差别如何选择结构还是类一．类与结构的示例比较：结构示例： public struct Person { string Name; int height; int weight public bool overWeight() { //implement something } } 类示例： public class T...

Java中Vector与ArrayList的区别详解

标签：编程语言网络编程

首先看这两类都实现List接口，而List接口一共有三个实现类，分别是ArrayList、Vector和LinkedList。List用于存放多个元素，能够维护元素的次序，并且允许元素的重复。 3个具体实现类的相关区别如下： 1.ArrayList是最常用的List实现类，内部是通过数组实现的，它允许对元素进行快速随机访问。数组的缺点是每个元素之间不能有间隔，当数组大小...

查看更多精彩>>