一、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. XAF应用开发教程(三)业务对象模型之引用类型与关联关系

    本节介绍信息系统开发中最常见的问题,引用关系,一对多关系,多对多关系. 以客户信息为例,客户通常需要客户分类,如VIP客户,普通客户,潜在客户.当然,我们可以定义枚举类型进行定义出这个类型,并在客户类 ...

  2. 个人博客作业WEEK 1

    一.项目时间规划与实际用时 PSP2.1 Personal Software Process Stages 预计时间/h 实际时间/h Planning 计划   · Estimate · 估计这个任 ...

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

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

  4. python 标准库

    https://www.zhihu.com/question/24590883 https://www.zhihu.com/question/20501628 http://blog.csdn.net ...

  5. intersection-of-two-arrays-ii

    https://leetcode.com/problems/intersection-of-two-arrays-ii/ class Solution { public: vector<int& ...

  6. INTERPRETER（解释器）

    1 意图:给定一个语言,定义它的文法的一种表示,并定义一个解释器,这个解释器使用该表示来解释语言中的句子. 2 动机:如果一种特定类型的问题发生的频率足够高,那么可能就值得将该问题的各个实例表述为一个 ...

  7. 易通电脑锁2007V6.3.3.3无法卸载问题解决办法

    易通电脑锁2007V6.3.3.3无法卸载问题解决办法把原版文件拷贝回去.bat@echo offcolor 2Fecho 该批处理会把易通电脑锁2007版原文件拷贝回去,解决易通电脑锁卸载时出现的运 ...

  8. python 暴力破解密码脚本

    python 暴力破解密码脚本 以下,仅为个人测试代码,环境也是测试环境,暴力破解原理都是一样的, 假设要暴力破解登陆网站www.a.com 用户 testUser的密码, 首先,该网站登陆的验证要支 ...

  9. ubuntu server samba服务器配置

    ubuntu server samba服务器配置 samba可以实现不同操作系统电脑之间的文件共享服务 如:mac os,linux,unix,windows,等 一:安装samba服务器 ubunt ...

  10. 使用TCP/IP的套接字（Socket）进行通信

    http://www.cnblogs.com/mengdd/archive/2013/03/10/2952616.html 使用TCP/IP的套接字(Socket)进行通信 套接字Socket的引入 ...