在页面上隐藏元素的方式有哪些，分别应用在哪些场景？display:none 与 visibility:hidden 的区别

目录

一、会占位的方式：

二、不会占位的方式：

三、不同方式隐藏元素的应用

1、偏移重点代码（隐藏文字“站点名称”）

四、从性能的角度分析

五、display:none 与 visibility:hidden 的区别

结论先行：

具体分析： 

---

一、会占位的方式：

opacity: 0;

 visibility: hidden;

margin-left: -100%;

transform: scale(0); 

二、不会占位的方式：

display: none;

width: 0; height: 0; overflow: hidden;

仅仅对块内文本元素：

text-indent: -9999px; （注意：只能用于block，table cells和inline-block）

font-size: 0;

三、不同方式隐藏元素的应用

1、偏移重点代码（隐藏文字“站点名称”）

建站过程中一般会把网站名称用 h1 表示。但从美观考虑，要用 logo 图片来代替 h1。这时需要隐藏 h1 内的这段文字，但又不能对搜索引擎不友好，否则就失去了定义 h1 标签的意义。

① 一般来说，偏移掉字体的方式是使用：

text-indent:-9999px; （注意：只能用于block，table cells和inline-block）

② 具体使用方法：

把 h1 作为一个块来显示（display:block），指定长和宽（和图片一样大小）。

然后指定 h1 的背景图片，也就是将我们需要的图片作为 h1 这个标签的背景。

而 h1 标签中插入的，仍然是作为字符形式出现的博客标题，然后用 text-indent:-9999px; 将文字甩到屏幕看不到的地方。（9999px应该是足够了，谁的屏幕也没那么大吧）

③ 具体代码： 

在h1使用上语义明确，符合语义化定义。 

<h1>
　　<a href=“http://www.baidu.com”>我是标题</a>
</h1>

text-indent 就是首行缩进，一般用于在中文段落首行空两格。

这里通过负值缩进，使文字超出可视区，而这时 h1 下的背景就显示出来了。

h1 中包含的 <a> 标签又不影响使用，对于隐藏文字“站点名称”应该是最佳方案了。

但对于多段 文字的隐藏这个方法就不适合了。  

h1 a {
　　height: 30px;
　　width: 165px;
　　float: left;
　　text-indent: -9999px;
　　background-image: url(images/logo.jpg);
　　background-repeat: no-repeat;
　　display: block;
　　position: relative;
}

④ 隐藏自带的虚线框

点击<h1><a>链接时，会产生一个虚线框，对于IE还好，没什么问题，虚线框只是在背影图片大小。但是Firefox就有些麻烦，它把缩进的文字范围也包含进来了，这样不是很美观。

于是需要屏掉点击时产生的虚线框，IE和FF屏虚线框方法不一样。 

IE采用的遍历方法(HTC,css表达式)有些耗系统资源，正好我们只需要隐藏FF下的虚线框就行了，IE就不管了，说一下Firefox如何去掉链接的虚线框的方法。

Firefox去掉链接的虚线框的方法 ：

a {
　　outline:none;
　}

outline是 css3 的一个属性，用的很少。

注意：这是个不能兼容的css属性。

在 ie6、ie7、遨游浏览器都不兼容。只有 ff、ie8 在加了 outline:none 后会取消聚焦的虚线框。 

四、从性能的角度分析

disaplay: none   

页面不会渲染，可以减少首屏渲染的时间。

但是会引起回流和重绘。

不利于搜索引擎的搜索。

visibility: hidden 

页面会渲染只是不会显示

opacity: 0           

页面不会显示，但是会占据空间，只会引起重绘

五、display:none 与 visibility:hidden 的区别

结论先行：

这两个属性都可以实现隐藏元素的效果。

区别在于： 

被 display:none 设置的元素不在渲染树中，也就是渲染时不会占据空间，因此也不利于SEO。而且，修改常规文档流中元素的 display 属性值时会造成文档的重排重绘；

被 visibility:hidden 设置的元素在渲染树中，也就是渲染时会占据空间，只是内容不可见。修改 visibility 属性只会造成本元素的重绘。

display:none 是非继承属性，visibility:hidden 是继承属性。

display:none 是非继承属性，子孙节点会随着父节点从渲染树消失，通过修改子孙节点的属性也无法显示；
visibility:hidden 是继承属性，子孙节点消失是由于继承了 hidden，通过修改子孙节点的属性visibility:visible 可以让子孙节点显示；

具体分析： 

这两个属性都是让元素隐藏不可见。两者区别如下:

(1) 是否在渲染树中

display:none 不在渲染树中，渲染时不会占据任何空间；
visibility:hidden 在渲染树中，渲染的元素还会占据相应的空间，只是内容不可见；

(2) 是否是继承属性

display:none 是非继承属性，子孙节点会随着父节点从渲染树消失，通过修改子孙节点的属性也无法显示；
visibility:hidden 是继承属性，子孙节点消失是由于继承了 hidden，通过设置 visibility:visible 可以让子孙节点显示；

(3) 是否会引起文档的重排重绘

修改常规文档流中元素的 display 通常会造成文档的重排重绘；

但是修改 visibility 属性只会造成本元素的重绘;

(4) 是否被读屏器读取

如果使用读屏器，设置为 display:none 的内容不会被读取；

设置为 visibility:hidden 的内容会被读取。