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

区别：

  • 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. 在VMware下安装CentOS 7.6

    转载自https://blog.51cto.com/hnyuanzijian/2343716?appinstall=0a.点击左上角文件,新建虚拟机,选择典型安装,并下一步   b.选择稍后安装操作系 ...

  2. ubuntu 开启对.htaccess的支持

    1. 终端运行    sudo a2enmod    程序提示可供激活的模块名称,输入:    rewrite    成功会提示 rewrite already load2. 修改/etc/apach ...

  3. Selenium3+python自动化007-警告框

    警告框 alert = driver.switch_to.alert alert.text() alert.accpet() alert.dismiss() # 导selenium包 from sel ...

  4. Linux系统搭建Java环境【JDK、Tomcat、MySQL】一篇就够

      前言:所有项目在完成开发后都会部署上线的,一般都是用Linux系统作为服务器的,很少使用Windows Server(大多数项目的开发都是在Windows桌面系统完成的),一般有专门负责上线的人员 ...

  5. SpringBoot整合WEB开发--（七）注册拦截器

    1.创建一个拦截器类实现HandlerInterceptor接口,重写其中的3个方法,这拦截器中方法的执行顺序为:preHandle--Controller--postHandle--afterCom ...

  6. react中用swiper实现大图功能

    1.引入Swiper(用的是4.5.0版本)      import Swiper from 'swiper';      //引入样式,还可以加上自己的样式      import '../../s ...

  7. 洛谷P1093 奖学金

    https://www.luogu.org/problem/P1093 #include <bits/stdc++.h> using namespace std; struct Node{ ...

  8. codeforces 1283F. DIY Garland（树+优先队列）

    题目连接:https://codeforces.com/contest/1283/problem/F 题意:一根电线连接着两个点,这两个点分别代表着两个灯,灯有自己的编号i,其亮度是2 ^ i,每根电 ...

  9. 第四篇，JavaScript面试题汇总

    JavaScript是一种属于网络的脚本语言,已经被广泛用于web实用开发,常用来为网页添加各种各样的动态功能,为用户提供更流畅美观的浏览效果.通常JavaScript脚本是通过嵌入在HTML中来实现 ...

  10. Having用法以及其和Where区别

    例如,进行分组语句: select year,count(id) num from tblPlantProduce group by year 在这条语句中若要筛选出年份>2005年的有两种方式 ...