常用的display属性值:

none此元素不会被显示并且不占用空间;

block此元素显示为块级元素,此元素前后会带有换行符;

inline默认,此元素会被显示为内联元素,元素前后没有换行符;

inline-block行内块元素,前后无换行符;
inherit规定应该从父类元素继承display属性的

在IE浏览器里的IE11中的预览效果图

注:

隐藏一个元素可以通过把display属性设置为"none",或把visibility属性设置为"hidden"。

但是请注意,这两种方法会产生不同的结果。

visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局。

display:none可以隐藏某个元素,且隐藏的元素不会占用任何空间。也就是说,该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失。

另一种表达!

display 属性设置或返回元素的显示类型。

HTML 中的元素大多是"内联"或"块"元素:一个内联元素,在其左侧和右侧都是浮动内容。一个块元素填满整个行,并没有什么可显示在其左侧或右侧。

display 属性还允许作者显示或隐藏一个元素。与 visibility 属性类似。然而,如果您设置 display:none,将隐藏整个元素,如果您设置 visibility:hidden,元素的内容将不可见,但元素保持原来的位置和大小。

'display' VS 'visibility'的更多相关文章

  1. display和visibility的区别

    一.display和visibility的相同与不同点 1.相同点:display和visibility都有讲元素隐藏的意思 2.不同点:display是元素隐藏,隐藏的元素不占文档流 而visibi ...

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

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

  3. display 与 visibility

    项目开发中经常会遇到需要显示和隐藏DOM元素.常用的两个是display,visibility属性,高级点的会用到angularJS的ng-show,ng-if指令. W3标准对这个两个属性的解释如下 ...

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

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

  5. display、visibility、visible区别

    标签的隐藏可以有三种:display.visibility.服务器控件的visible. 显然,这三者都能起到隐藏与显示的效果,但是用途确完全不一样,请看用法与区别: <div style=&q ...

  6. 基础总结(04)-- display:none;&&visibility:hidden;区别

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

  7. 前端学习 -- Css -- display和Visibility

    display 将一个内联元素变成块元素,通过display样式可以修改元素的类型.可选值: 1 inline:可以将一个元素作为内联元素显示. 2 block: 可以将一个元素设置块元素显示. 3 ...

  8. DIV中display和visibility属性差别

    DIV中display和visibility属性差别 DIV中display和visibility属性差别还是挺大的,虽然Visibility和Display属性都可以达到隐藏页面元素的目的,但它们的 ...

  9. 【总结整理】display、visibility、overflow的隐藏问题

    display.visibility.overflow的隐藏问题 http://blog.sina.com.cn/s/blog_85e7c239010151r4.html   display:bloc ...

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

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

随机推荐

  1. [.net 面向对象程序设计进阶] (8) 托管与非托管

    本节导读:虽然在.NET编程过程中,绝大多数内存垃圾回收由CLR(公共语言运行时)自动回收,但也有很多需要我们编码回收.掌握托管与非托管的基本知识,可以有效避免某些情况下导致的程序异常. 1.什么是托 ...

  2. 如何开始DDD(完)

    连续写了两篇文章,这一篇我想是序的完结篇了.结合用户注册的例子再将他简单丰富一下.在这里只添加一个简单需求,就是用户注册成功后给用户发一封邮件.补充一下之前的代码 public class Domai ...

  3. 使用SqlBulkCopy类来批量复制数据

    DataTable dt = new DataTable(); dt.Columns.Add("id", typeof(string)); ; i < ; i++) { Da ...

  4. Redis学习笔记~是时候为Redis实现一个仓储了,RedisRepository来了

    回到目录 之前写了不少关于仓储的文章,所以,自己习惯把自己叫仓储大叔,上次写的XMLRepository得到了大家的好评,也有不少朋友给我发email,进行一些知识的探讨,今天主要来实现一个Redis ...

  5. Bootstrap~表单Form

    回到目录 在进行自己的后台改版时,大体布局都使用了bootstrap,剩下的表单部分没理由不去使用它,对于表单的美化和布局,bootstrap做的也是很不错的,有大气的边框,多功能的按钮及宏观的表单布 ...

  6. Atitit  java jsp 新的tag技术

    Atitit  java jsp 新的tag技术 1.1.  Tag Files  vs 原生写 SimpleTag 比较麻烦的 JSP 1.x 允许 Web 开发人员创建 Java 组件(称为标记处 ...

  7. atitit。wondows 右键菜单的管理与位置存储

    atitit.wondows 右键菜单的管理与位置存储 原理 .这样的功能称为Windows外壳扩展(Shell Extensions) 1 常用右键菜单 atiContentMenu1 通用tool ...

  8. eclipse根据父类打开子类快捷键

    1.打开类 2.双击选中 3.Ctrl+T,打开实现类

  9. IIS集成模式下,URL重写后获取不到Session值

    近期给公司网站添加了伪静态功能,但是今天发现了在伪静态的页面中,Session值是获取不到的. 原因是在伪静态请求的时候,Session请求被“过滤”掉了. 开始是把web.config文件中的mod ...

  10. Java 7 中的Switch 谈 Java版本更新和反编译知识

    Java 7 中的Switch 谈 Java版本更新和反编译知识          学习编程,享受生活,大家好,我是追寻梦的飞飞.今天主要讲述的是Java7中的更新Switch实现内部原理和JAD反编 ...