码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-07-10 18:50:13      阅读:119      评论:0      收藏:0      [点我收藏+]

标签:行内元素   line   lock   隐藏元素   none   上下左右   play   排列   isp   

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空间,其他元素不能占据这个空间;

 

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

标签:行内元素   line   lock   隐藏元素   none   上下左右   play   排列   isp   

原文地址:https://www.cnblogs.com/xxcnhj/p/11165413.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!