给父元素与子元素分别设置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( ...
随机推荐
- AtCoder Beginner Contest 118 解题报告
A - B +/- A #include <bits/stdc++.h> int main() { int a, b; std::cin >> a >> b; b ...
- POJ1611-The Suspects-并查集
记录元素个数的并查集. 利用sz数组保存并查集的大小.每次union时,把小的集合并到大的中去,并更新sz数组. #include <cstdio> #include <algori ...
- 洛谷P1973 [NOI2011]Noi嘉年华（动态规划，决策单调性）
洛谷题目传送门 DP题怕是都要大大的脑洞...... 首先,时间那么大没用,直接离散化. 第一问还好.根据题意容易发现,当一堆活动的时间有大量重叠的时候,更好的办法是把它们全部安排到一边去.那么我们转 ...
- 【总结】 Lucas定理
\(Lucas\)定理: \(C^x_y≡C^{x/p}_{y/p}*C^{x\%p}_{y\%p} ~~(mod~p)\) 证明不会2333 void pre(){ A[0]=A[1]=B[0]=B ...
- Leetcode 242.有效的字母异位词 By Python
给定两个字符串 s 和 t ,编写一个函数来判断 t 是否是 s 的一个字母异位词. 示例 1: 输入: s = "anagram", t = "nagaram" ...
- [hgoi#2019/2/17t1]million
题目描述 面对格鲁的入侵,小黄人们要组建一支队伍,来抵御进攻,现在有编号为1 至n 的小黄人,任命编号为n 的队长,由其挑选队员,当然编号不是随便编的,每一个编号里都包含一个小黄人的个人信息,现在队长 ...
- 如何用ip代替机器名访问sharepoint site
1. iis里绑定ip 2. AAM里加一条ip的记录
- luogu1984 烧水问题 (找规律)
为了节省能量,我们会希望一个已经烧开了的水温度越低越好 那么可以得到结论,它要依次去碰当前温度从大到小的水 然后再把温度最高的烧开呗 可是直接模拟会T 稍微写一写大概能找到每次烧开花费能量的一个规律 ...
- 获取EasyUI的treegrid的checkbox所有已勾选的数据
EasyUI为TreeGrid的已勾选节点,未勾选节点,只勾选部分子节点的父节点分别添加了三个不同的样式,如下:样式一:tree-checkbox2 有子节点被选中样式二:tree-checkbox1 ...
- （转）Maven之自定义archetype生成项目骨架
背景:最近在开发一个项目的基础构件,在以后项目的开发过程中可以直接使用该构件快速的生成项目骨架进行开发. 摘要:使用过Maven的人都知道maven中有许多功能都是通过插件来提供的,今天我们来说一下其 ...