文档章节

overflow、display、visibility的区别?

spademan
 spademan
发布于 2013/11/01 11:24
字数 585
阅读 208
收藏 11

Overflow:hidden

对行内元素无效,必须是块级元素,并且设置宽度高度。

Overflow:hidden,隐藏之后元素依然占据着位置。

Display:none

使用此属性之后元素不存在了,元素占据的位置也不存在。

Visibility:hidden

使用此属性之后元素不存在了,元素占据的位置依然存在。

他们大概有三点不同

(1)空间占据性(就是我们一般一般的小白理解的)

(2)回流与渲染性

(3)可怕的珠连性

第一点我们就不浪费口舌了,还是从第二点开始啦。display:none显示隐藏会产生回流和重绘的问题,影响前端的性能;而visibility:hidden则没有此问题的出现。所以在使用的时候要综合考虑,无论从性能还是功能。

不过平时我们的特效区别最多的可能还是第三点珠连性。

一般来说,我们给父元素设置了display:none,其后代子孙会全部消失;如果这时候出现一个需求需要显示某个子元素,这时候无论我们怎么设置,子 元素也不会出现的,所以巨坑爹有木有(话说百度笔试大题目就是考察的这点有木有,自我感觉良好,其实已经被封杀)。作为九头驴也拉不回来的想积极投身我大 前端的小白来说,着实头疼了,好吧,带着困惑我先来问问度娘吧,还是度娘实在,给我推荐了鑫旭前辈的一篇博文,待我仔细一瞅,嘿嘿,不错,正是妹子所需, 小心脏瞬间爆棚有木有。

哦啦,瞬间发现其中玄机,原来visibility:hidden木有珠连性,这时候我把父元素设置visibility:hidden,而子元素设置visibility:visible,孩子们就奇迹般的出现了,好开心有木有(我的http://blog.sina.com.cn/s/blog_8fa52d3f0101n6wh.html这篇博文就是利用了这一点写的一个css悬浮代码)。

接着overflow:hidden与height:0的组合运用

overflow是“溢出隐藏”,也就是盒子以外的元素全部切掉,加上height:0,一般的块状元素孩子元素会全部消失,但是存不存在特殊情况呢?



本文转载自:http://blog.sina.com.cn/s/blog_8fa52d3f0101mvju.html

spademan
粉丝 8
博文 92
码字总数 39247
作品 0
广州
前端工程师
私信 提问
CSS display:none和visibility:hidden区别

你知道CSS display:none和visibility:hidden的区别吗,这里和大家分享一下,使用CSS display:none属性后,HTML元素(对象)的宽度、高度等各种属性值都将“丢失”;而使用visibility:hidden属...

随智阔
2013/02/27
0
0
CSS 清除浮动

方法一: .cl:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .cl { zoom: 1; / for IE6 IE7 / } 方法二: 1. .clearfloat {clear:bo......

IT追寻者
2016/05/31
10
0
【web前端面试题整理05】做几道前端面试题休息休息吧

前言 连续学了两天javascript的东西了,我们都累了,于是今天还是上一套面试题吧,大家一起休息休息,也为下个星期可能会有的面试准备下。 题目一览 CSS overflow-x 属于 CSS2 还是 CSS3 请列...

范大脚脚
2017/12/28
0
0
表单元素(控件)不可见,你用visibility还是display?

display和visibility混淆,它们看似没有什么不同,其实它们的差别却是很大的。在做表单元素不可见上,你用你用visibility还是display?本文给你讲解。 AD: 本节通过向大家描述display和vis...

Carl_
2014/08/18
0
0
css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?一起来$('.float')

一、抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class="outer"> <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div></div> 分析CSS......

乐派电影
2014/04/11
138.6K
3

没有更多内容

加载失败,请刷新页面

加载更多

PostgreSQL在启动时如何分配共享缓存

相信很多人知道 shared_buffers 这个参数,它设置共享缓存的大小,本篇简单讲一下它是怎样分配的。 1、参数设置(src/backend/utils/misc/guc.c) /* * We sometimes multiply the numbe...

有理想的猪
22分钟前
0
0
jsonFormat注解导致时间后台和页面差8小时

阿里云提醒fastjson < 1.2.51 远程代码执行漏洞。 jar包升级1.1.40升级到1.2.58后前台和后台拿到的时间数据差8小时。 解决方法,在实体注解上添加内容 @JsonFormat(pattern = "yyyy-MM-dd HH...

S三少S
23分钟前
40
2
Linux全自动网络安装 —— PXE

前言: 最近整理一些以前的学习笔记。 过去都是存储在本地,此次传到网络留待备用。 网络装机的优势: 1).规模化:同时装配多台主机; 2).自动化:自动装系统、配置等各种服务; 3).远程实现...

迷失De挣扎
34分钟前
4
0
Spark利用Broadcast实现Join避免Shuffle操作

在Spark中, 诸如ReduceByKey,GroupByKey等操作会触发Shuffle, 影响性能。 本文提供了一种利用广播Broadcast, 实现了join操作, 避免了Shuffle。 正常的join操作 val sc = new Spark...

dreamness
41分钟前
1
0
在 Vivado 中使用 Synopsys VCS 运行仿真

了解如何在 Vivado 中使用 Synopsys VCS simulator 运行仿真。我们将演示如何编译仿真库、为 IP 或整个项目生成仿真脚本,然后运行仿真。 http://xilinx.eetop.cn/viewnews-3057 基于 Zynq 的...

whoisliang
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部