css - css显示中以下内容的区别？

Question

有人问我一个问题，以下之间有什么区别，我真的不知道答案。所以这里，有什么区别，

display:inline-block 
display:inline
display:block

谢谢你的回答...

Answer 1

您正在努力解决的主要问题是您在问题下的评论中的内联块。

inline-block 是一种让块元素内联显示的方法，因此您可以在它们上使用 inline-block ，而不是将它们浮动到左侧，将它们的行为保留为 div，但将它们改为内联元素。

例如，假设您有

​&lt;div style="display:block" >Test</div>
<div style="display:block" >Home</div>​

这将呈现为

测试

家

然而

​&lt;div style="display:inline-block" >Test</div>
<div style="display:inline-block" >Home</div>​

将显示为

测试之家

此外，内联元素不能有宽度/高度属性。块元素可以。inline-block使块元素看起来像内联元素，但您仍然可以应用只有块元素可以拥有的样式。请参阅此演示。