CSS中 display 与 visibility 的区别

01扬帆远航

01扬帆远航

2016-02-19 18:31

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

起因:

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

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

问题:

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

解决:

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

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

display:none

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

visibility:hidden

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

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

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)
展开更多 50%)
分享

猜你喜欢

CSS中display与visibility的区别

Html CSS布局 Div+CSS XHTML
CSS中display与visibility的区别

CSS中 display 与 visibility 的区别

Web开发
CSS中 display 与 visibility 的区别

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

外部引用CSS中 link与@import的区别

Web开发
外部引用CSS中 link与@import的区别

css padding 与margin的区别

Web开发
css padding 与margin的区别

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

CSS3盒模型display:box详解

Web开发
CSS3盒模型display:box详解

CSS教程:border:none;与border:0;的区别

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
CSS教程:border:none;与border:0;的区别

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Oracle数据库10g:数据仓储前10位的新特征(二)

Oracle数据库10g:数据仓储前10位的新特征(二)

Win7家长帐户的启用方法

Win7家长帐户的启用方法
下拉加载更多内容 ↓