display:block,inline,inline-block,none的区别

Posted 2022-04-02 xxcnhj

display几个常用的属性以及区别

none,block,inline,inline-block;

none:会隐藏元素,不占据dom空间,下文会提到;

block:块级元素,前后会有换行符,占据一行;可以进行宽高设置,上下左右的padding,margin属性也可以设置;

inline:行内元素,前后没有换行符,不能进行宽高设置;由左到右,从上到下排列,不可以设置上下margin,padding属性;

inline-block:既有宽高属性,又不会换行;

 

display:none跟visibility:hidden的区别

display:none,让元素隐藏而且不占据dom空间,其他元素可以占据这个空间;

visibility:hidden,也是让元素隐藏但是会占据dom空间,其他元素不能占据这个空间;