display:none 和 visible:hidden 都能把网页上某个元素隐藏起来,但两者有区别:
display:none --- 不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就是看不见也摸不到。
visible:hidden--- 使对象在网页上不可见,但该对象在网页上所占的空间没有改变,通俗来说就是看不见但摸得到。
例子:
- <html>
- <head>
- <title>
- display:none和visible:hidden的区别
- </title>
- </head>
- <body>
- <span style="display:none; background-color:Blue">
- 隐藏区域
- </span>
- <span style=" background-color:Green">
- 显示区域
- </span>
- <br />
- <span style="visibility:hidden; background-color:Blue">
- 隐藏区域
- </span>
- <span style="background-color:Green">
- 显示区域
- </span>
- </body>
- </html>
来源: http://www.2cto.com/kf/201707/656893.html