block

  • block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
  • block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
  • block元素可以设置margin和padding属性。


  • inline

  • inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。

  • inline元素设置width,height属性无效。
  • inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

inline-block

  • 简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

inline-table

  • 以表格的形式排列成行。 显示样式如下：

list-item

  • 以列表项的形式显示，类似<li>标签。

run-in

  • 若run-in框后面不是块级框时，run-in框本身将成为块级框

flex

  • 弹性盒子或者说伸缩盒子

inline-block 在什么情况下用

元素变成行内元素且有块级元素的属性（width，height等）的时候用,比如说我们的logo放在a标签内时,想要a标签的宽和高能够包裹logo的话需要把a标签设置为inline-block

inline-block 和 float的区别

  • 使用inline-block：当你需要控制元素的垂直对齐跟水平排列时，使用inline-block。
  • 使用浮动：当你需要让元素环绕某一个元素时，或者需要支持旧版本ie，或者不想处理inline-block带来的空白问题时，使用浮动。

若父元素中的图片等高，设置浮动就会工作正常。但一旦有一列图片比较高时，图片的排列就会出现问题。这是因为浮动后，图片脱离了文档流。 而inline-block由于未脱离文档流，不会出现这个问题。如果你想再创建一列图片时，不会受到上一列图片inline:block的影响。而你在使用时需要时刻注意清除浮动，当内容不断变化时这很容易产生bug。 另一种inline-block的适用场景：横向导航栏。通常，我们一般会设置a元素display：block然后进行浮动来制作。有时候我会直接通过对列表元素设置display:inline来制作。如果在制作中，你需要设置不同的display属性来处理浮动，那么inline-block不失为一种更好的解决方案。 当你需要将元素排列成一行或者多行时，更倾向于考虑使用inline-block代替float。当然，直接使用table也是一种方法，他毕竟是专门用来处理横向与纵向排列的元素的。 如果你需要创建一个很复杂的包含行列的布局，table是你的最佳选择，不过你同样也可以考虑inline-block