css中display和visibility的用法和差别详细介绍

2021-03-08 22:39 jianzhan

Display的特性值
 
block:
/*主要表现为1个块级元素(1般状况下占有1行)*/
当display被设定为block(块)时,器皿中全部的元素可能被作为1个独立的块,就像<DIV>元素1样,它会在那个点被放入到网页页面中。(具体上你能够设定<span>的display:block,使其能够像<DIV>1样工作中。
inline:
/*主要表现为1个行级元素(1般状况下不占有1行)*/

将display设定为inline,将使其个人行为和元素inline1样---即便它是一般的块元素如<DIV>,它也可能被组成成像<span>那样的輸出流。
none:
/*元素不能见,而且不为其保存相应的部位*/
最终是display被设定:none,这时候元素具体上就从网页页面中被移走,它下面所属的元素就会被全自动跟上填充。
 
visibility的特性值

visibility:visible
/*元素可见,默认设置值*/

visibility:hidden
/*元素不能见,但依然为其保存相应的室内空间*/

visibility:collapse
/*只对table目标起功效,能移除行或列但不容易危害报表的合理布局。假如这个值用在table之外的目标上则主要表现为hidden。*/

visibility:inherit
/*承继上级元素的visibility值。*/
 
Visibility:none 和 Display:hidden 的差别

display:none;
应用该特性后,HTML元素(目标)的宽度、高宽比等各种各样特性值都将“遗失”;
visibility:hidden;
应用该特性后,HTML元素(目标)仅仅是在视觉效果上看看不到(彻底全透明),而它所占有的室内空间部位依然存在,也就是说它仍具备高宽比、宽度等特性值。