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

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

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

<!--此时设置width以及height无效-->
<view style="display:inline;width:100px;height:100px;background:red;">AAA</view>
<view style="display:inline;width:100px;height:100px;background:hotpink;">BBB</view>

<view style="display:block;width:100px;height:100px;background:greenyellow;">AAA</view>
<view style="display:block;width:100px;height:100px;background:royalblue;">BBB</view>

<view style="display:inline-block;width:100px;height:100px;background:indigo;">AAA</view>
<view style="display:inline-block;width:100px;height:100px;background:blue;">BBB</view>


display:inline

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


display:block

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


display:inline-block

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

1,999 Comments