'display' VS 'visibility'
常用的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'的更多相关文章
- display和visibility的区别
一.display和visibility的相同与不同点 1.相同点:display和visibility都有讲元素隐藏的意思 2.不同点:display是元素隐藏,隐藏的元素不占文档流 而visibi ...
- 控制HTML元素的显示与隐藏——display和visibility
有些时候我们需要根据某些条件来控制Web页面中的HTML元素显示还是隐藏,可以通过display或visibility来实现.通过下面的例子了解display和visibility的区别,简单的例子代 ...
- display 与 visibility
项目开发中经常会遇到需要显示和隐藏DOM元素.常用的两个是display,visibility属性,高级点的会用到angularJS的ng-show,ng-if指令. W3标准对这个两个属性的解释如下 ...
- CSS display和visibility的用法和区别
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt408 大多数人很容易将CSS属性display和visibility混淆,它 ...
- display、visibility、visible区别
标签的隐藏可以有三种:display.visibility.服务器控件的visible. 显然,这三者都能起到隐藏与显示的效果,但是用途确完全不一样,请看用法与区别: <div style=&q ...
- 基础总结(04)-- display:none;&&visibility:hidden;区别
display:none 1.使元素隐藏,不再占据空间. 2.动态操作时会引起页面回流和重绘,影响性能. 3.子元素也会被隐藏并且添加display:block/visibility:visible无 ...
- 前端学习 -- Css -- display和Visibility
display 将一个内联元素变成块元素,通过display样式可以修改元素的类型.可选值: 1 inline:可以将一个元素作为内联元素显示. 2 block: 可以将一个元素设置块元素显示. 3 ...
- DIV中display和visibility属性差别
DIV中display和visibility属性差别 DIV中display和visibility属性差别还是挺大的,虽然Visibility和Display属性都可以达到隐藏页面元素的目的,但它们的 ...
- 【总结整理】display、visibility、overflow的隐藏问题
display.visibility.overflow的隐藏问题 http://blog.sina.com.cn/s/blog_85e7c239010151r4.html display:bloc ...
- div和span、relative和absolute、display和visibility的区别
一.div和span的区别 div是一个块级元素,可以包含段落,表格等内容,用于放置不同的内容.一般我们在网页通过div来布局定位网页中的每个区块. span是一个内联元素,没有实际意义,它的存在纯粹 ...
随机推荐
- [.net 面向对象程序设计进阶] (8) 托管与非托管
本节导读:虽然在.NET编程过程中,绝大多数内存垃圾回收由CLR(公共语言运行时)自动回收,但也有很多需要我们编码回收.掌握托管与非托管的基本知识,可以有效避免某些情况下导致的程序异常. 1.什么是托 ...
- 如何开始DDD(完)
连续写了两篇文章,这一篇我想是序的完结篇了.结合用户注册的例子再将他简单丰富一下.在这里只添加一个简单需求,就是用户注册成功后给用户发一封邮件.补充一下之前的代码 public class Domai ...
- 使用SqlBulkCopy类来批量复制数据
DataTable dt = new DataTable(); dt.Columns.Add("id", typeof(string)); ; i < ; i++) { Da ...
- Redis学习笔记~是时候为Redis实现一个仓储了,RedisRepository来了
回到目录 之前写了不少关于仓储的文章,所以,自己习惯把自己叫仓储大叔,上次写的XMLRepository得到了大家的好评,也有不少朋友给我发email,进行一些知识的探讨,今天主要来实现一个Redis ...
- Bootstrap~表单Form
回到目录 在进行自己的后台改版时,大体布局都使用了bootstrap,剩下的表单部分没理由不去使用它,对于表单的美化和布局,bootstrap做的也是很不错的,有大气的边框,多功能的按钮及宏观的表单布 ...
- Atitit java jsp 新的tag技术
Atitit java jsp 新的tag技术 1.1. Tag Files vs 原生写 SimpleTag 比较麻烦的 JSP 1.x 允许 Web 开发人员创建 Java 组件(称为标记处 ...
- atitit。wondows 右键菜单的管理与位置存储
atitit.wondows 右键菜单的管理与位置存储 原理 .这样的功能称为Windows外壳扩展(Shell Extensions) 1 常用右键菜单 atiContentMenu1 通用tool ...
- eclipse根据父类打开子类快捷键
1.打开类 2.双击选中 3.Ctrl+T,打开实现类
- IIS集成模式下,URL重写后获取不到Session值
近期给公司网站添加了伪静态功能,但是今天发现了在伪静态的页面中,Session值是获取不到的. 原因是在伪静态请求的时候,Session请求被“过滤”掉了. 开始是把web.config文件中的mod ...
- Java 7 中的Switch 谈 Java版本更新和反编译知识
Java 7 中的Switch 谈 Java版本更新和反编译知识 学习编程,享受生活,大家好,我是追寻梦的飞飞.今天主要讲述的是Java7中的更新Switch实现内部原理和JAD反编 ...