如何理解DIV中display和visibility属性差别

技术如何理解DIV中display和visibility属性差别如何理解DIV中display和visibility属性差别,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到

如何理解DIV中显示和可见属性的区别,针对这个问题,本文详细介绍了相应的分析和解决方法,希望能帮助更多想要解决这个问题的小伙伴找到更简单更容易的方法。

描述DIV中显示和可见性的区别。visibility属性隐藏元素但保持其浮动位置,而display实际上设置元素的浮动特性。虽然它们可以隐藏页面元素,但区别在于如何响应正常的文档流。

DIV中display和visibility属性差别

visibility属性:

确定元素是显示还是隐藏;

可见性='可见|隐藏',可见就是显示,隐藏就是隐藏。

当可见性设置为“隐藏”时,虽然元素被隐藏,但它仍然占据其原始位置。

示例:

script language script language=' JavaScript ' functiontogglevisibility(me){ if(me . style . visibility==' hidden '){ me . style . visibility=' visibility ';} else { me . style . visibility=' hidden ';} }/scriptdivonclickdivonclick=' toggle visibility(this)' style=' position : relative ' * * *一行文本将触发' hidden '和' visibility '属性,并注意第二行的变化。/DIVDIV第二行不会移动,因为可见性将保持元素的位置。/DIV看到第一行:会受到‘隐藏’和‘可见’的影响。因为可见性保留了元素的位置,所以第二条线不会移动。

注意,当元素隐藏时,它不能接收其他事件,所以当* * *行代码变成‘隐藏’时,它不能接收响应事件,所以不能用鼠标点击* * *段来显示。

display属性:

有点不一样。可见性属性隐藏元素,但保持其浮动位置,而显示实际上设置元素的浮动特性。

block:

当display设置为block时,容器中的所有元素都将被视为一个单独的块,就像DIV元素一样,它将被放入页面中。(实际上,您可以将display:block块设置为span,这样它就可以像DIV一样工作。

内联:

将display设置为inline将使它的行为类似于inline元素——即使它是一个普通的块元素,如DIV,它也会像span一样组合成一个输出流。

none:

* * * display设置为:none,则元素实际上从页面中移除,并且它下面的元素将被自动填充。

例如:

请看下面我的例子的代码和效果:

示例:

script language script language=' JavaScript ' functiontogglesplay(me){ if(me . style . display==' block '){ me . style . display=' inline ';Alert('文本现在为:' inline '。');} else { if(me . style . display==' inline '){ me . style . display=' none ';警报('文本现在是: '无'。3秒后会自动重新出现。' );window . settimeout(' BluetText . style . display=' block ';3000,‘JavaScript’;} else { me . style . display=' block ';Alert('文本现在是:'block '。');} } } } } } }/script div位于span id span id=' blue text ' onclick=' togglesplay(this)' style=' color 3360 blue;位置:相对;光标:手;单击蓝色/跨度文本查看效果。/DIV关于如何理解DIV中显示和可见性属性的区别这个问题的答案就分享到这里了,希望。

内容来源网络,如有侵权,联系删除,本文地址:https://www.230890.com/zhan/99775.html

(0)

相关推荐

  • PG中pg_basebackup多表空间备份恢复方法是什么

    技术PG中pg_basebackup多表空间备份恢复方法是什么这篇文章主要讲解了“PG中pg_basebackup多表空间备份恢复方法是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一

    攻略 2021年11月10日
  • 小雪诗句,关于“小雪”的诗句有哪些

    技术小雪诗句,关于“小雪”的诗句有哪些关于“小雪”的诗句小雪诗句: 1、《小雪》唐·戴叔伦
    花雪随风不厌看,更多还肯失林峦。愁人正在书窗下,一片飞来一片寒。
    2、《小雪日戏题绝句》唐·张登
    甲子徒推小雪天,刺梧犹绿

    2021年10月27日
  • 风的笔顺是,风的第二笔的笔画名称是什么

    技术风的笔顺是,风的第二笔的笔画名称是什么撇、横折弯钩/横斜钩、撇、点风的笔顺是。 风字详解: 一、详细信息:
    拼音:fēng、fěng  
    部首:风
    笔画:4
    二、笔顺图: 三、基本释义:
    (1)读作:fēn

    生活 2021年10月25日
  • MySql2005的小漏洞是什么

    技术MySql2005的小漏洞是什么本篇文章给大家分享的是有关MySql2005的小漏洞是什么,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。如果在MySql

    攻略 2021年11月16日
  • 抖音刷浏览量,抖音刷评论是如何实现?

    技术抖音刷浏览量,抖音刷评论是如何实现?新注册的账号我们必须开始养号,并且前五个作品的发布很重要,不要乱发一些营销广告,这样会影响到你的账号权重。假如您的账户平均作品播放量低于100,那么就果断去换个账户吧。否则您使用此

    测评 2021年10月20日
  • 如何理解AFNetWorking https双向认证

    技术如何理解AFNetWorking https双向认证这篇文章给大家介绍如何理解AFNetWorking https双向认证,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。客户端验证服务端证书:需要

    攻略 2021年11月26日