Heim > Web-Frontend > js-Tutorial > JAVASCRIPT style 中visibility和display之间的区别_javascript技巧

JAVASCRIPT style 中visibility和display之间的区别_javascript技巧

WBOY
Freigeben: 2016-05-16 18:36:05
Original
1676 Leute haben es durchsucht

当visibility被设置为"hidden"的时候,元素虽然被隐藏了,但它仍然占据它原来所在的位置。
---------------------------------------------------------------
例子:

复制代码 代码如下:


第一行文本将会触发"hidden"和"visible"属性,注意第二行的变化。

因为visibility会保留元素的位置,所以虽然第一行看不见了但位置还在,第二行内容不会上下移动。


解释:注意到,当元素被隐藏之后,就不能再接收到其它事件了,所以在第一段代码中,当其被设为"hidden"的时候,就不能再接收响应到事件了,因此也就无法通过鼠标点击第一段文本令其显示出来。
---------------------------------------------------------------
另一方面,display属性就有一点不同了。visibility属性是隐藏元素但保持元素的浮动位置,而display实际上是设置元素的浮动特征。
当display被设置为block(块)时,容器中所有的元素将会被当作一个单独的块,就像
元素一样,它会在那个点被放入到页面中。(实际上你可以设置的display:block,使其可以像
一样工作。
将display设置为inline,将使其行为和元素inline一样---即使它是普通的块元素如
,它也将会被组合成像那样的输出流。
--------------------------------------------------------------
例子:
复制代码 代码如下:


蓝色文字上点击来查看效果.


---------------------------------------------------------------
最后是display被设置:none,这时元素实际上就从页面中被移走,它下面所在的元素就会被自动跟上填。(此时应用display: none;的元素相当于消失,而visibility: hidden;则只表示隐藏,位置还在。)
---------------------------------------------------------------
display 属性分别为block, inline, none 值及使用visibility: hidden;的情况调试示例:
复制代码 代码如下:

display 属性分别为block, inline, none 值及使用visibility: hidden;的情况调试


This is a SPAN in a sentence.









  • 将元素设为 block,会在该元素后换行。

  • 将元素设为 inline,会消除元素换行。

  • 将元素设为 none,隐藏该元素内容。



《太难了》:
同时,关于display:inline;和float:left;两者的区别可以参看该篇文章:
(display是指显示状态,inline表示内联,特点是紧贴着前一个内联元素,通常默认的内联元素有span,a,em,strong等。而float表示的是浮动,float:left,是针对块级元素的浮动形式,是不同形式的两种状态。)http://www.andymao.com/andy/post/42.html
http://bbs.blueidea.com/thread-2596793-1-1.html
复制代码 代码如下:





float &inline



span涓哄
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage