你知道CSS display:none和visibility:hidden的区别吗，这里和大家分享一下，使用CSS display:none属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”;而使用visibility:hidden属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。
CSS display:none和visibility:hidden的区别
visibility:hidden隐藏，但在浏览时保留位置；CSS display:none视为不存在，且不加载！
Overflow属性值{visible|hidden|scroll|auto}前提是先要限制DIV的宽度（width）和高度（height）。二者都是隐藏HTML元素，在视觉效果上没有区别，但在一些DOM操作中二者还是有所不同的。
CSS display:none;
使用该属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”;
visibility:hidden;
使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。
<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>
分享到：
相关推荐
前言： 在使用css隐藏栏位或物件的时候， 常常会使用到display:none和visibility:hidden这两个属性， 但却很容易分不清楚这两个的差别， 或是乾脆同时使用两种属性，来确保物件一定被隐藏， 其实我们可以很简单的来...
首先，我们可以区分display:none和visibility:hidden这两个CSS属性。display:none的元素不仅不可见，而且不占据页面上任何空间，即没有尺寸信息。而visibility:hidden的元素虽然不可见，但是仍然保留空间，因此具有...
`visibility:hidden` 和 `display:none` 的主要区别在于，前者隐藏元素的同时保留其占据的空间，而后者则完全从布局中移除元素。这种差异在处理页面布局时尤为关键。例如，如果一个元素的 `display` 被设置为 `none`...
在介绍了这么多隐藏元素的方法之后，我们要特别注意display:none和visibility:hidden两种属性的主要区别。这两者之间的差异主要表现在以下几个方面： 1. 空间占据：display:none;隐藏的元素不占据任何布局空间，而...
在Web页面前台编码过程中，CSS属性display: none经常被用来隐藏页面上的元素，以便于构建动态交互效果或是实现页面布局...4. 当需要隐藏元素同时保留布局空间时，可以选择使用visibility: hidden代替display: none。
总结一下，`display:none` 和 `visibility:hidden` 的主要区别在于： - `display:none` 会完全移除元素在布局中的存在，而 `visibility:hidden` 只是让元素变得不可见，但保留其在布局中的位置。 - `display:none` ...
在CSS中，隐藏元素的方法主要有三种：`display:none`、`visibility:hidden`和`opacity:0`，它们各自有不同的特点和适用场景。 1. `display:none`：此属性会使元素完全从页面布局中消失，不占据任何空间。元素及其...
### JavaScript 获取隐藏元素 (display: none) 的高度和宽度的方法 #### 一、问题背景与需求分析 在前端开发过程中，经常会遇到需要获取隐藏元素尺寸的情况。这些元素可能因为某些逻辑原因被设置为 `display: none...
在网页设计和开发中，`display` 和 `visibility` 是两个非常重要的CSS属性，它们用于控制元素在页面上的可见性和布局。这篇博客文章通过代码示例深入探讨了这两个属性的区别和用法。 首先，`display` 属性主要用于...
总之，`visibility`和`display`在CSS中扮演着不同的角色，`visibility`关注的是元素的可见状态，而`display`则涉及元素在布局中的存在状态。了解它们的差异并合理运用，可以帮助我们更好地控制网页的显示效果和用户...
在CSS中，`display`和`visibility`两个属性都是用于控制元素在页面上的显示状态，但它们的作用方式和效果有着显著的区别。 `display`属性主要影响元素的布局和类型。它有多种不同的值： 1. `block`：将元素转换为...
总的来说，`visibility`和`display`都是CSS中强大的工具，用于控制元素的可见性和布局。理解它们的区别并正确使用，可以让你在创建网页时更加灵活，同时也能避免可能对SEO产生的负面影响。在实际工作中，开发者应...
在网页开发中，CSS属性`display: none;`常用于控制页面上的元素是否显示，当设置为`none`时，该元素及其子元素不会出现在渲染的页面上。但是，不同的浏览器在处理`display: none;`时可能会有细微差别，导致在使用...
在网页布局和样式设计中，`display` 和 `visibility` 是两个非常重要的CSS属性，它们都能用来控制元素的可见性，但实现方式和效果大不相同。本篇文章将深入探讨两者之间的区别，并通过示例来具体说明。 首先，`...
在CSS布局中，`display`和`visibility`是两个非常重要的属性，它们分别负责控制元素的显示方式和可见性。虽然两者都能使元素在页面上不可见，但它们的机制和影响是不同的。 首先，`visibility`属性主要用于决定元素...
在CSS中，隐藏元素主要有两种方法：`display: none` 和 `visibility: hidden`，它们在隐藏元素的同时，对页面布局和交互性有着不同的影响。此外，还有一些其他的技术，如设置`height: 0`结合`overflow: hidden`或者...
首先，我们需要明确隐藏（hidden）和可见（visible）状态的区别： - hidden（隐藏）状态通常指的是元素不可见，并且不占据页面上的任何空间。可以通过CSS的`display: none;`属性实现。使用jQuery的`:hidden`选择器...
display:none 和 visibility:hidden 的区别 display:none 和 visibility:hidden 都可以使元素不可见，但是它们的作用是不同的。display:none 表示元素不会显示，并且占据的空间也不会保留；visibility:hidden 表示...