visible:hidden与display:none的区别
来源：互联网 发布：宣传单排版软件 编辑：程序博客网 时间：2024/06/04 00:27
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<body>
<!-- display:none和visible:hidden都能把网页上某个元素隐藏起来，但两者有区别: -->
<div>显示区域</div>
<hr>
<div style="visibility:hidden;">隐藏区域</div>
<div>显示区域</div>
<hr>
<div class="hidden">隐藏区域</div>
<div>显示区域</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>visible:hidden与display:none的区别</title>
<link rel="stylesheet" href="./bootstrap.min.css">
</head>
<style>
div{
width:100px;
height:100px;
border:1px solid red;
}
</style><body>
<!-- display:none和visible:hidden都能把网页上某个元素隐藏起来，但两者有区别: -->
<!-- display:none 不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失-->
<!-- visible:hidden 使对象在网页上不可见，但该对象在网页上所占的物理空间没有改变-->
<!-- 需要注意bootstrap中的class='hidden' 是相当于display:none 是不占物理空间的 -->
<div style="display:none;">隐藏区域</div><div>显示区域</div>
<hr>
<div style="visibility:hidden;">隐藏区域</div>
<div>显示区域</div>
<hr>
<div class="hidden">隐藏区域</div>
<div>显示区域</div>
</body>
</html>
0 0
- display:none与visible:hidden的区别
- display:none与visible:hidden的区别
- display:none与visible:hidden的区别
- display:none与visible:hidden的区别
- display:none与visible:hidden的区别
- display:none与visible:hidden的区别
- display:none与visible:hidden的区别
- display:none 与 visible:hidden的区别
- display:none与visible:hidden的区别
- display:none与visible:hidden的区别
- display:none与visible:hidden的区别
- display:none与visible:hidden的区别
- display:none与visible:hidden的区别
- display:none与visible:hidden的区别
- display:none与visible:hidden的区别
- display:none与visible:hidden的区别
- display:none与visible:hidden的区别
- display:none与visible:hidden的区别
- Android 开发之多线程处理、Handler 详解
- 两个线程交替执行,一个打印1-52;一个打印A-Z;打印顺序为12A34B56C.....5152Z
- shell的变量
- linux工作队列 - 把work_struct加入工作队列
- 导航CSS
- visible:hidden与display:none的区别
- 导航JavaScript
- centos6.8安装jdk1.7
- Javascript > 菜鸟新人的一点小整理&积累
- js获取select标签选中的值
- C++数组元素 排序 去重
- 【数据结构导论之树和二叉树总结篇】
- C++ 根据二分查找的函数
- 求出0～999之间的所有“水仙花数”并输出。“水仙花数”是指一个三位数，其各位数字的立方和确好等于该数本身，如；153＝1＋5＋3?，则153是一个“水仙花数”。
