display与元素的隐藏

　　如果给一个元素设置了display: none，那么该元素以及它的所有后代元素都会隐藏，它是前端开发人员使用频率最高的一种隐藏方式。隐藏后的元素无法点击，无法使用屏幕阅读器等辅助设备访问，占据的空间消失。

 <body>

 <div>

      <strong>给元素设置display:none样式</strong>

         <p>A元素</p>

         <p style='display:none;'>B元素</p>

         <p>C元素</p>

 </div>

 </body>

效果图：

visibility与元素的隐藏

给元素设置visibility: hidden也可以隐藏这个元素，但是隐藏元素仍需占用与未隐藏时一样的空间，也就是说虽然元素不可见了，但是仍然会影响页面布局。

 <body>

 <div>

      <strong>给元素设置visibility:hidden样式</strong>

         <p>A元素</p>

         <p style='visibility:hidden;'>B元素</p>

         <p>C元素</p>

 </div>

 </body>

效果图:

display: none与visibility: hidden的区别

　　visibility: hidden和display: none的区别不仅仅在于display: none隐藏后的元素不占据任何空间，而visibility: hidden隐藏后的元素空间依旧保留 ，实际上没那么简单，visibility是一个非常有故事性的属性

  1. visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别
  2. visibility: hidden不会影响计数器的计数，如图所示，visibility: hidden虽然让一个元素不见了，但是其计数器仍在运行。这和display: none完全不一样
 <body>

         <div>

             <strong>给元素设置visibility:hidden样式</strong>

             <ol>

                 <li>元素1</li>

                 <li style="visibility:hidden;">元素2</li>

                 <li>元素3</li>

                 <li>元素4</li>

             </ol>

         </div>

         <div>

             <strong>给元素设置display:none样式</strong>

             <ol>

                 <li>元素1</li>

                 <li style="display:none;">元素2</li>

                 <li>元素3</li>

                 <li>元素4</li>

             </ol>

         </div>

     </body>

效果图：

3、CSS3的transition支持visibility属性，但是并不支持display，由于transition可以延迟执行，因此可以配合visibility使用纯css实现hover延时显示效果。提高用户体验。

参考博客：https://blog.csdn.net/qq_38128179/article/details/80794397

display:none和visibility:hidden两者的区别的更多相关文章

  1. CSS样式display:none和visibility:hidden的区别

    同样是隐藏,display:none与visibility:hidden有什么区别呢? 虽然display:none与visibility:hidden都能达到隐藏可见元素的作用(视觉上),但事实上, ...

  2. display:none与visibility: hidden的区别

    display:none和visibility: hidden都能把网页上某个元素隐藏起来,但两者有区别: display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失. ...

  3. 个人收集（转载）CSS中 display:none和visibility:hidden的区别

    visibility和display两个属性都有隐藏元素的功能,display:none和visibility:hidden的区别,简单的总结一句话就是:visibility:hidden隐藏,但在浏 ...

  4. display:none;与visibility:hidden;的区别

    visibility:隐藏对应的元素但不挤占该元素原来的空间.display:隐藏对应的元素并且挤占该元素原来的空间. 下面来看visibility和dispaly的一些参数 visibility用来 ...

  5. display:none和visibility:hidden的区别[]

    display:none和visibility:hidden都是把网页上某个元素隐藏起来的功能,但两者有所区别,我发现使用 visibility:hidden属性会使对象不可见,但该对象在网页所占的空 ...

  6. 两种隐藏元素方式【display: none】和【visibility: hidden】的区别

    此随笔的灵感来源于上周的一个面试,在谈到隐藏元素的时候,面试官突然问我[display: none]和[visibility: hidden]的区别,我当时一愣,这俩有区别吗,好像有,但是忘记了啊,因 ...

  7. CSS display:none和visibility:hidden区别

    你知道CSSdisplay:none和visibility:hidden的区别吗,这里和大家分享一下,使用CSS display:none属性后,HTML元素(对象)的宽度.高度等各种属性值都将&qu ...

  8. display:none和visibility:hidden v-show和v-if的区别

    隐藏元素display:none 和 visibility:hidden的区别visibility:hidden可以隐藏某个元素,但是隐藏的元素仍要占据空间,仍要影响布局display:none不会占 ...

  9. display:none和visibility:hidden的区别？

    css控制元素不可见的方法 { display: none; /* 不占据空间,无法点击 */ } /************************************************* ...

随机推荐

  1. Opencv的线性滤波和非线性滤波

    线性滤波 :方框滤波   均值滤波  高斯滤波 非线性滤波: 中值滤波  双边滤波 这几个滤波都是起模糊作用 去除噪点 不废话了 下面是代码 #include <opencv2/opencv.h ...

  2. 机器学习 TensorFlow 实现智能鉴黄

    前言 最近在做一款图床服务,关注公号的小伙伴一定记得小柒曾说过,会在周末放出的,不好意思放大家鸽子了.之所以一直没敢放出,是因为鉴黄接口一直没调试好,虽然我对公号的小伙伴百分之百信任,奈何互联网鱼龙混 ...

  3. 使用idea来部署git项目

    使用idea来部署git项目 一).将项目交由git管理 VCS ---->import into Version Cntorl ------>create Git Repository ...

  4. Android官方提供的支持不同屏幕大小的全部方法（转）

    转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/8830286 原文地址为:http://developer.android.com/ ...

  5. matlab-汉字unicode编码转换

    str='黑大哥'bianma=unicode2native(str); disp(bianma); pp=native2unicode(bianma);disp(pp)

  6. Eclipse设置Working Set管理项目和detach合并分离窗口

    当项目多了的时候,使用Working Set分组管理项目很有必要了,不然一大推项目在一起 找起来麻烦,看起来也难受~ ​ 所以根据给项目不同分类就很有必要了. 之前myeclipse设置了,今天装了一 ...

  7. Java快速教程步伐

    Java基础在Java基础系列文章中,我将说明Java的基础内容,特别是面向对象的相关概念. Java基础01 从HelloWorld到面向对象 Java基础02 方法与数据成员 Java基础03 构 ...

  8. 痞子衡嵌入式：恩智浦i.MX RTxxx系列MCU启动那些事（3）- Serial ISP模式(blhost)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是恩智浦i.MX RTxxx系列MCU的Serial ISP模式. 在上一篇文章 Boot配置(ISP Pin, OTP) 里痞子衡为大家 ...

  9. JS使用readAsDataURL读取图像文件

    JS使用readAsDataURL读取图像文件 FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL.Data URL是一项特殊的技术,可以将资料(例如图片 ...

  10. Apache和PHP结合、Apache默认虚拟主机

    5月28日任务 课程内容: 11.14/11.15 Apache和PHP结合11.16/11.17 Apache默认虚拟主机 11.14/11.15 Apache和PHP结合 到目前为止虽然安装好了A ...