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
,在条件允许的情况下,我想我还是会选择后者。