inline-block的使用

inline-block是什么

　　inline和block是css中元素display属性的两个选项，而inline-block可以说是介于两者之间的属性值。

• inline使元素成为内联元素(inline elements)，而block则使之成为块级元素(block elements)。

• inline元素里面只能放inline元素。 块级元素的特点是独占一行，并能设置width和height属性。

• 内联元素不会独占行，且设置width和height属性不产生效果。 padding和margin在水平方向的值有效，但在竖直方向无效。

inline-block会让元素像内联元素一样不换行，但里面的内容仍然是块级的。

简单的应用

• 比如对一些div元素设置成display:inline-block，这样就可以在一行里放置多个div了，相比使用float的优点是不会出现浮动到第二行的元素不会因为第一行有过高的div而导致浮动时被挡住（但是flex布局出现后，一般对div不再设置为display:inline-block了。因为flex的响应式的特点使其更为强大，bootstap也是采用flex布局的）。

• 更有用的地方，比如对一个a元素进行设置，这样就可以对链接设置高度的同时保持不换行的特性了。