一、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. Python标准库之Sys模块使用详解

    sys 模块提供了许多函数和变量来处理 Python 运行时环境的不同部分. 处理命令行参数 在解释器启动后, argv 列表包含了传递给脚本的所有参数, 列表的第一个元素为脚本自身的名称. 使用sy ...

  2. git学习笔记12-标签管理-版本

    发布一个版本时,我们通常先在版本库中打一个标签(tag),这样,就唯一确定了打标签时刻的版本.将来无论什么时候,取某个标签的版本,就是把那个打标签的时刻的历史版本取出来.所以,标签也是版本库的一个快照 ...

  3. Android获取窗体信息的Util方法

    package com.wangyi.tools; import android.app.Activity; import android.util.DisplayMetrics; public cl ...

  4. iOS - OC NSEnumerator 迭代器

    前言 @interface NSEnumerator<ObjectType> : NSObject <NSFastEnumeration> Xcode 7 对系统中常用的一系列 ...

  5. Facebook内部分享:25个高效工作的小技巧

    Facebook内部分享:25个高效工作的小技巧 Facebook 内部分享:不论你如何富有,你都赚不到更多的时间,你也回不到过去.没有那么多的假如,只有指针滴答的时光飞逝和你应该好好把握的现在,以下 ...

  6. [转载] C++11中的右值引用

    C++11中的右值引用 May 18, 2015 移动构造函数 C++98中的左值和右值 C++11右值引用和移动语义 强制移动语义std::move() 右值引用和右值的关系 完美转发 引用折叠推导 ...

  7. [转载] 根据多年经验整理的《互联网MySQL开发规范》

    原文: http://weibo.com/p/2304181380b3f180102vsg5 根据多年经验整理的<互联网MySQL开发规范> 写在前面:无规矩不成方圆.对于刚加入互联网的朋 ...

  8. linux学习笔记2-命令总结1

    计划一个长期过程系统学习linux,这是本周学习总结,如果错误望指出纠正. 文件处理命令 命令格式与目录处理命令  ls 目录处理命令  cd  cp  mkdir  mv  pwd  rm  rmd ...

  9. Python学习笔记8—语句

    条件语句 有的程序里写的是 /usr/bin Python,表示 Python 解释器在/usr/bin 里面.但是,如果写成 /usr/bin/env,则表示要通过系统搜索路径寻找 Python 解 ...

  10. 什么是Plist文件

    直接将数据直接写在代码里面,不是一种合理的做法.如果数据经常改,就要经常翻开对应的代码进行修改,造成代码扩展性低 因此,可以考虑将经常变的数据放在文件中进行存储,程序启动后从文件中读取最新的数据.如果 ...