CSS 中Visibility 和 Display 属性的较量

Visibility 和 Display 属性的区别
这里有个 Demo 可以较量 visibility: hidden 和 display: none 的区别。点击页面上部的链接，页面里绿色的 Div 将会举办响应的改变。请寄望一下当绿色的 Div 属性别离被设为 visibility: hidden 和 display: none 时对其余元素会有什么影响。

Visibility 属性的用法
Visibility 属性共有四个可用的值（visible、hidden、collapse 和 inherit），但常用的值是 visible 和 hidden。

visibility: visible
/* 元素可见，默认值 */
visibility: hidden
/* 元素不行见，但如故为其保存响应的空间 */
visibility: collapse
/* 只对 table 工具起浸染，能移除行或列但不会影响表格的机关。假如这个值用在 table 以外的工具上则示意为 hidden 。 */
visibility: inherit
/* 担任上级元素的 visibility 值。 */

Display 属性的用法
Display 属性的可用值有许多，但在这里我们只存眷个中的几个值：block、none 和 inline 。

display: none
/* 元素不行见，而且不为其保存响应的位置 */
display: block
/* 示意为一个块级元素（一样平常环境下独有一行） */
display: inline
/* 示意为一个行级元素（一样平常环境下不独有一行） */

从这里可以看出，固然 Visibility 和 Display 属性都可以潜匿一个元素，但它们之间的差异点在于 visibility: hidden 在潜匿一个元素的同时如故在页面上为该元素保存所需的空间，而 display: none 则示意得像把元素从页面里删除了，在页面上看不出该元素还存在着。

其它，display: block 和 display: inline 的区别在于 block 元素会在页面中独有一行，而 inline 元素不会，有的工具默以为 block 元素，而有的工具则默以为 inline 元素，各人在行使时必要留意防备沟通属性的一再界说。

什么时辰行使 Visibility 可能 Display 属性？
Visibility 和 Display 属性固然都可以到达潜匿页面元素的目标，但它们的区别在于怎样回应正常文档流。

假如你想潜匿某元素，但在页面上保存该元素的空间的话，你应该行使 visibility: hidden 。假如你想在潜匿某元素的同时让其余内容添补空缺的话应该行使 display: none 。

在实际中我（作者）更多的倾向于行使 display 属性（信托这也是大大都人的风俗，bolo 注）。当你抉择用 display: none 来潜匿一个元素时，你必需知道其余内容将添补到该元素留下的空缺位置，从而改变页面的机关。

Visibility 和 Display 对 SEO 的影响
偶然我们会通过把堆砌的要害词潜匿而到达作弊的目标，但不该该行使 visibility: hidden 和 display: none ，而应该把要害词颜色设为和配景致沟通，可能把要害词的字号设为很是小，而令访客无法发明。

有的人则由于畏惧搜刮蜘蛛的的反感而为 visibility: hidden 和 display: none 的行使的烦恼。着实有许多大度的结果是通过元素可见性的转换而实现的，搜刮引擎也领略这一做法（究竟上搜刮引擎每每忽略 CSS，bolo 注），因此假如你的目标不是诱骗搜刮引擎，你大可以安心地行使 visibility: hidden 和 display: none 去潜匿内容。

原文链接：Visibility vs Display in CSS
转载出处：http://blog.imbolo.com/css-visibility-vs-display/

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!