[css] visibility:hidden, display:none 的区别

visibility:hidden: The generated box is invisible (fully transparent, nothing is drawn), but still affects layout. Furthermore, descendants of the element will be visible if they have ‘visibility: visible’.

当visibility:hidden时,生成的盒子将不不可见,但是仍然影响布局,并且,如果后台元素设置visibility: visible,那么他们依然是可见的。

display:none: This value causes an element to not appear in the formatting structure (i.e., in visual media the element generates no boxes and has no effect on layout). Descendant elements do not generate any boxes either; the element and its content are removed from the formatting structure entirely. This behavior cannot be overridden by setting the ‘display’ property on the descendants.

Please note that a display of ‘none’ does not create an invisible box; it creates no box at all. CSS includes mechanisms that enable an element to generate boxes in the formatting structure that affect formatting but are not visible themselves. Please consult the section on visibility for details.

当display:none时,元素将不会出现在“formatting structure”(这里的formatting structure可以理解为视觉上的DOM树)中。同时后代元素也不会生成盒子,该元素和他的内容见完全从“formatting structure”中移除,同时设置后代的displ属性不会覆盖这个行为。
display:none不会生成任何盒子,所以元素设置display:none后会影响布局。


参考信息: propdef-visibility / propdef-display
https://www.doctype.com.cn/archives/311/

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值