总结——visibility和display
最近工作中用到了显示和隐藏——visibility和display，它们两个都有显示隐藏的意思，但是又有所差别，接下来我们先看一下效果吧。
当没有效果的时候，我们展示一下源码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style> body, table {
font-size: 12px;
} table {
table-layout: fixed;
empty-cells: show;
border-collapse: collapse;
margin: auto;
} td {
height: 30px;
width: 556px;
} h1, h2, h3 {
font-size: 12px;
margin: ;
padding: ;
} .table {
border: 1px solid #cad9ea;
color: #;
} .table th {
background-repeat: repeat-x;
height: 30px;
} .table td, .table th {
border: 1px solid #cad9ea;
padding: 1em ;
} .table tr.alter {
background-color: #f5fafe;
} </style>
</head>
<body>
<table class="table">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
首先，先看一下visibility：hidden和visibility：visible
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style> body, table {
font-size: 12px;
} table {
table-layout: fixed;
empty-cells: show;
border-collapse: collapse;
margin: auto;
} td {
height: 30px;
width: 556px;
} h1, h2, h3 {
font-size: 12px;
margin: ;
padding: ;
} .table {
border: 1px solid #cad9ea;
color: #;
} .table th {
background-repeat: repeat-x;
height: 30px;
} .table td, .table th {
border: 1px solid #cad9ea;
padding: 1em ;
} .table tr.alter {
background-color: #f5fafe;
} </style>
</head>
<body>
<table class="table">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr style="visibility:hidden">
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
上面这段代码在页面中显示的效果：上设置visibility属性为hidden，第二行会消失——也就是我们说的隐藏。但在页面上保留该元素的空间。
总结visibility特性：
| visibility:visible ——元素可见，默认值 |
| visibility:hidden ——元素不可见，但仍然为其保留相应的空间。使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。 |
| visibility:collapse ——只对table对象起作用，能移除行或列但不会影响表格的布局。如果这个值用在table以外的对象上则表现为hidden |
| visibility:inherit ——继承上级元素的visibility值 |
| js的style.visibility ——
将元素visibility属性设为 hidden，隐藏该元素内容，但占用域的空间。 |
接着，看一下display：none和display：block
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style> body, table {
font-size: 12px;
} table {
table-layout: fixed;
empty-cells: show;
border-collapse: collapse;
margin: auto;
} td {
height: 30px;
width: 556px;
} h1, h2, h3 {
font-size: 12px;
margin: ;
padding: ;
} .table {
border: 1px solid #cad9ea;
color: #;
} .table th {
background-repeat: repeat-x;
height: 30px;
} .table td, .table th {
border: 1px solid #cad9ea;
padding: 1em ;
} .table tr.alter {
background-color: #f5fafe;
} </style>
</head>
<body>
<table class="table">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr style="display:none">
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
当第二行设置为display：none的时候，第二行会消失并且原来所在的位置变成第三行。当设置为display：block，又会显示出来。
总结display：
block：
表现为一个块级元素（一般情况下独占一行）
当display被设置为block(块)时，容器中所有的元素将会被当作一个单独的块，就像<DIV>元素一样，它会在那个点被放入到页面中。(实际上你可以设置<span>的display:block，使其可以像<DIV>一样工作。
inline:
表现为一个行级元素（一般情况下不独占一行）
将display设置为inline，将使其行为和元素inline一样---即使它是普通的块元素如<DIV>，它也将会被组合成像<span>那样的输出流。
none:
元素不可见，并且不为其保留相应的位置
最后是display被设置：none,这时元素实际上就从页面中被移走，它下面所在的元素就会被自动跟上填充。
Display的使用
1、display默认属性值为块级的元素：
adress,quote,body,xmp,center,col,colgroup,dd,dtr,div,
dl,dt,fieldset,form,hn,hr,iframe,legend,listing,marquee,
menu,ol,p,plaintext,pre,table,td,th,tr,ul
2、display默认属性值为none的元素：
br,frame,nextid,tbody,tfoot,thead
3、li元素的display属性默认值为：list-item
4、其他元素display属性默认值都为inline
Display的特性
改变元素的display属性将对周围元素造成的影响有：
1、在属性值设为block的元素后面添加新行
2、从属性值设为inline的元素所在行中删除一行
3、隐藏属性值设为none的元素并且释放该元素在文档中所占的物理空间，对于其他元素来说，相当于该元素不存在，因此，该元素的位置被其他元素顶替
display:none;
使用该属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”;
display:none:
1、JS读取元素属性值
如果在样式文件或页面文件代码中直接用display:none对元素进行了隐藏，载入页面后，在没有通过js设置样式使元素显示的前提下，使用js代码会无法正确获得该元素的一些属性，比如offSetTop,offSetLeft等，返回的值会为0，通过js设置style.display来使元素显示后才能正确获得这些值。
2、SEO优化时需要注意
使用display:none隐藏的元素不会被百度等搜索网站检索，会影响到网站的SEO，某些情况下可以使用left:-100000px来达到同样效果。
3、样式文件
如果是通过样式文件或<style>css</style>方式来设置元素的display:none样式，用js设置style.display=""并不能使元素显示，可以使用block或inline等值来代替。通过style="display:none"直接在元素上进行的设置不会有这个问题
style.display
将元素display属性设为 block，会在该元素后换行。
将元素display属性设为 inline，会消除元素换行。
将元素display属性设为 none，隐藏该元素内容，且不占用域的空间。
总结——visibility和display的更多相关文章
- visibility和display的异同
都有隐藏节点的作用. visibility:hidden; display:none; (1)visibility 规定了元素是否可见,即使不可见也会占用上面的空间,在这里就是在指它与display的 ...
- visibility，display区别
visibility:hidden,display:none 前者隐藏位置还在,后者隐藏位置消失
- CSS:opacity:0,visibility:hidden,display:none的区别
CSS中opacity=0,visibility=hidden,display=none的时候,三者有什么区别呢?? 参考了stackoverflow的博客,才发现区别如下所示: Here is a ...
- 表单元素（控件）不可见，你用visibility还是display？(转)
属性大比拼:visibility和display的介绍 今天在做一个表单时涉及到这方面,当选中相应的选项后设置相应的几个元素(控件可见或不可见),后来还是用了visibility来实现.我们先来看下v ...
- CSS中用 opacity、visibility、display 属性将 元素隐藏 的 对比分析
说明 opacity 用来设置透明度 display 定义建立布局时元素生成的显示框类型 visibility 用来设置元素是否可见. opacity.visibility.display 这三个属性 ...
- visibility和display的区别
大多数人很容易将CSS属性display和visibility混淆,它们看似没有什么不同,其实它们的差别却是很大的. visibility属性用来确定元素是显示还是隐藏的,这用visibility=& ...
- CSS visibility与display 属性
所有主流浏览器都支持 visibility 属性. 注释:任何的版本的 Internet Explorer (包括 IE8)都不支持 "inherit" 和 "colla ...
- transition与visibility与display
http://www.zhangxinxu.com/wordpress/2013/05/transition-visibility-show-hide/ 术语解释是: visibility: 离散步骤 ...
- HTML 显示/隐藏DIV的技巧(visibility与display的差别)
参考链接:http://blog.csdn.net/szwangdf/article/details/1548807 div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白: ...
随机推荐
- （4）html表格
本节解说 :html的表格 表格: *<table></table> 标签定义 HTML 表格. *简单的 HTML 表格由 table 元素以及一个或多个 tr.th 或 t ...
- c语言操作符 “++”另类行为
正常情况下,我们使用++ int a = 1; a++; printf(“%d”,a); // 2; 很简单没什么好说的. #include <stdio.h> int main() ...
- Django 1.6 最佳实践: 如何设置django项目的设置(settings.py)和部署文件(requirements.txt)
Django 1.6 最佳实践: 如何设置django项目的设置(settings.py)和部署文件(requirements.txt) 作者: Desmond Chen,发布日期: 2014-05- ...
- 微信公共服务平台开发（.Net 的实现）6-------自定义菜单
用户自定义菜单制作时,需要用到access_token,我们直接使用前面讲解的IsExistAccess_Token()函数.我理解的微信公共平台里面菜单分为button和sub_button,即菜单 ...
- ssl/https双向验证的配置
1.SSL认证 不需要特别配置,相关证书库生成看https认证中的相关部分 2.HTTPS认证 一.基本概念 1.单向认证,就是传输的数据加密过了,但是不会校验客户端的来源 2.双向认证,如果客户端 ...
- cocos2d-x 2.2 移植wp8遇到的坑
这两天正在将之前的一款cocos2d游戏,移植到wp平台上,这里记录一下所遇到的问题以及解决方法. 我是用的cocos2d下面的例子程序进行修改的. 遇到的第一个问题是资源路径的问题,当时我把解决方案 ...
- 内存管理和@property的属性
内存管理和@property的属性 目录 对内存管理的理解 Objective C内存管理方式 内存的管理 对象的所有权和内存管理原则 合理解决内存管理带来的问题 自动释放池 @property的属性 ...
- 数据剪切命令cut和数据粘贴命令pastte
在Windows中,经常从一个文件将一段文本移动到另一个文件中.在Linux中执行这个任务的是cut和paste命令. 一.数据剪切命令cut 命令格式: cut [option] [file] 常用 ...
- Ubuntu下安装可视化SVN客户端Rabbitvcs
如果你用过Windows下的tortoisesvn,肯定会感叹,同样是开源程序,为什么这些开源的东西不在开源的系统上先跑呢? 不用着急,那边有个乌龟,这篇有只兔子,只是看了太多的龟兔赛跑的故事,不知到 ...
- php 换行 空格分割处理
<?php function parse_specification($specification){ $rt=array(); $lines=array_filter(preg_split(& ...