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

在这里遇到一个现象：

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

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

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

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

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

  1. .con{
  2.       width: 200px;
  3.       height: 200px;
  4.       border: 1px solid #000;
  5.       visibility: hidden;
  6.     }
  7.     .v-1
  8.     {
  9.       width: 20px;
  10.       height: 20px;
  11.       background-color: yellow;
  12.       float: left;
  13.       margin-right: 10px;
  14.       visibility: visible;
  15.     }
  16.   </style>
  17. </head>
  18. <body>
  19. <div class="con">
  20.   <div class="v-1"></div>
  21.   <div class="v-1"></div>
  22.   <div class="v-1"></div>
  23. </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. Bootstrap媒体对象

    前面的话 在Web页面或者说移动页面制作中,常常看到图文混排效果,图片居左(或居右),内容居右(或居左)排列.常常把这样的效果称为媒体对象.可以说它是一种抽象的样式,可以用来构建不同类型的组件.本文将 ...

  2. 写给正在入坑linux系统的伙伴

    光阴似箭,时光如梭,转年出来工作已经3年了.从一个职场新人慢慢熟悉职场的工作方式,适应职场工作的环境,学习了很多知识,也总结了很多经验.现在的目标就是一步一个脚印,慢慢打磨自己,希望早日成为取代其他人 ...

  3. ceph S3客户端操作--s3cmd

    S3 client 访问ceph rgw 安装: yum install s3cmd 验证安装是否成功: $s3cmd --version s3cmd version 1.5.2 #表示安装成功 在c ...

  4. BZOJ4551[Tjoi2016&Heoi2016]树——dfs序+线段树/树链剖分+线段树

    题目描述 在2016年,佳媛姐姐刚刚学习了树,非常开心.现在他想解决这样一个问题:给定一颗有根树(根为1),有以下 两种操作:1. 标记操作:对某个结点打上标记(在最开始,只有结点1有标记,其他结点均 ...

  5. Pairs Forming LCM LightOJ - 1236 （算术基本定理）

    题意: 就是求1-n中有多少对i 和 j 的最小公倍数为n  (i <= j) 解析: 而这题,我们假设( a , b ) = n ,那么: n=pk11pk22⋯pkss, a=pd11pd2 ...

  6. 自学Linux Shell6.1-环境变量概念

    点击返回 自学Linux命令行与Shell脚本之路 6.1-环境变量概念 环境变量 在Linux中,很多程序和脚本都通过环境变量来获取系统信息.存储临时数据和配置信息: bash shell使用环境变 ...

  7. 对 spi 的认知

    在使用 SPI 外设场景下,只需将数据送至 SPI->DR,外设将数据自动发走 在使用 DMA 外设场景下,只需指定数据缓存区地址及 SPI->DR 地址,这样就无需劳驾 CPU 而开始数 ...

  8. linux ssh keys

    1. 原理: SSH 密钥对总是成双出现的,一把公钥,一把私钥.公钥可以自由的放在您所需要连接的 SSH 服务器上,而私钥必须稳妥的保管好. 所谓"公钥登录",原理很简单,就是用户 ...

  9. Git Pull Github and Gitee or Gitlab

    GitHub实战系列汇总:http://www.cnblogs.com/dunitian/p/5038719.html 缩略Code:https://www.cnblogs.com/dotnetcra ...

  10. 前端学习 -- Html&Css -- 表格

    表格在日常生活中使用的非常的多,比如excel就是专门用来创建表格的工具,表格就是用来表示一些格式化的数据的,比如:课程表.银行对账单.在网页中也可以来创建出不同的表格. 在HTML中,使用table ...