区别一：
display:none
Turns off the display of an element (it has no effect on layout); 
all child elements also have their display turned off. 
//隐藏这个元素;所有的子元素也跟着他隐藏.
visibility:hidden
The box is invisible (fully transparent, nothing is drawn), but still affects layout.  
Descendants of the element will be visible if they have visibility:visible 
(this doesn't work in IE up to version 7).
//这个容器不可见(完全透明),但占有布局.后代(子)元素将会显示,如果设有visible属性
 
区别二：
display为none时,元素不占用页面流,就好像该元素不存在一样.
visibility为hidden时,仍然占用页面流,也就是这块区域虽然不可见,但是占据一块空间.

css中display为none 和visibility为hidden的区别的更多相关文章

  1. 使用display：none和visibility：hidden隐藏的区别

    今天做毕设时遇到了一个小问题,我做了一个tab导航栏,点击一个tab页其它tab页隐藏,这时候第一想法是使用display:none来控制显示隐藏,写了之后发现使用display会有一个问题,就是第二 ...

  2. display：none与visibility：hidden区别

    display:none与visibility:hidden有一个共同的作用是隐藏要显示的内容isplay:none 隐藏,但是不占空间 “看不见摸不到” 加载 display:none 隐藏,但是不 ...

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

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

  4. css隐藏元素display：none，opacity:0;filter：alpha(opacity=0-100;，visibility：hidden的区别

    在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.我们一般有三种方式:display:none, opacity:0;fil ...

  5. 区别CSS中display：box；inline；none以及HTML中 <frame> 标签<table> 标签的 frame 属性

    区别display:box:display:inline:display:none三者的不同 display:block的特点是: block是Display默认的值.总是在新行上开始:该对象随后的内 ...

  6. 英文单词断行问题：CSS中word-break、word-wrap以及hyphens的兼容性和区别

    CSS中一提到单词断行,最先映入脑海的肯定是word-break和word-wrap这两条属性.但对于这两条属性到底有什么区别,兼容性如何,我一直都概念模糊.今天抽空把它们以及CSS3中新加入的断行属 ...

  7. CSS中px，em，rem，pt的区别及四者换算?

    本文章重要说明px,em,rem,pt的区别以及四者之间的换算. em单位有如下特点 1. em的值并不是固定的; 2. em会继承父级元素的字体大小. 我们在写CSS的时候如果要用em为单位,需要注 ...

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

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

  9. CSS 中 display:inline-block 属性使用详解

    本文详细描述了display:inline-block的基础知识,产生的问题和解决方法以及其常见的应用场景,加深了对inline-block应用的进一步理解. 基础知识 display:inline- ...

随机推荐

  1. 在 Confluence 6 中连 Jira 的问题解决

    下面是可能会发生的一些错误信息.如果你的系统中出现了下面的一些提示,你应该调整你的日志错误级别到 WARN,然后查看具体的错误原因.请参考:Configuring Logging. error.jir ...

  2. java MongoDB查询（一）简单查询

    前言 MongoDB的java驱动提供了查询的功能,查询条件也是bson对象,这篇就看下怎么进行简单的数据查询 1.数据结构 集合:firstCollection 数据内容: { "_id& ...

  3. 『科学计算』科学绘图库matplotlib学习之绘制动画

    基础 1.matplotlib绘图函数接收两个等长list,第一个作为集合x坐标,第二个作为集合y坐标 2.基本函数: animation.FuncAnimation(fig, update_poin ...

  4. Python面向对象编程、类

    一.面向对象编程 面向对象--Object Oriented Programming,简称oop,是一种程序设计思想.在说面向对象之前,先说一下什么是编程范式,编程范式你按照什么方式来去编程,去实现一 ...

  5. angularjs 中的$digest和$apply区别

    $digest和$apply 在Angular中,有$apply和$digest两个函数,我们刚才是通过$digest来让这个数据应用到界面上.但这个时候,也可以不用$digest,而是使用$appl ...

  6. sql server中的大数据的批量操作（批量插入，批量删除）

    首先我们建立一个测试用员工表 ---创建一个测试的员工表--- create table Employee( EmployeeNo int primary key, --员工编号 EmployeeNa ...

  7. POJ 2896 AC自动机 or 暴力

    DESCRIPTION :大意是说.给你n个代表病毒的字符串.m个表示网站的字符串.让你计算有多少个网站被病毒感染了.被那些病毒感染了. 刚开始就想暴力.然而,忽略了条件:每个网站最多有三个病毒.于是 ...

  8. js 实现智能输入数字

    <!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...

  9. bzoj1082

    题解: 暴搜+二分+剪枝 二分答案,暴力判断是否有解 然后加上剪枝 代码: #include<bits/stdc++.h> using namespace std; ; int rest, ...

  10. slice,Array.prototype.slice,Array.protyotype.slice.call

    slice 特点:基于当前数组中的一或多个项创建一个新数组.[原数组不会被修改] 返回结果:返回一个从开始到结束(不包括结束)选择的数组的一部分浅拷贝到一个新数组对象. 语法: arr.slice() ...