INLINE-BLOCK
常用的默认 display 值为 inline-block 的元素有 img 。应该没有别的常用的了。
inline-block 特点：被设定的对象的内容以 block 方式显示，但呈现形式以 inline 方式。换句话说，除了显示上在同一行，元素被当成 inline 来处理外， block 有的它全有。
inline-block 的一些特点以及一些特殊的点：
- 拥有完整的盒模型，但不会默认占一整行
- 当一个空元素设置成
inline-block或是img元素时，默认的baseline为元素盒模型的最底部（也就是margin的最底部），由于默认的vertical-align为baseline所以会导致元素的底部其实不是和父元素的底部重合的，而是有一段空隙，而空隙应该为font-size的1/4，所以为了消除这个空隙可以将font-size设置为0，或是改变默认的对其方式，但这会改变同行元素的对齐方式。关于这个vertical-align的研究应该单独谈谈，总之会影响。 - 当一个有内容的元素设置为
inline-block时，baseline为内容的最后一行文字的基线，所以会导致原本布局好的样式，在填充内容时，布局发生变化，这点需要注意。
默认对其为盒模型的最底部，显示效果，x 的下方即为文字的基线位置
当元素内有文字时的显示效果
所以为了消除上述特点对布局产生的影响，一般上我会把设置为 inline-block 的元素，同时加上：vertical-align:top/bottom; 一般情况下不要设置成为 middle 否则对同行的元素影响比较大。
inline-block 能用的 css
- 由于用于完整的和模型，所以像
width、height、border、padding、margin之类对于盒模型的修改都可以用 - transform : 完全可以
- overflow : 支持宽高了当然没问题
- background : 没毛病，当然能用
- animation : 感觉这个属性其实是一系列属性的集合，所以像
height、transform这些能用，这个当然没问题，主要看浏览器支不支持 - 关于修改文字的呈现的能用，但主要是用于给子元素进行继承用的（直接的文字也算作子元素），
font、text的一些内容。
写到这里的一些感想：
其实文字的显示和内容的呈现在 css 中是分成两块的，也有较明显的能使用的属性上区别（在w3school上有区分），而 inline-block 的出现也仅仅是为了能让块级元素能在一行显示，而不去使用浮动。当然现在的布局方式有 flex 以后还会有 grid ，在条件允许的情况下，我想我还是会选择后者。
