display:none,overflow:hidden,visibility:hidden之间的区别
来源:互联网 发布:程序员历年真题 编辑:程序博客网 时间:2024/05/27 20:48
一,display:none;
隐藏元素,不占网页中的任何空间,让这个元素彻底消失(看不见也摸不着)
二,overflow:hidden;
让超出的元素隐藏,就是在设置该属性的时候他会根据你设置的宽高把多余的那部分剪掉
我们都知道每个浏览器对代码的解析都不同,所以我们在做页面的时候会遇到很多bug,在IE里面如果内容的高度超过了该层的高度他会自动地撑开,但火狐等里面的高度是多高这层就只有这么大,内容的高即使超出了也不会影响你设置的高,在这个时候我们有的问题就可以用overflow:hidden;来解决,这是第一点,还有就是我们可以利用它做出很多hove效果
三,visibility:hidden;
他是把那个层隐藏了,也就是你看不到它的内容但是它内容所占据的空间还是存在的。(看不见但摸得到)
{ display: none; /* 不占据空间,无法点击 */ } /********************************************************************************/{ visibility: hidden; /* 占据空间,无法点击 */ } /********************************************************************************/{ height: 0; overflow: hidden; /* 不占据空间,无法点击 */ } /********************************************************************************/{ position: absolute; top: -999em; /* 不占据空间,无法点击 */ } /********************************************************************************/{ position: relative; top: -999em; /* 占据空间,无法点击 */ } /********************************************************************************/{ position: absolute; visibility: hidden; /* 不占据空间,无法点击 */ } /********************************************************************************/{ opacity: 0; filter:Alpha(opacity=0); /* 占据空间,可以点击 */ } /********************************************************************************/{ position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不占据空间,可以点击 */ } /********************************************************************************/
阅读全文
0 0
- display:none,overflow:hidden,visibility:hidden之间的区别
- display:none、visibility:hidden和opacity:0之间的区别
- display:none和visibility:hidden的区别
- display:none和visibility:hidden的区别
- display:none 和visibility:hidden的区别
- visibility:hidden 与display:none的区别
- display:none;与visibility:hidden;的区别
- visibility:hidden和display:none的区别
- display:none | visibility:hidden 的区别
- display:none | visibility:hidden 的区别
- visibility:hidden和display:none的区别
- display:none和visibility:hidden的区别
- display:none和visibility:hidden的区别?
- display:none与visibility:hidden的区别
- display:none和visibility:hidden的区别
- visibility:hidden和display:none的区别
- display:none和visibility:hidden的区别
- display:none或visibility:hidden的区别
- 单元测试
- HTML标签总结
- Python之创建单元素tuple
- 分层窗口(Layered windows)翻译
- gulp使用指南
- display:none,overflow:hidden,visibility:hidden之间的区别
- PHP代码安全检测
- C语言字符移位过程
- hibernate Null value was assigned to a property of primitive type setter
- qte4.8.5配置和移植
- 输入三个数,从小到大排序
- Android UI 自动化测试之UiCollection
- 数据结构之动态存储管理(C语言)
- HTTP报文头解析(图文)