display:none;与 visibility:hidden;的区别
来源:互联网 发布:sqlserver 查询器 编辑:程序博客网 时间:2024/06/08 00:51
<style type="text/css"> #box1{ width:100px; height:100px; background:red; margin-bottom:10px; } #box2{ width:100px; height:100px; background:blue; margin-bottom:10px; } </style>
原始:两个大小相等,不同颜色的盒子,同时显示出来。
给 box1 样式里面加上 display:none;
box1 让出自己的物理位置,让 其余元素(box2)在空出的位置上渲染。
给 box1 样式里面加上 visibility:hidden;
box1 会隐藏,但不会让出自己的物理位置,其余元素(box2)物理位置不变。
小结:
display:none;
使用该属性后,HTML元素(对象)的宽度、高度等各种属性值都将“丢失”;
浏览器不加载,速度会加快;
visibility:hidden;
使用该属性后,HTML元素(对象)仅仅是在视觉上看不见(完全透明),而它所占空间位置仍然存在,也就是说它仍具有width、height等属性值。
浏览器加载,只是不显示出来。
注:若用Jqeury中的 show() 来显示元素,则只对display:none; 有效,对于用visibility:hidden; 方式隐藏的元素 无效。
阅读全文
0 0
- visibility:hidden 与display:none的区别
- display:none;与visibility:hidden;的区别
- display:none与visibility:hidden的区别
- display: none与visibility: hidden的区别
- display: none;与visibility: hidden;的区别
- display:none;与 visibility:hidden;的区别
- display:block/none与visibility:visible/hidden的区别
- display:none与visibility:hidden的区别是什么
- Html中 visibility:hidden 与 display:none 的区别
- display:none和visibility:hidden的区别
- display:none和visibility:hidden的区别
- 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的区别?
- git config 命令
- 详解 Redis 应用场景及应用实例
- 『0007』- Solidity状态变量、局部变量与memory 、storage之间的爱恨情仇
- C语言 8皇后问题
- php实现99乘法表
- display:none;与 visibility:hidden;的区别
- Unity初识2--NGUI
- VC++编写简单串口上位机程序
- JS——转换Json格式的时间
- envi 对图片进行降采样
- mongodb系统分析
- linux 查看cpu和gpu的使用情况
- 深入理解HTTP一:网络基础TCP/IP
- LeetCode.274(275) H-Index && II