由于机顶盒的终端特性原因，不能用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. 全球最大轻博客APP确认被苹果下架!

    读 苹果确认了App Store下架轻博客应用Tumblr,主要原因是,该应用没有很好的过滤掉一些成人内容(成人内容多到夸张),这严重影响了未成年人. 事实上,iPhone和iPad版Tumblr应用 ...

  2. BZOJ4771七彩树——可持久化线段树+set+树链的并+LCA

    给定一棵n个点的有根树,编号依次为1到n,其中1号点是根节点.每个节点都被染上了某一种颜色,其中第i个节 点的颜色为c[i].如果c[i]=c[j],那么我们认为点i和点j拥有相同的颜色.定义dept ...

  3. BZOJ3237 AHOI2013连通图（线段树分治+并查集）

    把查询看做是在一条时间轴上.那么每条边都有几段存在时间.于是线段树分治就好了. 然而在bzoj上t掉了,不知道是常数大了还是写挂了. 以及brk不知道是啥做数组名过不了编译. #include< ...

  4. Leetcode 50.Pow(x,n) By Python

    实现 pow(x, n) ,即计算 x 的 n 次幂函数. 示例 1: 输入: 2.00000, 10 输出: 1024.00000 示例 2: 输入: 2.10000, 3 输出: 9.26100 ...

  5. cf860E Arkady and A Nobody-men (树剖)

    容易得出,如果我们按照深度一层一层地做,做完一层后,这层某个点的答案就是它的祖先们的子树大小(统计大小时不包括树根) 由于我太菜了不会别的方法,虽然N是5e5的,还是只好用一个树剖(树状数组降常数)水 ...

  6. CodeForces - 669D

    题目链接:http://codeforces.com/problemset/problem/669/D Little Artem is fond of dancing. Most of all dan ...

  7. bracketed-paste-magic:zle:41: not enough arguments for -U

    原因是zsh的插件出问题了,解法方法如下: 把 ~/.oh-my-zsh/lib/misc.zsh 文件中的第一段 if 注释掉 OK 啦 # ]]; then # for d in $fpath; ...

  8. asp 读cookie 下划线 丢失

    昨天有一个用户反应,登录后还是会显示:请登录后再使用. 我一查,原来有一个cookie设置后,无法正常读取. 整个情况是这样: 登录的时候,设置2个 cookie: user_name logon_t ...

  9. 收藏：SQL Server 数据库改名

    SQL SERVER 2005以前通常使用sp_renameDB存储过程. EXEC sp_renameDB 'oldDB','newDB'   或者:数据库先分离,然后再附加也可以改名. SQL S ...

  10. ReactNative组件之scrollView实现轮播

    想要实现轮播效果,首先安装时间定时器 接下来就是在我们的项目中使用定时器 接下来我们将竖着的轮播图变成横着的 接下来我们调整间距 我们知道轮播图下方,还有5个圆点,那我们怎么做呢? 拿到每一个圆点 看 ...