INLINE-BLOCK

常用的默认 display 值为 inline-block 的元素有 img 。应该没有别的常用的了。

inline-block 特点:被设定的对象的内容以 block 方式显示,但呈现形式以 inline 方式。换句话说,除了显示上在同一行,元素被当成 inline 来处理外, block 有的它全有。

inline-block 的一些特点以及一些特殊的点:

  • 拥有完整的盒模型,但不会默认占一整行
  • 当一个空元素设置成 inline-block 或是 img 元素时,默认的 baseline 为元素盒模型的最底部(也就是 margin 的最底部),由于默认的 vertical-alignbaseline 所以会导致元素的底部其实不是和父元素的底部重合的,而是有一段空隙,而空隙应该为 font-size1/4 ,所以为了消除这个空隙可以将 font-size 设置为 0 ,或是改变默认的对其方式,但这会改变同行元素的对齐方式。关于这个 vertical-align 的研究应该单独谈谈,总之会影响。
  • 当一个有内容的元素设置为 inline-block 时, baseline 为内容的最后一行文字的基线,所以会导致原本布局好的样式,在填充内容时,布局发生变化,这点需要注意。

默认对其为盒模型的最底部,显示效果,x 的下方即为文字的基线位置

当元素内有文字时的显示效果

所以为了消除上述特点对布局产生的影响,一般上我会把设置为 inline-block 的元素,同时加上:vertical-align:top/bottom; 一般情况下不要设置成为 middle 否则对同行的元素影响比较大。

inline-block 能用的 css

  • 由于用于完整的和模型,所以像 widthheightborderpaddingmargin之类对于盒模型的修改都可以用
  • transform : 完全可以
  • overflow : 支持宽高了当然没问题
  • background : 没毛病,当然能用
  • animation : 感觉这个属性其实是一系列属性的集合,所以像 heighttransform 这些能用,这个当然没问题,主要看浏览器支不支持
  • 关于修改文字的呈现的能用,但主要是用于给子元素进行继承用的(直接的文字也算作子元素),fonttext的一些内容。

写到这里的一些感想:

其实文字的显示和内容的呈现在 css 中是分成两块的,也有较明显的能使用的属性上区别(在w3school上有区分),而 inline-block 的出现也仅仅是为了能让块级元素能在一行显示,而不去使用浮动。当然现在的布局方式有 flex 以后还会有 grid ,在条件允许的情况下,我想我还是会选择后者。