`
moqiang02
  • 浏览: 556510 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
文章分类
社区版块
存档分类
最新评论

CSS display:none和visibility:hidden区别

 
阅读更多

你知道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元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在,也即是说它仍具有高度、宽度等属性值。

分享到:
评论

相关推荐

    display:none和visibility:hidden的差别比较与演示代码

    前言: 在使用css隐藏栏位或物件的时候, 常常会使用到display:none和visibility:hidden这两个属性, 但却很容易分不清楚这两个的差别, 或是乾脆同时使用两种属性,来确保物件一定被隐藏, 其实我们可以很简单的来...

    javascript获取隐藏元素(display:none)的高度和宽度的方法

    首先,我们可以区分display:none和visibility:hidden这两个CSS属性。display:none的元素不仅不可见,而且不占据页面上任何空间,即没有尺寸信息。而visibility:hidden的元素虽然不可见,但是仍然保留空间,因此具有...

    visiblity:hidden和display:none的差异

    `visibility:hidden` 和 `display:none` 的主要区别在于,前者隐藏元素的同时保留其占据的空间,而后者则完全从布局中移除元素。这种差异在处理页面布局时尤为关键。例如,如果一个元素的 `display` 被设置为 `none`...

    css元素隐藏原理及display:none和visibility:hidden

    在介绍了这么多隐藏元素的方法之后,我们要特别注意display:none和visibility:hidden两种属性的主要区别。这两者之间的差异主要表现在以下几个方面: 1. 空间占据:display:none;隐藏的元素不占据任何布局空间,而...

    css display:none使用注意事项小结

    在Web页面前台编码过程中,CSS属性display: none经常被用来隐藏页面上的元素,以便于构建动态交互效果或是实现页面布局...4. 当需要隐藏元素同时保留布局空间时,可以选择使用visibility: hidden代替display: none。

    实例详解display:none与visible:hidden的区别

    总结一下,`display:none` 和 `visibility:hidden` 的主要区别在于: - `display:none` 会完全移除元素在布局中的存在,而 `visibility:hidden` 只是让元素变得不可见,但保留其在布局中的位置。 - `display:none` ...

    CSS隐藏元素 display visibility opacity的区别.docx

    在CSS中,隐藏元素的方法主要有三种:`display:none`、`visibility:hidden`和`opacity:0`,它们各自有不同的特点和适用场景。 1. `display:none`:此属性会使元素完全从页面布局中消失,不占据任何空间。元素及其...

    javascript获取隐藏元素(display-none)的高度和宽度的方法.docx

    ### JavaScript 获取隐藏元素 (display: none) 的高度和宽度的方法 #### 一、问题背景与需求分析 在前端开发过程中,经常会遇到需要获取隐藏元素尺寸的情况。这些元素可能因为某些逻辑原因被设置为 `display: none...

    对比: display, visibility(有代码)

    在网页设计和开发中,`display` 和 `visibility` 是两个非常重要的CSS属性,它们用于控制元素在页面上的可见性和布局。这篇博客文章通过代码示例深入探讨了这两个属性的区别和用法。 首先,`display` 属性主要用于...

    CSS:Visibility 和 Display 属性的比较.pdf

    总之,`visibility`和`display`在CSS中扮演着不同的角色,`visibility`关注的是元素的可见状态,而`display`则涉及元素在布局中的存在状态。了解它们的差异并合理运用,可以帮助我们更好地控制网页的显示效果和用户...

    css中display和visibility的用法和区别介绍

    在CSS中,`display`和`visibility`两个属性都是用于控制元素在页面上的显示状态,但它们的作用方式和效果有着显著的区别。 `display`属性主要影响元素的布局和类型。它有多种不同的值: 1. `block`:将元素转换为...

    CSS:Visibility和Display属性的比较.pdf

    总的来说,`visibility`和`display`都是CSS中强大的工具,用于控制元素的可见性和布局。理解它们的区别并正确使用,可以让你在创建网页时更加灵活,同时也能避免可能对SEO产生的负面影响。在实际工作中,开发者应...

    IE/火狐/Chrome操作display:none对象所遇问题解答

    在网页开发中,CSS属性`display: none;`常用于控制页面上的元素是否显示,当设置为`none`时,该元素及其子元素不会出现在渲染的页面上。但是,不同的浏览器在处理`display: none;`时可能会有细微差别,导致在使用...

    display和visibility的区别示例介绍

    在网页布局和样式设计中,`display` 和 `visibility` 是两个非常重要的CSS属性,它们都能用来控制元素的可见性,但实现方式和效果大不相同。本篇文章将深入探讨两者之间的区别,并通过示例来具体说明。 首先,`...

    CSS Display与Visibility的不同

    在CSS布局中,`display`和`visibility`是两个非常重要的属性,它们分别负责控制元素的显示方式和可见性。虽然两者都能使元素在页面上不可见,但它们的机制和影响是不同的。 首先,`visibility`属性主要用于决定元素...

    谈谈CSS隐藏元素(display,visibility)的区别

    在CSS中,隐藏元素主要有两种方法:`display: none` 和 `visibility: hidden`,它们在隐藏元素的同时,对页面布局和交互性有着不同的影响。此外,还有一些其他的技术,如设置`height: 0`结合`overflow: hidden`或者...

    jQuery可见性过滤器:hidden和:visibility用法实例

    首先,我们需要明确隐藏(hidden)和可见(visible)状态的区别: - hidden(隐藏)状态通常指的是元素不可见,并且不占据页面上的任何空间。可以通过CSS的`display: none;`属性实现。使用jQuery的`:hidden`选择器...

    「资深前端工程师总结」前端面试知识点大全 —CSS 篇

    display:none 和 visibility:hidden 的区别 display:none 和 visibility:hidden 都可以使元素不可见,但是它们的作用是不同的。display:none 表示元素不会显示,并且占据的空间也不会保留;visibility:hidden 表示...

Global site tag (gtag.js) - Google Analytics