联系：他们都能让元素不可见

区别：

  • display：none；会让元素从渲染树中消失，渲染的时候不占据任何空间；

visibility：hidden；不会让元素从渲染树中消失，渲染时袁旭继续占据空间，知识内容不可见了；

  • display：none；是非继承属性，子孙节点消失是由于元素从渲染树中消失造成的，通过修改子孙节点的属性也无法显示；visibility：hidden；是继承属性，子孙节点消失是由于继承了hidden，可以通过设置子孙节点visibility：visible；然子孙节点显示
  • 修改常规流中的display通常会造成文档重排。修改visibility属性只会造成本元素的重绘。
  • 读屏器不会读取display：~；元素内容；但是会读取visibility：~；元素的内容

503,display:none;与visibility：hidden；的区别的更多相关文章

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

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

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

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

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

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

  4. 前端面试题-display:none和visibility:hidden的区别

    一.display:none和visibility:hidden的区别 1.1 空间占据 1.2 回流和渲染 1.3 株连性 二.空间占据 display:none 隐藏后的元素不占据任何空间,而 v ...

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

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

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

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

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

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

  8. [HTML/CSS]display:none和visibility:hidden的区别

    写在前面 在群里有朋友问这样一个问题,display:none的标签,影响了布局.这就引出了本篇这样的问题,印象中display:none的块元素是不占位置的. 一个例子 <!DOCTYPE h ...

  9. css中display:none与visibility: hidden的区别

    display: none; 隐藏元素,不占用其本来空间------对应元素显示用的是display:block; visibility: hidden:元素隐藏,占用其本来的页面空间-------- ...

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

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

随机推荐

  1. mysql-使用存储过程创建大批量数据

    参考:https://www.iteye.com/blog/825635381-2161290 场景1.创建1万个table,每个table种插入1条记录 DELIMITER $$ CREATE DA ...

  2. Gin_中间件

    gin可以构建中间件,但它只对注册过的路由函数起作用 对于分组路由,嵌套使用中间件,可以限定中间件的作用范围 中间件分为全局中间件,单个路由中间件和群组中间件 gin中间件必须是一个 gin.Hand ...

  3. Android Q 接入 MQTT

    Android Q 接入 MQTT 首先在APP 下引入mqtt的库 implementation 'org.eclipse.paho:org.eclipse.paho.client.mqttv3:1 ...

  4. Pytest学习7-参数化

    在测试过程中,参数化是必不可少的功能,本文就讨论下pytest的几种参数化方法 @pytest.mark.parametrize:参数化测试函数 1.内置的pytest.mark.parametriz ...

  5. Web渗透测试思路整理

    信息收集: 域名/IP 子域名列表 whois: 注册地址,注册人,联系方式等 whois反查: 同ip有哪些站点(旁注),同一个注册人注册了哪些域名 社工注册人信息 指纹识别: 操作系统及版本 数据 ...

  6. 打表法fffff

    打表法: 打表前先运行一下 看一看速度 优化: O3 #pragma GCC optimize(3,"Ofast","inline") O2  #pragma ...

  7. C#中获取时间戳

    { 注意:下面是以毫秒为单位的13位  UTC  时间戳(非正规) }//先取得当前的UTC时间,然后转换成计算用的周期数(简称计时周期数),每个周期为100纳钞(ns)=0.1微秒(us)=0.00 ...

  8. HTTP请求消息的数据格式

    servletRequest获取请求消息 Request 分为4部分1.请求行 格式:请求方式 请求url 请求协议/版本GET /login.html HTTP/1.1 特点:行和头之间没有任何分隔 ...

  9. 命令行（一）：Git

    1,使用gitbash进行操作 2,初始化一个Git仓库,使用git init命令. 3,添加文件到Git仓库,分两步:使用命令git add <filename>可反复多次使用,添加多个 ...

  10. AcWing 802. 区间和 离散化

    https://www.acwing.com/problem/content/804/ #include <iostream> #include <vector> #inclu ...