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. mysql数据库如何赋予远程某个IP 访问权限

    1.授权用户root使用密码jb51从任意主机连接到mysql服务器: 代码如下: GRANT ALL PRIVILEGES ON *.* TO 'ROOT'@'%' IDENTIFIED BY 'j ...

  2. 前端与算法 leetcode 8. 字符串转换整数 (atoi)

    目录 # 前端与算法 leetcode 8. 字符串转换整数 (atoi) 题目描述 概要 提示 解析 解法一:正则 解法二:api 解法二:手搓一个api 算法 传入测试用例的运行结果 执行结果 G ...

  3. 【Java】面向对象初探

    前段时间经历了一段心态浮躁期,这让我想起了自己最初的计划,要提升自己知识体系的广度.前几年一直做的是web前端这一块的工作,但我希望通过自己在学习Java这样的过程来提升自己的知识广度. 面向对象概述 ...

  4. Kotlin Coroutines不复杂, 我来帮你理一理

    Coroutines 协程 最近在总结Kotlin的一些东西, 发现协程这块确实不容易说清楚. 之前的那篇就写得不好, 所以决定重写. 反复研究了官网文档和各种教程博客, 本篇内容是最基础也最主要的内 ...

  5. python：调用bash

    利用os模块 python调用Shell脚本,有三种方法: os.system(cmd)返回值是脚本的退出状态码 os.popen(cmd)返回值是脚本执行过程中的输出内容 commands.gets ...

  6. useReducer代替Redux

    创建state.js import React, { createContext,useContext,useReducer } from 'react'; export const countTex ...

  7. RabbitMQ的入门学习

    RabbitMq消息队列 参考:https://blog.csdn.net/hellozpc/article/details/81436980 什么是消息队列 MQ :message Queue ,实 ...

  8. vue监听移动设备的返回事件

    在公共方法文件common.js中实现一个存储当前历史记录的方法 common.js // 存储当前历史记录点,实现控制手机物理返回键的按钮事件 var pushHistory = function ...

  9. PL真有意思（四）：控制流

    前言 对大多数计算模型而言,顺序都是基本的东西,它确定了为完成所期望的某种工作,什么事情应该最先做,什么事应该随后做,我们可以将语言规定顺序的机制分为几个类别: 顺序执行 选择 迭代 过程抽象 递归 ...

  10. [题解]洛谷P1094——纪念品分组

    原题链接: https://www.luogu.org/problem/P1094 题目简述: 有NNN件纪念品,每个纪念品都有特定的价格,要求将他们分组,每组纪念品之和不得超过MMM,并且每组最多只 ...