您可能不知道的CSS元素隐藏“失效”以其妙用
2015-12-21 09:28
656 查看
您可能不知道的CSS元素隐藏“失效”以其妙用
by zhangxinxu from http://www.zhangxinxu.com地址:http://www.zhangxinxu.com/wordpress/?p=2191
一、CSS元素隐藏
在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间;有的可以响应点击,有的不能响应点击。后宫选秀——一个一个看。{ display: none; /* 不占据空间,无法点击 */ }
{ visibility: hidden; /* 占据空间,无法点击 */ }
{ position: absolute; clip:rect(1px 1px 1px 1px); /* 不占据空间,无法点击 */ }
{ position: absolute; top: -999em; /* 不占据空间,无法点击 */ }
{ position: relative; top: -999em; /* 占据空间,无法点击 */ }
{ position: absolute; visibility: hidden; /* 不占据空间,无法点击 */ }
{ height: 0; overflow: hidden; /* 不占据空间,无法点击 */ }
{ opacity: 0; filter:Alpha(opacity=0); /* 占据空间,可以点击 */ }
{ position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不占据空间,可以点击 */ }
{ zoom: 0.001; -moz-transform: scale(0); -webkit-transform: scale(0); -o-transform: scale(0); transform: scale(0); /* IE6/IE7/IE9不占据空间,IE8/FireFox/Chrome/Opera占据空间。都无法点击 */ }
{ position: absolute; zoom: 0.001; -moz-transform: scale(0); -webkit-transform: scale(0); -o-transform: scale(0); transform: scale(0); /* 不占据空间,无法点击 */ }
欢迎补充!
以上隐藏方法如果针对最小辈的子元素(膝下无子女),例如
<img>图片元素,则上面的注释说明都是OK的(若有误,请指正)。
我以前就提过,为了便于理解,我们会使用情感化思维,类比现实,在内心形成只属于自己的具象化的想法。这是很OK的,但是,要知道,事物是具有两面的,具象的东西容易让我们陷入固定思维模式,尤其在现实世界中非特殊情境的验证下,从而让我们不经意间产生一些错误的认识。
上面的话有点像老油条——难嚼。要让老少皆懂,很简单,举几个简单的示例就可以了。而这里的示例就是上头几个隐藏的例子:由于具象化的固定思维,您可能并不知道下面要提到的几种CSS元素隐藏“失效”的情况!
相关文章推荐
- CSS 最核心的四个概念
- CSS 最核心的四个概念
- 10030---CSS 属性选择器
- HTML 样式- CSS
- 怎么实现iMindMap中分支样式的调整
- .net MVC BundleConfig.cs 合并js和css文件说明文档
- CSS-布局模型
- DIV+CSS实操七:中文系内容模块控制文本不换行和超出指定宽度后用省略号代替
- 10029---CSS 下拉菜单 ,图片廊
- CSS position 属性
- 10028---CSS 导航栏
- CSS水平、垂直居中小结
- 一个纯CSS写的登录的样式
- css常用颜色
- 为你的WordPress博客添加CSS3炫酷读者墙
- 用CSS3实现带小三角形的div框(不用图片)
- 【遇到的问题】想写一个通用的adapter,样式一样但是数据源是不同的,怎么做
- CSS系列:CSS常用样式
- [译] 关于CSS中的float和position
- ListView 添加长度样式不固定的分割线