通俗地解释css样式之display中inline、block和inline-block的区别

inline(行内元素)

• 将元素变成行内元素，可以与其他元素共享一行，不会独占一行。
• 不能更改元素的height、width的值
• 可以使用padding、margin更改left和right的值，但是不能更改top和bottom的值。

block(行级元素)

• 将元素变成行级元素，独占一行。
• 能够改变元素的height、width的值
• 可以使用padding、margin更改left，right，bottom，right的值
• 元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

inline-block(结合体)

• 结合了inline和block元素的特点，是行内元素，已有行级元素的部分特点。
• 可以更改元素的height、width的值。
• 可以使用padding、margin更改left，right，bottom，right的值。