`

display：none 和 visibility：hidden

    博客分类：
  • css
cssdisplayvisibility 
阅读更多

额，css基础真的很差，被鄙视了。很基础的面试常用，简单记录下吧：

 

 visibility：设置元素是否可见。


 

display：设置元素如何显示。


注意：通过样式文件或<style>css</style>方式来设置元素的display:none样式，用js设置style.display=""并不能使元素显示，可以使用block或inline等值来代替。通过style="display:none"直接在元素上进行的设置不会有这个问题 

 

总之：

visibility：hidden  --“看不见却存在”，元素对象在网页所占空间没改变，留有空白。

display：none      --“看不见不存在”，元素对象彻底消失，网页中不占任何位置。

 

 

http://www.w3school.com.cn/htmldom/prop_style_display.asp

http://bbs.blueidea.com/thread-2942695-1-1.html

  • 大小: 26.8 KB
  • 大小: 24.5 KB
分享到：
| Oracle中常见的sql函数
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

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

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

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

    为了获取display:none元素的尺寸，一个常见的方法是临时将该元素的display属性更改为visibility:hidden，从而使其获得尺寸信息，再通过计算其样式来获得高度和宽度。但是，这会导致元素暂时变为可见，可能会在页面上...

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

    本文将详细探讨CSS元素隐藏的原理以及display:none和visibility:hidden这两个属性的不同应用及其影响。 首先，CSS元素隐藏的原理主要包括两个方面：空间占据和交互能力。元素被隐藏后，有些方式仍然保留了元素的...

    visiblity:hidden和display:none的差异

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

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

    其中，`display:none` 和 `visibility:hidden` 是两个常用的属性，它们都可以用来隐藏页面上的元素，但它们的工作原理和效果是不同的。下面将详细解释这两个属性的区别，并通过实例进行演示。 1. `display:none` `...

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

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

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

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

    对比： display, visibility(有代码)

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

    前端大厂最新面试题-hide_attributes.docx

    在 CSS 中隐藏页面元素有多种方式，包括"display:none"、"visibility:hidden"、"opacity:0"、"设置height、width模型属性为0"、"position:absolute"和"clip-path"等方法。每种方法都有其特点和应用场景。 1. ...

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

    display:none 和 visibility:hidden 都可以使元素不可见，但是它们的作用是不同的。display:none 表示元素不会显示，并且占据的空间也不会保留；visibility:hidden 表示元素将被隐藏，但是占据的空间仍然保留。 box...

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

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

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

    `的文本输入框（`&lt;input type="text" style="display:none"&gt;`）和一个隐藏的`div`中包含另一个文本输入框（`&lt;div style="display:none"&gt;&lt;input type="text"&gt;&lt;/div&gt;`）。紧接着，通过JavaScript脚本尝试为这四个...

    前端大厂最新面试题-2020作业帮前端社招面经.docx

    * display: none 和 visibility: hidden 区别：display: none 和 visibility: hidden 都可以隐藏元素，但是它们之间有所区别。display: none 会将元素从文档流中移除，而 visibility: hidden 只是将元素隐藏不会影响...

    html5web实验

    理解overflow属性的作用，设置p元素的样式，实现内容溢出的隐藏效果，区分display:none和visibility:hidden的区别。 8. 显示与可见性实验： 通过display:none和visibility:hidden设置，观察元素在页面上的表现...

    前端面试宝典（无Vue）.pdf

    Display:none 和 visibility:hidden 都可以隐藏元素，但是它们的作用不同。Display:none 会将元素从文档流中删除，而 visibility:hidden 只是将元素隐藏，元素仍然占据文档流中的空间。 Position 属性 Position ...

    interview:面试

    display:none和visibility:hidden的区别 1.visibility:hidden 将元素隐藏，空间不释放 使用后仅仅视觉上看不见 所占据空间仍然存在 2.display:none 将元素显示设为无 空间释放 各种属性丢失 opacity的兼容...

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

    在本文中，我们将详细介绍jQuery中的可见性过滤器：hidden和：visibility的用法，并结合实例来分析它们的功能和使用技巧。 首先，我们需要明确隐藏（hidden）和可见（visible）状态的区别： - hidden（隐藏）状态...

    前端面试宝典V4.0.pdf

    display：none 和 visibility：hidden 都可以使元素隐藏，但是它们的作用不同。display：none 会使元素从文档流中删除，而 visibility：hidden 只会使元素不可见。 10. position 属性 position 属性有多个值，包括...

Magicbox
Global site tag (gtag.js) - Google Analytics