css-display:none和visibility:hidden的不同
摘自张鑫旭老师的博客——
display:none和visibility:hidden都能使元素隐藏,但是有明显区别,主要有以下三点:
- 空间占据
- 重排与重绘
- 株连性
1、空间占据。
使用display隐藏后,元素不占用任何空间,而visibility占据的空间仍在。
2、重排与重绘
reflow和repaint。由于display隐藏后占据的空间不存在了,所以导致页面的重排与重绘;而visibility占据空间仍在,不引起重排重绘,所以前者会对性能产生影响。
3、株连性
如果父元素应用了display:none,那么子元素无论如何都没有办法显示出来,所以其具有明显的“株连性”;visibility在父元素hidden后,如果子元素应用了visible,那么子元素仍然会显示出来。
css-display:none和visibility:hidden的不同的更多相关文章
- CSS display:none和visibility:hidden区别
你知道CSSdisplay:none和visibility:hidden的区别吗,这里和大家分享一下,使用CSS display:none属性后,HTML元素(对象)的宽度.高度等各种属性值都将&qu ...
- [HTML/CSS]display:none和visibility:hidden的区别
写在前面 在群里有朋友问这样一个问题,display:none的标签,影响了布局.这就引出了本篇这样的问题,印象中display:none的块元素是不占位置的. 一个例子 <!DOCTYPE h ...
- display:none;与visibility:hidden;的区别
visibility:隐藏对应的元素但不挤占该元素原来的空间.display:隐藏对应的元素并且挤占该元素原来的空间. 下面来看visibility和dispaly的一些参数 visibility用来 ...
- CSS样式“display:none”与“visibility:hidden”区别
CSS样式“display:none”和“visibility:hidden”都可以实现将页面元素隐藏,但是具体的效果是有差别的!下面通过两个小实验来说明这种差异. 实验代码: <!DOCTYP ...
- CSS样式display:none和visibility:hidden的区别
同样是隐藏,display:none与visibility:hidden有什么区别呢? 虽然display:none与visibility:hidden都能达到隐藏可见元素的作用(视觉上),但事实上, ...
- css元素隐藏(display:none和visibility:hidden)
在css中, display:none和visibility:hidden都能够使元素隐藏.但是两者所带来的效果完全不同. css display:none 当使用该样式的时候,HTML元素的宽高等 ...
- CSS魔法堂:display:none与visibility:hidden的恩怨情仇
前言 还记得面试时被问起"请说说display:none和visibility:hidden的区别"吗?是不是回答完display:none不占用原来的位置,而visibilit ...
- 个人收集(转载)CSS中 display:none和visibility:hidden的区别
visibility和display两个属性都有隐藏元素的功能,display:none和visibility:hidden的区别,简单的总结一句话就是:visibility:hidden隐藏,但在浏 ...
- [转]CSS Display(显示) 与 Visibility(可见性)
CSS Display(显示) 与 Visibility(可见性) display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏. 隐藏元素 - display:non ...
- CSS Display(显示) 与 Visibility(可见性)
display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏. Box 1 Box 2 Box 3 隐藏元素 - display:none或visibility:hid ...
随机推荐
- Unix Linux 通用vi命令,使用帮助手册【珍藏版】
Vi 简介 Vi 是 Unix 世界里极为普遍的全萤幕文书编辑器,几乎可以说任何一台 Unix 机器都会提供这套软体.Linux 当然也有,它的 vi 其实是 elvis(版权问题),不过它们都差不多 ...
- 解决idea中执行maven命令失败的问题
1.问题描述 如上图所示,在使用idea 里的maven命令执行项目打包时,有时候会报如下一个错误. -Dmaven.multiModuleProjectDirectory system proper ...
- Android layout_weight理解
layout_weight属性只能用于LinearLayout布局,不能用于RelativeLayout等其他布局: layout_weight属性如果不设定,默认值为0: layout_weight ...
- Oracle解锁,解决“ora00054:资源正忙”错误
Oracle解锁,解决“ora00054:资源正忙”错误 一.处理步骤:--1.获取被锁对象的session_idSELECT session_id FROM v$locked_object; --2 ...
- 下一代Asp.net开发规范OWIN(1)—— OWIN产生的背景以及简单介绍
随着VS2013的发布,微软在Asp.Net中引入了很多新的特性,比如使用新的权限验证模块Identity, 使用Async来提高Web服务器的吞吐量和效率等.其中一个不得不提的是OWIN和Katan ...
- 当 IDENTITY_INSERT 设置为 OFF 时,不能向表 'OrderList' 中的标识列插入显式值
问题描述:在SQL SERVER 2008中,向数据表中字段插入数据时,会报错,错误如下: 当 IDENTITY_INSERT 设置为 OFF 时,不能向表 'OrderList' 中的标识列插入显式 ...
- mybatis 配置返回集合collection时只有一条记录
查询语句配置如下: <select id="selectCustomerList" resultMap="CustomerDtoMap" paramete ...
- android onActivityResult无效或先执行或无回传问题
我的问题属于第一种情况,更改后下确有回传结果. (http://www.cnblogs.com/tt_mc/p/3586834.html) Android Activity的加载模式和onActivi ...
- CSS3动画事件
CSS3 的动画效果强大,在移动端使用广泛,动画执行开始和结束都可以使用JS来监听其事件. animationstart animationend 以下是一个示例 <!DOCTYPE html& ...
- 学习Linux的编码风格
对于编码,每个码农或许都会有自己的一套风格,很多人可能对编码风格压根就不关心,因为最终编译器编译出来的目标代码并不会受影响.但是在开发一个大型项目时,花费时间成本最多的永远是开发者们之间的沟通与交流. ...