目录
一、会占位的方式:
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 的内容会被读取。