前端面试题-display:none和visibility:hidden的区别
一、display:none和visibility:hidden的区别
1.1 空间占据
1.2 回流和渲染
1.3 株连性
二、空间占据
display:none 隐藏后的元素不占据任何空间,而 visibility:hidden 隐藏的元素空间依旧存在。
三、回流和渲染
display:none 隐藏产生回流和重绘(reflow 和 repaint),而 visibility:hidden 只产生重绘。
三、株连性
display:none 就是“株连性”明显的声明:一旦父节点元素应用了 display:none,父节点及其子孙节点元素全部不可见,而且无论其子孙元素如何不屈地挣扎都无济于事。
四、隐藏失效
若子孙元素应用了 visibility:visible,则这个子孙元素不但不会隐藏,而且会显现出来。
Code
Example
前端面试题-display:none和visibility:hidden的区别的更多相关文章
- display:none;与visibility:hidden;的区别
visibility:隐藏对应的元素但不挤占该元素原来的空间.display:隐藏对应的元素并且挤占该元素原来的空间. 下面来看visibility和dispaly的一些参数 visibility用来 ...
- 个人收集(转载)CSS中 display:none和visibility:hidden的区别
visibility和display两个属性都有隐藏元素的功能,display:none和visibility:hidden的区别,简单的总结一句话就是:visibility:hidden隐藏,但在浏 ...
- display:none和visibility:hidden的区别?
css控制元素不可见的方法 { display: none; /* 不占据空间,无法点击 */ } /************************************************* ...
- display:none与visibility: hidden的区别
display:none和visibility: hidden都能把网页上某个元素隐藏起来,但两者有区别: display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失. ...
- CSS样式display:none和visibility:hidden的区别
同样是隐藏,display:none与visibility:hidden有什么区别呢? 虽然display:none与visibility:hidden都能达到隐藏可见元素的作用(视觉上),但事实上, ...
- display:none和visibility:hidden的区别[]
display:none和visibility:hidden都是把网页上某个元素隐藏起来的功能,但两者有所区别,我发现使用 visibility:hidden属性会使对象不可见,但该对象在网页所占的空 ...
- [HTML/CSS]display:none和visibility:hidden的区别
写在前面 在群里有朋友问这样一个问题,display:none的标签,影响了布局.这就引出了本篇这样的问题,印象中display:none的块元素是不占位置的. 一个例子 <!DOCTYPE h ...
- css中display:none与visibility: hidden的区别
display: none; 隐藏元素,不占用其本来空间------对应元素显示用的是display:block; visibility: hidden:元素隐藏,占用其本来的页面空间-------- ...
- 【重点--web前端面试题总结】
前端面试题总结 HTML&CSS: 对Web标准的理解.浏览器内核差异.兼容性.hack.CSS基本功:布局.盒子模型.选择器优先级及使用.HTML5.CSS3.移动端适应. JavaScri ...
随机推荐
- Nginx入门到实战
location 语法 location 有”定位”的意思, 根据Uri来进行不同的定位. 在虚拟主机的配置中,是必不可少的,location可以把网站的不同部分,定位到不同的处理方式上. 比如, 碰 ...
- icon.css
.icon-blank{ background:url('icons/blank.gif') no-repeat; } .icon-add{ background:url('icons/edit_ad ...
- 客户端数据存储cookie、localStoeage、sessionStorage(小记)
一.数据存储分为客户端存储和服务端存储 1.而对于客户端存储,在html5以前只能通过cookie来实现:html 5以后增加了web存储(实际保存本地)的功能 (1)对于web存储有两个标准: ...
- Java内存模型(三)原子性、内存可见性、重排序、顺序一致性、volatile、锁、final
一.原子性 原子性操作指相应的操作是单一不可分割的操作.例如,对int变量count执行count++d操作就不是原子性操作.因为count++实际上可以分解为3个操作:(1)读取变量co ...
- Zuul网关跨域问题
1.跨域就指着协议,域名,端口不一致,出于安全考虑,跨域的资源之间是无法交互的.简单说就是协议不通,域名不通,端口不同都会产生跨域问题 Access-Control-Allow-Origin是HTML ...
- 必备idea 插件plugins 提高编码效率
最近发现了几个非常好用 提高编码效率 的idea 插件 跟大家分享一下 因为idea自带的插件下载可能连接不上服务器而导致插件下载失败,所以这里推荐使用引入外部插件的方式 插件包也给你们准备好了( ...
- XPath读取xml文件
1.创建解析工厂 2.创建解析器 3.读xml文件,生成w3c.docment对象树 4.创建XPath对象 5.通过路径查找对象 例子: import javax.xml.parsers.Docum ...
- spark教程(12)-生态与原理
spark 是目前非常流行的大数据计算框架. spark 生态 Spark core:包含 spark 的基本功能,定义了 RDD 的 API,其他 spark 库都基于 RDD 和 spark co ...
- Java Web开发技术教程入门-自定义标签
回顾: 昨天了解了JSP开发的两种模式Model1和Model2模式.Model1采用JSP+JavaBean技术开发Web应用,它比较适合小规模应用的开发,效率较高,易于实现.但由于在Model1中 ...
- java 给定一个日期期间 返回形如Mar 2015 3/20-3/31的数据
最近一个项目中有个前台对于表头要求: 给定一个日期期间返回形如 Mar 2015 3/20-3/31Apr 2015 4/1-4/30 这样的月年数据,简单的写了下代码,暂时没想到更好的办法 例如传进 ...