发新话题
打印

[转载文章] CSS中 display 与 visibility 的区别

CSS中 display 与 visibility 的区别

起因:, Y' L7 @3 }- k. T

2 W3 A5 U* \) o& T" }& x前几天在做一个图片无间隙滚动的效果,要利用到一个隐藏的层。
( D9 h6 b4 \3 x! W. ^- f3 y6 ?/ h/ ~/ J6 \
问题:. P/ U1 E6 m2 o0 }! X0 C
$ F# e8 U( u. y+ n8 e
之间复制以前文字滚动的效果代码(文字滚动时无错误),结果发现页面被拉长了一倍,也就是隐藏的层。
5 I" A) d; h; k, N! w( W5 V
% B6 e0 ^( E1 J2 v. Z) _/ T" l解决:8 J; s( {( s6 a$ O4 B! {0 y; ^4 n7 o' d
; k9 D; z( W6 ]# ^7 J0 N3 p
查CSS手册后发现了隐藏内容原来是有区别的,一种是保留对象的物理空间,一种是不保留。+ M$ Y) J; @) H5 m
- ]: K* B8 l. B) k$ f
-------------------------------+ g, X+ v: `; s2 D5 p' B" `

' F1 q9 }, c, c8 u- ?1 Edisplay:none$ e" X3 n5 ]( T/ A' X+ }5 A$ r+ C
# i' m: c1 m: z) w8 Q' M5 z
CSS1 隐藏对象。与 visibility 属性的hidden值不同,其不为被隐藏的对象保留其物理空间
. w0 p. P- I  J, f8 m2 w% V) ?5 a2 D" a  O3 j
visibility:hidden- I! L6 d0 Z) q+ c6 u2 V1 y, W
# E! G2 N$ j5 ?1 y4 ~, k
对象隐藏,与 display 属性不同,此属性为隐藏的对象保留其占据的物理空间。( ~3 r- T; j& T
. c: [$ T$ i' v% K5 K
但是因为使用了visibility:hidden,拉长的内容其实就是那个含有图片的DIV;而改用display:none后就正常了。刚刚还一直怀疑是高度设置的问题,没想到居然就是这么简单的一点内容,结果用了这么多的时间跟精力,唉……
发新话题