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. cn_windows虚拟机配置

    1.打开“VMware”,点击“主页”,点“创建新的虚拟机”: 2.会弹出一个“新建虚拟机向导”,类型选择“典型”,点击“下一步”: 3.选择“稍后安装操作系统”,点击“下一步”: 4.选择“Micr ...

  2. python容器类型列表的操作

    列表:使用中括号进行表示元素的集合,元素与元素之间使用逗号隔开:列表中的元素可以存放不同的数据类型,但是通常存放相同的数据类型: 1.列表的声明: # 声明一个列表:变量名 = [元素1,元素2] l ...

  3. convert svn repo to git

    https://john.albin.net/git/convert-subversion-to-git 1. 抓取Log 在linux 上做的,其余是在win上做的. 2. svn co svn:/ ...

  4. App自动化测试-1.App自动化介绍和环境搭建

    App自动化测试-1.App自动化介绍和环境搭建 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-b ...

  5. easywechat微信开发SDK之小微商户进件（一）

    微信本身不提供小微商户进件的SDK,偶然发现easywechat这么个东西,官网地址是https://www.easywechat.com/  整合了微信开发中常用的接口,包括微信公众号相关接口,微信 ...

  6. MySQL将一个表的查询结果作为本表的查询条件更新数据

    先建一张S01人口统计信息表: drop table if exists S01人口统计信息; /*================================================== ...

  7. 这事没完，继续聊spring cloud stream和kafka的这些小事

    上一篇文章讲了如何用spring cloud stream集成kafka,并且跑起来一个demo,如果这一次宣传spring cloud stream的文章,其实到这里就可以啦.但实际上,工程永远不是 ...

  8. 正则grep 使用介绍

    第6周第3次课(4月25日) 课程内容: 9.1 正则介绍_grep上9.2 grep中9.3 grep下扩展把一个目录下,过滤所有*.php文档中含有eval的行grep -r --include= ...

  9. 配置防盗链、访问控制Directory和FilesMatch

    5月31日任务 课程内容: 11.25 配置防盗链11.26 访问控制Directory11.27 访问控制FilesMatch扩展几种限制ip的方法 http://ask.apelearn.com/ ...

  10. RestTemplate 中文乱码

    @Configuration public class RestTemplateWithoutLoadBalance { @Bean("normalRestTemplate") p ...