一、display和visibility的相同与不同点

1、相同点：display和visibility都有讲元素隐藏的意思

2、不同点：display是元素隐藏，隐藏的元素不占文档流

　　　　　　而visibility隐藏的元素仍然占文档流

二、display和visibility的属性值

1、display

　　display：block；将元素设置为块级元素，独占一行，能设置宽高

　　display：inline-block;将元素设置为行内快显示，能设置宽高，但是不独占一行

　　display：none；将元素设置为隐藏，后面的元素能自动往上填充

2、visibility

　　visibility：visible；元素可见，默认值　

　　visibility：hidden；将元素设置成隐藏，隐藏的元素仍然占据文档流

　　visibility：collapse；只对table对象起作用，用在其他元素中表示隐藏

　　visibility:inherit；继承其父级元素样式

display和visibility的区别的更多相关文章

  1. div和span、relative和absolute、display和visibility的区别

    一.div和span的区别 div是一个块级元素,可以包含段落,表格等内容,用于放置不同的内容.一般我们在网页通过div来布局定位网页中的每个区块. span是一个内联元素,没有实际意义,它的存在纯粹 ...

  2. 基础总结（04）-- display:none;&&visibility:hidden;区别

    display:none 1.使元素隐藏,不再占据空间. 2.动态操作时会引起页面回流和重绘,影响性能. 3.子元素也会被隐藏并且添加display:block/visibility:visible无 ...

  3. display 和 visibility 的区别

    设置控件隐藏 1.display:none  不为元素保留位置 2.visibility:hidden  占位置,是对象在网页上看不到,所占空间没有变化

  4. display与visibility的区别

    style.visibility和style.display都可以实现对页的隐藏,但visibility要占用域的空间,而display则不占用 将元素display属性设为 block,会在该元素后 ...

  5. Display与 Visibility的区别

    隐藏元素的方法有: display:none或visibility:hidden visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间.也就是说,该元素虽然被 ...

  6. 控制HTML元素的显示与隐藏——display和visibility

    有些时候我们需要根据某些条件来控制Web页面中的HTML元素显示还是隐藏,可以通过display或visibility来实现.通过下面的例子了解display和visibility的区别,简单的例子代 ...

  7. css3-10 如何控制元素的显示和隐藏（display和visibility的区别是什么）

    css3-10 如何控制元素的显示和隐藏(display和visibility的区别是什么) 一.总结 一句话总结:使用的时候直接在元素的样式中设置display和visibility属性即可.推荐使 ...

  8. 隐藏与显示：display/visibility/visible区别

    说到标签的隐藏,你们会用到什么呢?display?visibility?还是服务器控件的visible? 显然,这三者都能起到隐藏与显示的效果,但是用途确完全不一样,请看用法与区别: <div ...

  9. CSS display和visibility的用法和区别

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt408 大多数人很容易将CSS属性display和visibility混淆,它 ...

随机推荐

  1. C#形参，实参，值传递参数，引用传递参数，输出参数，参数数组的学习

    1)形参 形参顾名思义就是形式上的参数,不是实际的参数,它代替实际传入方法的值.在方法体代码中代表了值本身参与运算.形参定义于参数中,它不同于方法体内局部变量,因为是一个变量,在它的作用域内不允许存在 ...

  2. [转载] ORMs under the hood

    原文: http://www.vertabelo.com/blog/technical-articles/orms-under-the-hood It often happens that if so ...

  3. nodejs学习笔记<一>安装及环境搭建

    零零散散学了几天nodejs,进度一直停滞不前,今天沉下心来好好看了下nodejs的介绍和代码.自己也试着玩了下,算是有点入门了. 这里来做个学习笔记. ——————————————————————— ...

  4. poj1265Area（pick定理）

    链接  Pick定理是说,在一个平面直角坐标系内,如果一个多边形的顶点全都在格点上,那么这个图形的面积恰好就等于边界上经过的格点数的一半加上内部所含格点数再减一. pick定理的一些应用 题意不好懂, ...

  5. JQuery Ajax 的简单使用

    简单判断用户名存在不存在,如果数据库存在此用户名,提示不能注册 前台代码如下: <!DOCTYPE html> <html lang="en"> <h ...

  6. Javascript设计模式之创建构造函数和方法

    构造函数和方法 var Book = function (isbn,title,author) { this.setIsbn(isbn); this.setTitle(title); this.set ...

  7. 有趣的JavaScript小程序

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. String.join()方法的使用

    String.join()方法是JDK1.8之后新增的一个静态方法,使用方式如下所示: String  result = String.join("-","java&qu ...

  9. RMAN-03009 ORA-19504 ORA-27038

    错误信息如下: RMAN> backup database tag='full20160112' format '/orabak/rman/full20160112' include curre ...

  10. request is not finfished yet！

    在项目测试的时候发现一个问题.当数据量特别多的时候,我一次性查询几万条数据的时候,就会出现很卡很慢的状态. 我把sql优化了,但是出现同样的问题.我要从后台得到数据显示在页面上来.就需要知道是查询慢, ...