首页 > 代码库 > 关于元素的隐藏
关于元素的隐藏
又是好久没写博客了。每每想写篇博客,却发现比我写得好的多不胜数。
当然,写博客的初心不会为了攀比和炫耀,但看到别人写得如此甚好,我只能自惭形秽了。
于是选择了摘抄在自己的笔记里(oneNote中),在此也向那些写博客的人表达敬意。因为你们,我收获了很多。
因为你们,很多次遇到难题,我迎面而解。也感激那些无私帮助我的人。
还是就此步入正题好了,我怕偏题太远。
关于元素的隐藏:
1.display:none; ----不占空间
2.visibility:hidden; ----占空间,无法点击
2.1
position: absolute;
visibility: hidden;
---- 不占空间
3. opacity: 0;
-moz-opacity: 0; /* Moz + FF */
filter: alpha(opacity=0); /* IE*/
-----占空间,可点击(存在性能问题)
4. height:0;
overflow:hidden;
----不占空间(只能用于块元素,因为行内元素设置高无效)
5. font-size:0
----不占空间 (某些浏览器不支持,存在兼容问题)
6. text-indent: 9999px; -----设一个很大值
height: 20px;
overflow: hidden;
-----占空间,可点击(只能用于块元素,因为text-indent只用于块元素首行)
text-indent 可设一个很大的正值或者负值 视情况而定
7. line-heihgt:500px; -----设一个很大的值
height:50px;
overflow:hidden;
-----占空间,可点击(只能用于块元素)
8. position: relative;
top: -99999em;
-----占空间,可点击
9. position: absolute;
top: -99999em;
----不占空间
10. zoom: 0.001;
-moz-transform: scale(0);
-webkit-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
-----不占空间(IE下好使,谷歌下内联元素不正常)
11.如果支持的话,字体与背景颜色一致 也可伪隐藏效果
css总是那么的神奇。。。