1.占据空间 ：none 隐藏后不占据空间 visibility占据空间
2.回流与渲染：none产生回流与渲染 ？ 可以通过oprea中的Profiler 工具测试。
display 和visibility的回流区别
回流 似乎是页面布局所需的时间
3.株连性：none 具有株连性 visibility没有。
也就是说如果设置了display：none 其子元素同样隐藏 但是visibility：hidden后 如果子元素有设置过 visibility：visible 那子元素不受父元素影响。

关于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. C#图像处理笔记

    1.灰度拉伸 灰度拉伸又叫对比度拉伸,它是最基本的一种灰度变换,使用的是最简单的分段线性变换函数,它的主要思想是提高图像处理时灰度级的动态范围.

  2. XMind怎么使用查找功能

    XMind思维导图中,XMind搜索功能与XMind查找替换功能乍一看有些相似,然而不尽相同,本文为你着重讲解XMind搜索功能. 首先在XMind思维导图中的工具栏找到"Search&qu ...

  3. Socket编程实践(1) 基本概念

    1. 什么是socket socket可以看成是用户进程与内核网络协议栈的编程接口.TCP/IP协议的底层部分已经被内核实现了,而应用层是用户需要实现的,这部分程序工作在用户空间.用户空间的程序需要通 ...

  4. 故障review的一些总结

    故障review的一些总结 故障review的目的 归纳出现故障产生的原因 检查故障的产生是否具有普遍性,并尽可能的保证同类问题不在出现, 回顾故障的处理流程,并检查处理过程中所存在的问题.并确定此类 ...

  5. 翻书插件：wowbook.js

    wowbook是一个jQuery插件,可以让你在网站中发布一本页面翻转效果超赞的书. demo演示 基本页面 <!DOCTYPE html> <html lang="en& ...

  6. ORA-01438: 值大于为此列指定的允许精度

    Number的数据声明如下:表示        作用        说明Number(p, s)        声明一个定点数        p(precision)为精度,s(scale)表示小数点 ...

  7. 20145212&20145204信息安全系统实验四报告

    一.实验内容与步骤 1.本次实验建立在掌握嵌入式开发平台使用方法和配置方法的基础上,要求使用windows xp,linux(red hat),arm三个系统(即NFS方式): 2.在linux系统中 ...

  8. nginx配置杂记

    1.一个接口的形式要求是:IP+端口,并且通信协议类型是:https,如何做域名解析: ①设置一个端口.同时在防火墙中打开这个端口,重启防火墙: ②在服务器上/etc/nginx/conf.d的目录下 ...

  9. 移动开发框架剖析(二) Hammer专业的手势控制

    浏览器底层并没有给元素提供类似,单击,双击,滑动,拖动这些直接可以用的控制接口,一切的手势动作都只能通过模拟出来.移动端浏览器唯一给我们提供的就只是mousedown -> mousemove ...

  10. Java 时间的表示

    //不建议的方式 out.println("<p>结束Servlet的时间:" + new Date().toLocaleString() + "</p ...