在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间;有的可以响应点击,有的不能响应点击。
{ display: none; /* 不占据空间,无法点击 */ }
{ visibility: hidden; /* 占据空间,无法点击 */ }
{ 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);
/* 不占据空间,无法点击 */
}
display:none和visibility:hidden
的区别
不同有三点:
- 空间占据
- 回流与渲染
- 株连性
第一点,想必都知道;
第二点,display:none
隐藏产生reflow和repaint(回流与重绘),而visibility:hidden
没有这个影响前端性能的问题;
第三点估计是不少同行不知道的,就是“株连性”方面的差异。
所谓“株连性”,就是如果祖先元素遭遇某祸害,则其子子孙孙无一例外也要遭殃。我顿时想起了《地球反击战》或是《木乃伊之蝎子王》,一旦把母体搞跛了,小辈啊、下属啊什么的都瞬间烟消云散。display:none
就是“株连性”明显的声明:一旦父节点元素应用了display:none
,父节点及其子孙节点元素全部不可见,而且无论其子孙元素如何不屈地挣扎都无济于事。
在实际的web应用中,我们要经常实现一些显示隐藏的功能,由于display:none
本身特性以及jQuery潜在的驱动,使得我们对display:none
这种隐藏特性相当熟知。因此,久而久之会形成比较牢固的情感化认识,并无法避免地将这种认识迁移到其他类似表现属性(eg. visibility
)的认识上,再加上一些常规经验……
举例来说吧,通常情况下,我们给一个父元素应用visibility:hidden
,则其子孙后代也都会全部不可见。于是,我们就会有类似的认识迁移:应用了visibility:hidden
声明下的子孙元素如何不屈地挣扎都摆脱不了不可见被抹杀的命运。而实际上却存在隐藏“失效”的情况。
何时隐藏“失效”?很简单,如果子孙元素应用了visibility:visible
,那么这个子孙元素又会刘谦般地显现出来。
对比总结:
display:none是个相当惨无人道的声明,子孙后代全部搞死(株连性),而且连块安葬的地方都不留(不留空间),导致全体民众哗然(渲染与回流)。
visibility:hidden
则具有人道主义关怀,虽然不得已搞死子孙,但是子孙可以通过一定手段避免(伪株连性),而且死后全尸,墓地俱全(占据空间),国内民众比较淡然(无渲染与回流)。
height:0和overflow:hidden的组合
overflow:hidden用中文理解就是“溢出隐藏”,也就是盒子以外的内容都咔嚓掉不可见的。加上height:0
,只要是一般的非inline水平元素,则元素内部所有子孙都应该是不可见的。
height:0
和overflow:hidden
组合隐藏“失效”的条件如下:祖先元素没有position:relative/absolute/fixed
声明,同时内部子元素应用了position:absolute/fixed
声明。
相关推荐
以下是一些关于如何使用CSS隐藏滚动条的详细解释和示例代码。 首先,我们可以使用`overflow`属性来控制元素的内容是否应该溢出其容器。如果希望在内容溢出时显示滚动条,可以将`overflow`设置为`auto`。例如: ```...
在CSS中实现圆角化图片是前端开发中的一个常见需求,它可以为网页元素增添美观的视觉效果。这篇博客“【转载】CSS圆角化图片(三)”可能深入探讨了如何利用CSS3的新特性来创建具有圆角的图片。虽然没有提供具体的...
- **DOM操作**:通过`document.querySelector`或`document.querySelectorAll`获取HTML元素,并使用`innerHTML`、`style`等属性修改元素内容或样式,实现图片的显示和隐藏。 - **数组方法**:如果图片较多,可能...
在三级菜单中,CSS通常会设定不同级别的菜单项的显示和隐藏状态,以及滑动动画效果。例如,通过CSS选择器可以控制鼠标悬停时菜单的展开和收起,以及子菜单的定位。 2. **HTML文件 (index.html)**: 这是网页的主体...
这类功能可以通过JavaScript控制元素的显示、隐藏和位置变化,结合CSS动画实现平滑过渡效果。 综合这些知识点,我们可以构建一个简单的示例项目,包含自定义的JavaScript提示框、字符编码处理、自动提交表单、图片...
在JSP页面内容滚动中,我们可以通过JavaScript来控制元素的显示和隐藏,实现滚动效果。例如,可以使用`setInterval`函数周期性地改变元素的位置,模拟滚动。另外,`addEventListener`可以监听用户的行为,如滚动事件...
同时,CSS也可以用于隐藏除当前显示的图片之外的所有图片,以及设置滑动动画效果。 3. **JavaScript 基础**: - 纯JS实现轮播需要掌握基本的DOM操作,包括获取元素、设置属性、添加事件监听器等。JavaScript是实现...
隐藏元素——none二.是否显示——visibility三.定位——position1.基本概念2.静态定位——static3.固定定位——Fixed Positioning4.相对定位——Relative Position5. 绝对定位——Absolute Position6.自我总结,代码...
同时,为了实现弹出和隐藏的效果,我们可以利用CSS的display属性或opacity透明度变化。 接着,CSS3的过渡效果可以增加登录弹出层的交互感。例如,使用transition属性可以平滑地改变弹出层的透明度或大小,使其更加...
这条CSS规则指定了当页面加载EasyUI的Tab组件时,如何通过CSS选择器找到对应的元素,并应用样式。具体的选择器是针对ID为“tabs”的Tabs容器下的子元素,其中包括面板(panel)以及面板内容区域(panel-body)。 ...
对于`time`类的`div`,其初始状态为隐藏,并设置为绝对定位,当需要显示时,这个`div`会以顶部出现的方式滑下。 在JavaScript部分,使用了jQuery的`hover`方法来添加鼠标事件。当鼠标滑入(`hover`的第一个函数)和...
接着,文章提供了一段CSS样式代码,用于定义界面中各个元素的布局和外观。在CSS代码中,我们能看到设置了小像框、大像框以及开始和停止按钮的样式。这些样式定义了元素的位置、尺寸、边框颜色、宽度和高度等属性。...
5. **DOM操作**:`.html()`, `.append()`, `.hide()`, `.show()`等方法用来修改或操作DOM元素,如添加新的图片,隐藏或显示特定元素。 6. **AJAX交互**:如果焦点图的内容是从服务器动态加载的,可能会用到`$.ajax...
首先,日历组件是Web应用中常见的一种交互元素,常用于日期选择或事件安排等场景。Ajax日历通过异步请求获取日历数据,可以提供流畅、无刷新的用户体验。 1. **基础架构**: - HTML:构建日历的基础结构,包括表格...
- 在路由配置文件中引入nprogress,并在路由跳转前后的钩子函数中调用nprogress的API来控制进度条的显示与隐藏。 - 设置进度条的最小显示百分比、关闭加载指示器、改变进度条颜色等。 4. **nprogress的配置项**:...
隐藏焦点 hidefocus=true 根据宽度换行 style="word-break:break-all" 自动刷新 ;URL=http://c98.yeah.net"> 简单邮件 <a href="mailto:aaa@bbb.com?subject=ccc&body=xxxyyy"> 快速转到位置 obj....