一、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. Hibernate4集成 Annotation使用教程

    Spring4 MVC Hibernate4集成 Annotation 一.    本文所用环境 Spring4.0.3.RELEASE.Hibernate4.3.5.Final.Mysql 二.   ...

  2. read 隐藏用户输入

    有时会需要脚本用户进行输入,但不希望输入的数据显示在监视器上,典型的例子就是输入密码,当然还有很多其它类型的数据需要隐藏.-s选项就能够使read命令中输入的数据不现实在监视器上(实际上,数据是显示的 ...

  3. views中的公共代码放在一起

    在views中建立一个common.php文件,然后把views中的index.php和about.php公共代码放进去 <!doctype html> <html lang=&qu ...

  4. RARP

    ARP的工作原理如下:1. 首先,每台主机都会在自己的ARP缓冲区 (ARP Cache)中建立一个 ARP列表,以表示IP地址和MAC地址的对应关系.2. 当源主机需要将一个数据包要发送到目的主机时 ...

  5. HDU 1003 Max Sum 解题报告

    题目大意:求一串数字中,几个连续数字加起来最大值,并确定起始和最末的位置. 思路:这是一题DP题,但是可以用尺取法来做.我一开始不会,也是看了某大神的代码,然后有人告诉我这是尺取法,现在会了. //尺 ...

  6. js输出26个字母两种方法(js fromCharCode的使用)

    方法一 var character = new Array("A","B","C","D","E", ...

  7. linux gksu用法

    apt-get install gksu gksu是linux下图形化的su/sudo工具 sudo 用来执行命令行(CLI)程序 gksu 用来执行图形的(GUI)程序 GUI = Graphica ...

  8. JavaSE复习_10 多线程复习

    △wait()和sleep()的区别:  1.wait():没有等待时间,而sleep()需要有等待时间作为参数.  2.在同步中对于CPU的执行权和锁的处理不同:   wait()会释放执行权和锁. ...

  9. Fragments

    http://developer.android.com/guide/components/fragments.html#Design Content Design Philosophy Creati ...

  10. Xcode好用的插件

    注释:每当Xcode升级之后,都会导致原有的Xcode插件不能使用,这是因为每个插件的Info.plist中记录了该插件兼容Xcode版本的DVTPlugInCompatibilityUUID,而每个 ...