一、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#生成JSON数据

    protected void Page_Load(object sender, EventArgs e) { Response.Clear(); Response.ContentType = &quo ...

  2. POJ-2175 Evacuation Plan 最小费用流、负环判定

    题意:给定一个最小费用流的模型,根据给定的数据判定是否为最优解,如果不为最优解则给出一个比给定更优的解即可.不需要得出最优解. 解法:由给定的数据能够得出一个残图,且这个图满足了最大流的性质,判定一个 ...

  3. E2 2014.07.01 更新日志

    增加功能   完善功能 电话报修单,添加可以发短信通知客户和技术员选项 商品历程分析,增加按商品分类条件统计 修件库,增加可以按维修商条件过滤,以方便查询某维修商的返修件 维修中,备件转销售时,自动读 ...

  4. 笔记本_thinkpad_e40

    1. 0578A69 2.驱动下载 相关地址 XPhttp://think.lenovo.com.cn/support/driver/detail.aspx?docID=DR1253259153348 ...

  5. linux学习笔记2-命令总结4

    帮助命令 help - 帮助命令 man - 获取帮助信息 用户管理命令 useradd - 添加新用户 passwd - 设置用户密码 who - 显示所有用户 w - 查看更详细的用户信息 use ...

  6. js之oop <一> 创建对象，构造器(class)

    js中除了基本类型,就是对象.可以说在js中处处皆对象. 由于js是弱语言,在编写的过程中很容易混淆 object 和 class 也就是对象和构造器. object(对象):一般对象都由var关键字 ...

  7. 学会使用JDK API

    api是字典,知识过了一遍之后,剩下的就是实践+百度+api了

  8. 用命令访问D:\python学习\wendjia教程\aa.py

    用命令访问D:\python学习\wendjia教程\aa.py d:                                -----------切换到D盘 cd python学习\wend ...

  9. UI设计基础百科

    摘自:http://www.csdn.net/article/2013-09-10/2816892-iOS-dev-tools-design 我的原型设计流程 这是一份UX原型设计流程,用来探索交互设 ...

  10. Swift语言学习之OC和Swift混编

    本文转自http://www.helloswift.com.cn/swiftbase/2015/0112/3469.html iOS OC和Swift混编 1.创建一个swift或者oc的工程:我这里 ...