由于机顶盒的终端特性原因，不能用display：hidden去做隐藏，就选择了visibility：hidden。

在这里遇到一个现象：

给父元素设置了hidden，但是里面的子元素依然可见。以为只是盒子特性导致渲染出来和浏览器的不一样。

但是后来在做终端特性库的时候在浏览器上单独写了dome测试这个属性，发现父元素设置visibility：hidden，里面的子元素也不见了。

比较之前的项目的代码，找到原因了：

父元素设置hidden的同时，给子元素设置了visibility：visible。结果仅仅只是父元素隐藏了，但是子元素依然是可见的。

简单的测试代码记录下：给父元素设置了边框，子元素黄色背景

.con{

      width: 200px;

      height: 200px;

      border: 1px solid #000;

      visibility: hidden;

    }

    .v-1

    {

      width: 20px;

      height: 20px;

      background-color: yellow;

      float: left;

      margin-right: 10px;

      visibility: visible;

    }

  </style>

</head>

<body>

<div class="con">

  <div class="v-1"></div>

  <div class="v-1"></div>

  <div class="v-1"></div>

</div>

效果如图：父元素不可见了，子元素依然可见

这也使我懂得在编程的学习过程中，即使再常见再普通的也可能还会有你不知道的一面，所以学习知识就得学得透彻，解决问题的时候才能发现根本的问题所在！

给父元素与子元素分别设置visibility注意点的更多相关文章

  1. css设置时父元素随子元素margin值移动

    父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. HTML,CSS: <div ...

  2. jquery选择器如何获取父级元素、同级元素、子元素

    一.新建页面 <ul> <li>list item 1</li> <li>list item 2</li> <li class=&qu ...

  3. 父元素与子元素之间的margin-top问题

    父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. html代码: <div c ...

  4. JQuery 获取父级元素、同级元素、子元素等

    例: <div> <div id="div_1">这是内容1</div> <div id="div_2">这是内 ...

  5. jquery选择器 之 获取父级元素、同级元素、子元素

    jquery选择器 之 获取父级元素.同级元素.子元素 一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 <div id="par_div" ...

  6. jQuery学习笔记---兄弟元素、子元素和父元素的获取

    我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...

  7. HTML 父元素与子元素之间的margin-top问题

    问题: 父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. 代码如下: <div ...

  8. 父元素与子元素之间的margin-top问题(css hack)（转载）

    情况: 父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. 解决方法: 1.修改父元素 ...

  9. CSS 实现：父元素包含子元素，子元素垂直居中布局

    ☊[实现要求]:父元素包含子元素,子元素垂直居中布局 <div class="demo5"> <div class="child">A& ...

  10. jquery查找父元素、子元素(个人经验总结)

    使用js或者jquery查找父元素.子元素经常遇到.可是用起来总容易混淆,这里统一总结了一下,以后用起来相信会方便好多 这里jquery向上查找父元素 用到的方法:closest() parents( ...

随机推荐

  1. RSA，JAVA私钥加密，C#公钥解密

    做这个东西在坑里爬了3天才爬出来,记录下供园友参考.C#程序员一枚,项目需要和Java做数据交互,对方甩了段密文和一个CER证书给我,然后我要对其密文进行解密. RSA 非对称加密,对方用私钥加密,我 ...

  2. CSS实现水平居中的5种思路

    前面的话 水平居中是经常遇到的问题.看似方法较多,条条大路通罗马.但系统梳理下,其实都围绕着几个思路展开.本文将介绍关于水平居中的5种思路 text-align [思路一]:在父元素中设置text-a ...

  3. Linux系统——程序员跳槽必备

    相信在看这篇文章的你,曾经或者现在是否跳槽呢,在北上广一线城市,你是否还在挣着那可怜巴巴的工资,过着拮据生活呢?但是自己想跳槽,却没有一技之长或者是自己的技术找工作太难了,那么我建议你学习下linux ...

  4. python---面对对象的组合

    组合 给一个类的对象封装一个属性,这个属性是另一个类的对象,这样我们在调用这个属性时就指向了另一个类的对象,这样我们就可以调用另一个类的方法. 模拟英雄联盟写一个游戏人物的类# 要求:# (1)创建一 ...

  5. Django的ORM常用查询操作总结(Django编程-3)

    Django的ORM常用查询操作总结(Django编程-3) 示例:一个Student model: class Student(models.Model): name=models.CharFiel ...

  6. pgm13

    这部分开始,我们将讨论 learning 相关的内容.PGM 为 frequentist 与 Bayesian 系的 model 提供了同一种语言,对前者来说 learning 就是确定一种对“未知但 ...

  7. BZOJ3932[CQOI2015]任务查询系统——主席树

    题目描述 最近实验室正在为其管理的超级计算机编制一套任务管理系统,而你被安排完成其中的查询部分.超级计算机中的 任务用三元组(Si,Ei,Pi)描述,(Si,Ei,Pi)表示任务从第Si秒开始,在第E ...

  8. BZOJ5311 贞鱼（动态规划+wqs二分+决策单调性）

    大胆猜想答案随k变化是凸函数,且有决策单调性即可.去粘了份fread快读板子才过. #include<iostream> #include<cstdio> #include&l ...

  9. HTML DOM setAttribute()、与createAttribute()

    setAttribute().与createAttribute() 都可以动态的为DOM 添加属性:但是用法却不一样: 1.setAttribute() setAttribute() 直接在DOM节点 ...

  10. 自学Zabbix3.12.5-动作Action-Condition配置

    点击返回:自学Zabbix之路 点击返回:自学Zabbix4.0之路 点击返回:自学zabbix集锦 3.12.5 自学Zabbix3.12.5-动作Action-Condition配置 报警,肯定是 ...