给父元素与子元素分别设置visibility注意点
由于机顶盒的终端特性原因，不能用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注意点的更多相关文章
- css设置时父元素随子元素margin值移动
父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. HTML,CSS: <div ...
- jquery选择器如何获取父级元素、同级元素、子元素
一.新建页面 <ul> <li>list item 1</li> <li>list item 2</li> <li class=&qu ...
- 父元素与子元素之间的margin-top问题
父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. html代码: <div c ...
- JQuery 获取父级元素、同级元素、子元素等
例: <div> <div id="div_1">这是内容1</div> <div id="div_2">这是内 ...
- jquery选择器 之 获取父级元素、同级元素、子元素
jquery选择器 之 获取父级元素.同级元素.子元素 一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 <div id="par_div" ...
- jQuery学习笔记---兄弟元素、子元素和父元素的获取
我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...
- HTML 父元素与子元素之间的margin-top问题
问题: 父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. 代码如下: <div ...
- 父元素与子元素之间的margin-top问题(css hack)（转载）
情况: 父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. 解决方法: 1.修改父元素 ...
- CSS 实现：父元素包含子元素，子元素垂直居中布局
☊[实现要求]:父元素包含子元素,子元素垂直居中布局 <div class="demo5"> <div class="child">A& ...
- jquery查找父元素、子元素(个人经验总结)
使用js或者jquery查找父元素.子元素经常遇到.可是用起来总容易混淆,这里统一总结了一下,以后用起来相信会方便好多 这里jquery向上查找父元素 用到的方法:closest() parents( ...
随机推荐
- zookeeper 四字命令
zookeeper四字命令 ZooKeeper3.4.6支持某些特定的四字命令字母与其的交互.它们大多是查询命令,用来获取 ZooKeeper 服务的当前状态及相关信息.用户在客户端可以通过 te ...
- Java过滤器Filter的使用详解
过滤器 过滤器是处于客户端与服务器资源文件之间的一道过滤网,在访问资源文件之前,通过一系列的过滤器对请求进行修改.判断等,把不符合规则的请求在中途拦截或修改.也可以对响应进行过滤,拦截或修改响应. 如 ...
- KMP模板（KMP）
放一个模板在这里搞事情...... 学KMP的话找SYCstudio吧(博客链接) 代码(多组数据,\(O(n)\)求一个串是否在另一个串里出现过) #include<cstdio> #d ...
- Android Studio中Git和GitHub使用详解
一.Git和GitHub简述 1.Git 分布式版本控制系统,最先使用于Linux社区,是一个开源免费的版本控制系统,功能类似于SVN和CVS.Git与其他版本管理工具最大的区别点和优点就是分布式: ...
- 洛谷 P4151 [WC2011]最大XOR和路径 解题报告
P4151 [WC2011]最大XOR和路径 题意 求无向带权图的最大异或路径 范围 思路还是很厉害的,上午想了好一会儿都不知道怎么做 先随便求出一颗生成树,然后每条返祖边都可以出现一个环,从的路径上 ...
- SPI接口扫盲 SPI定义/SPI时序(CPHA CPOL)
SPI接口扫盲 douqingl@gmail.com 为何要写这篇文档?百度上找出来的SPI接口中文描述都说的太过简略,没有一篇文档能够详尽的将SPI介绍清楚的.wikipedia英文版[注释 ...
- Python面向对象编程和模块
在面向对象编程中,你编写表示现实世界中的事物和情景的类,并基于这些类来创建对象. 编写类时,你定义一大类对象都有的通用行为.基于类创建对象时,每个对象都自动具备这种通用行为,然后根据需要赋予每个对象独 ...
- sqlite 日期型 字符串转为日期型
因为sqlite为弱引用,使用字段前将他强制转为日期型,用datetime.或者最原始的 strftime. SELECT distinct ID from testTable where datet ...
- 初见mobX
先看如下的代码 const {observable}= mobox; const {observer}=mobxReact; const {Component}=React; const appSta ...
- NOIP 普及组 2014 螺旋矩阵
传送门 https://www.cnblogs.com/violet-acmer/p/9898636.html 题解: 这道题挺有意思的,有点考思维吧. 大体思路是用四个pair<int ,in ...