block,inline和inline-block详解+案例

这是继小程序的坑了解而来:

代码+看图会更明确。发现放程序会跳行效果不好,后来加了一张图。

block,inline和inline-block详解+案例

block,inline和inline-block详解+案例

 

显示:内联

内联元素,简单的说就是具有此性质元素都会在同一行显示,除非这一行排列不下了才会在下一行显示,而且设置的宽度,高度属性都无效。

显示:块

块级元素,简单来说具有此性质的元素会独占一行,此时可以设置称重以及高度属性。

显示:内联块

 结合了直列以及块各自的属性,就是在同一行的块属性。可以设置宽度以及高度属性。

详情请参考此文章:块,内联和内联块详解+案例