今天遇到一个很奇怪的错误，我的元素在设置了 hover 时本应该放大，但是完全没有用。代码可以表示成这样吧。
<body>
<span id="span">Span Element</span>
<div id="div">Div Element</div>
</body>
CSS 是这样写的：
#div {
text-align: center;
}
#div:hover {
transform: scale(2);
}
#span:hover {
transform: scale(2);
}
因为前面的元素是都可以放大的，后面花了点时间才发现这边元素唯一不同点就是前面设置了 display: flex，而 flex 之后这个元素就是块级元素了。后面又联想到行内元素（内联）是不能设置高度的，才发现内联元素对于 transform: scale() 也是不起作用的。
所以总结一下，内联元素基本上是不能设置大小的，为什么会这样呢。Emmm，我觉得你只要记得内联元素都是收缩状的就好了。既然它们是偏向收缩的，那么显然设置宽高自然也没什么用了。
解决方法是可以设置它的 display 为块级元素就好了，如 display: flex, display: block, display: inline-block。
网友评论