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. nyoj 455-黑色帽子

    455-黑色帽子 内存限制:64MB 时间限制:1000ms 特判: No 通过数:4 提交数:7 难度:1 题目描述:         最近发现了一个搞笑的游戏,不过目前还没玩过.一个舞会上,每个人 ...

  2. vant-ui的van-area使用

    由于官方例子中并没有太多详情,因此记录之,方便以后使用. 1.配置 :area-list="areaList",以初始化全部省市区的数据,其中area.js文件在官方可以下载,放于 ...

  3. sqlalchemy 源码分析之create_engine引擎的创建

    引擎是sqlalchemy的核心,不管是 sql core 还是orm的使用都需要依赖引擎的创建,为此我们研究下,引擎是如何创建的. from sqlalchemy import create_eng ...

  4. 新闻实时分析系统 大数据Web可视化分析系统开发

    1.基于业务需求的WEB系统设计 2.下载Tomcat并创建Web工程并配置相关服务 下载tomcat,解压并启动tomcat服务. 1)新建web app项目 创建好之后的效果 2)对tomcat进 ...

  5. 题解 P3954 【成绩】

    题目评级: ★ (水题) 内容及算法: 无,简单模拟计算即可 代码: /** *@author little_frog */ #include <bits/stdc++.h> using ...

  6. CCNA 之 八 交换基础 VLAN TRUNK VTP

    交换基础 主要知识点: 二层交换基础 Vlan的概念 Trunk的概念 VTP 二层交换基本配置 首先来看下园区网分层结构 交换机的主要功能: Address learning 学习MAC地址 会维护 ...

  7. CentOS 7 Cobbler 配置 YUM仓库

    通过Cobbler配置内网YUM仓库 在上一篇Cobbler 安装中,配置好了Cobbler 下面来通过Cobbler来配置内网的YUM仓库 这里可以同步所有版本的yum源,增加内网的yum安装下载速 ...

  8. ftp 客户端 上传

    ps: 1.使用netkit-ftp-0.17交叉编译出来的ftp客户端, 2.然后写上传代码,调用ftp传服务器: 3.最好使用bin二进制文件形式传输: 4.ftp客户端和Ubuntu自带的ftp ...

  9. Mybatis分页插件PageHelper的学习与使用

    目录 中文教程 PageHelper使用 后端程序员都知道,在Web系统中,分页是一种常见的功能,我之前写的分页方法都比较麻烦,移植性也不高,这就很不乐观了.作为一个积极开朗的程序员,怎么能不去了解P ...

  10. 微信小程序实现，可滑动、可点击

    tab.wxml: 全部 中奖 未中奖 全部 中奖 未中奖 tab.wxss: .swiper-tab { width: 100%; border-bottom: 2rpx solid #ccc; t ...