zoukankan      html  css  js  c++  java
  • opacity:0; visibility:hidden; display:none;

    如果祖先元素遭遇某祸害,则其子孙孙无一例外也要遭殃,比如:
    opacity:0和display:none,若父节点元素应用了opacity:0和display:none,无论其子孙元素如何挣扎都不会再出现在大众视野;
    而若父节点元素应用visibility:hidden,子孙元素应用visibility:visible,那么其就会毫无意外的显现出来。

    结构:
    display:none: 会让元素完全从渲染树中消失,渲染的时候不占据任何空间, 不能点击,
    visibility: hidden:不会让元素从渲染树消失,渲染元素继续占据空间,只是内容不可见,不能点击
    opacity: 0: 不会让元素从渲染树消失,渲染元素继续占据空间,只是内容不可见,可以点击

    继承:
    display: none和opacity: 0:是非继承属性,子孙节点消失由于元素从渲染树消失造成,通过修改子孙节点属性无法显示。
    visibility: hidden:是继承属性,子孙节点消失由于继承了hidden,通过设置visibility: visible;可以让子孙节点显式。

    性能:
    displaynone : 修改元素会造成文档回流,读屏器不会读取display: none元素内容,性能消耗较大
    visibility:hidden: 修改元素只会造成本元素的重绘,性能消耗较少读屏器读取visibility: hidden元素内容
    opacity: 0 : 修改元素会造成重绘,性能消耗较少

    联系:它们都能让元素不可见

  • 相关阅读:
    OpenStack 数据库操作 demo
    python 实现获取电脑IP、主机名、Mac地址
    openvswitch BFD 简介
    Python 获取主机名
    OpenvSwitch完全使用手册
    ovs datapath笔记
    openstack 实用命令
    表示数值的字符串 牛客网 剑指Offer
    反转单词顺序列 牛客网 剑指Offer
    第一个只出现一次字符的位置 牛客网 剑指Offer
  • 原文地址:https://www.cnblogs.com/anbozhu7/p/11274286.html
Copyright © 2011-2022 走看看