给父元素与子元素分别设置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( ...
随机推荐
- appium框架感悟
个人觉得 所谓框架 最终结果就是对存放的元素进行处理 从底层获取数据 往上层传输数据过程中 对其一步一步的封装 由繁到简 再由繁至简
- mysql 性能指标
qps 每秒处理的查询数tps 每秒处理的事务数IOPS 每秒磁盘进行的I/O操作次数 一.TPS:Transactions Per Second(每秒传输的事物处理个数),即服务器每秒处理的事务数. ...
- 【 Gym - 101138D 】Strange Queries （莫队算法）
BUPT2017 wintertraining(15) #4B Gym - 101138D 题意 a数组大小为n.(1 ≤ n ≤ 50 000) (1 ≤ q ≤ 50 000)(1 ≤ ai ≤ ...
- Nginx, HTTPS的配置
server {listen 443; ####HTTPS指定端口server_name www.web.com; #####域名或者IP root /data/wwwroot/l ...
- 隐藏SharePoint 2013 team sites里的follow按钮
cls $featureid = 'a7a2793e-67cd-4dc1-9fd0-43f61581207a'$webapps = Get-spWebApplicationforeach($webap ...
- BZOJ3235 [Ahoi2013]好方的蛇 【单调栈 + dp】
题目链接 BZOJ3235 题解 求出每个点为顶点,分别求出左上,左下,右上,右下的矩形的个数\(g[i][j]\) 并预处理出\(f[i][j]\)表示点\((i,j)\)到四个角的矩形内合法矩形个 ...
- 洛谷 P1879 [USACO06NOV]玉米田 解题报告
P1879 [USACO06NOV]玉米田Corn Fields 题目描述 农场主\(John\)新买了一块长方形的新牧场,这块牧场被划分成\(M\)行\(N\)列\((1 ≤ M ≤ 12; 1 ≤ ...
- luogu4932 浏览器 (拆)
分析1的个数的奇偶性: 奇xor奇=偶xor偶=偶 奇xor偶=奇 所以只要统计1的个数是奇数的数的个数 和 是偶数的个数 乘一起就行了 直接用bitset来做,虽然常数很小/数据随机可以过,但复杂度 ...
- 二分插入、bisect
在一个有序序列(从小到大)中查找一个元素 每次将元素与序列中间位置的元素进行比较 如果大于中点,则在后半段.如果小于中点,则在前半段.以此类推 时间复杂度为O(logn) 有一个无序序列[37, 99 ...
- 使用“DiskGenius”精确隐藏硬盘坏道
现在大家手中可能都有些有坏道的硬盘,也可能现在机器上的硬盘也出问题了.硬盘有坏道,肯定不会全部都是坏道,不能使用了.但我们因此而不能使用了,那么就太可惜了.所以,只要把有坏道的区域隐藏起来,就如同使用 ...