记一次错: 内联元素不能用 scale

2019-01-24 本文已影响5人写代码的海怪

今天遇到一个很奇怪的错误，我的元素在设置了 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。