最近的项目开发中,我给一个span标签添加了一个 transform:rotate(45deg)的样式,但是无论我怎么调试,都不生效啊!(开始怀疑人生了)。偶然间自己加了一个 display:inline-block;竟然生效了!自己完全处于懵的状态。为啥,为啥加个display:inline-block就生效了呢!于是乎开始google。
先说结论吧
display:block可以让元素成为一个block box;
display:inline-block 会生成一个inline-level block container , 元素本身被格式化为atomic inline-level box ,内部被格式化为 block box;
display:inline 会让一个元素生成一个或多个inline boxes;
但是可以使用transform的元素有:atomic inline-level元素和block元素。不包含inline元素。所以…… 。
那原因是啥呢?
且容我粘贴一下transfrom的使用规范
CSS Transforms Module Level 1 - Transformable Element
A transformable element is an element in one of these categories:
- an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or whose display property computes to table-row, table-row-group, table-header-group, table-footer-group, table-cell, or table-caption [CSS2]
- an element in the SVG namespace and not governed by the CSS box model which has the attributes transform, patternTransform or gradientTransform [SVG11].
那么上文提到的atomic inline-level element又是啥呢?
An inline box is one that is both inline-level and whose contents participate in its containing inline formatting context. A non-replaced element with a 'display' value of 'inline' generates an inline box. Inline-level boxes that are not inline boxes (such as replaced inline-level elements, inline-block elements, and inline-table elements) are called atomic inline-level boxes because they participate in their inline formatting context as a single opaque box. (https://www.w3.org/TR/CSS2/visuren.html#x13)
由上所述:
- 行内盒子由一个
display:inline
的非替换元素生成。 - 行内级盒子又叫做原子行内级盒子,它不是 行内盒子。因为它是透明的。