css元素掩藏基本原理及display:none和visibility:hidde

日期:2020-12-14 类型:科技新闻 

关键词:如何创建网站,免费网站建站,网站建设文章,网站建设7个基本流程,自动建站

1、CSS元素掩藏
在CSS中,让元素掩藏(指显示屏范畴内肉眼不能见)的方式许多,有的占有室内空间,有的不占有室内空间;有的能够回应点一下,有的不可以回应点一下。1个1个看。

拷贝编码
编码以下:

{ display: none; /* 不占有室内空间,没法点一下 */ }
/********************************************************************************/
{ visibility: hidden; /* 占有室内空间,没法点一下 */ }
/********************************************************************************/
{ position: absolute; top: ⑼99em; /* 不占有室内空间,没法点一下 */ }
/********************************************************************************/
{ position: relative; top: ⑼99em; /* 占有室内空间,没法点一下 */ }
/********************************************************************************/
{ 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);
/* 不占有室内空间,没法点一下 */
}

2、display:none和visibility:hidden
现阶段,我所了解的不一样有3点(欢迎填补):
1.室内空间占有
2.回流与3D渲染
3.连累性
display:none掩藏造成reflow和repaint(回流与重绘),而visibility:hidden沒有这个危害前端开发特性的难题;第3点估算是很多同行业不知道道的,便是“连累性”层面的差别。
所谓“连累性”,便是假如先祖元素遭受某祸患,则其子子孙后代孙无1列外也要遭殃。display:none便是“连累性”显著的申明:1旦父连接点元素运用了display:none,父连接点及其子孙后代连接点元素所有不能见,并且不管其子孙后代元素怎样不屈地挣扎都于事无补。
在具体的web运用中,大家要常常完成1些显示信息掩藏的作用,因为display:none自身特点和jQuery潜伏的驱动器,使得大家对display:none这类掩藏特点非常熟知。因而,长此以往会产生较为坚固的感情化了解,并没有法防止地将这类了解转移到别的相近主要表现特性(eg. visibility)的了解上,再再加1些基本工作经验……
举例来讲吧,一般状况下,大家给1个父元素运用visibility:hidden,则其子孙后代子孙后代也都会所有不能见。因而,大家就会有相近的了解转移:运用了visibility:hidden申明下的子孙后代元素怎样不屈地挣扎都解决不上不能见被扼杀的运势。而具体上却存在掩藏“无效”的状况。
什么时候掩藏“无效”?很简易,假如子孙后代元素运用了visibility:visible,那末这个子孙后代元素又会刘谦般地呈现出来。
 
visibility便是这样1个funny的特性。
比照总结
display:none是个非常丧心病狂的申明,子孙后代子孙后代所有搞死(连累性),并且连块下葬的地区都不留(不留室内空间),致使全体人员群众哗然(3D渲染与回流)。
visibility:hidden则具备人道主义现实主义关爱,尽管不可已搞死子孙后代,可是子孙后代能够根据1定方式防止(伪连累性),并且人死之后全尸,墓地俱全(占有室内空间),中国群众较为恬淡(无3D渲染与回流)。