display属性最详解

display的各种属性如下表:

下面我们来仔细说说主要用到的四种 :none,inline,block,inline-block

inline(默认值):

将设置该元素的标签以内联元素即像普通文本一样插入文档流,不会自动换行或者设置宽度跟高度;

其中设置该元素的标签的宽度跟高度以放入的该标签的元素的宽高为准,不允许修改。

 

block:

将绑定该属性的标签以块的形式插入到文档流中,即会自动设置宽跟高并,且会换行,说俗一点也就是我们口中的块,他会单独的占一行,可以设定margin 跟padding。

inline-block:

将绑定该元素的标签以inline内联样式插入到文档流中,然后它本身拥有block块的属性,可以设置宽度跟高度,通俗的说也就是,把我们要放的东西先以不换行的形式放到一个块中,然后再将这个块保存到我们的页面中。

none:

将该元素隐藏,不会再文档流中出现,所谓的文档流也就是文档中可显示对象在排列时所占用的位置。

猜你喜欢

转载自blog.csdn.net/qq_39429962/article/details/82889231