幽灵形态尺寸

在前端开发中，我们经常会用到“幽灵形态尺寸”这个概念。那么，什么是“幽灵形态尺寸”呢？

定义

“幽灵形态尺寸”（也称为“幽灵尺寸”、“隐形尺寸”或“零高度/宽度尺寸”）是指一个元素在页面上显示的尺寸为0，但却存在于文档流中。它的作用通常在于占位或赋予元素特定样式。

应用

1. 占位

应用“幽灵形态尺寸”最常见的场景就是占位。例如，我们可能有一个列表页，每一项有图片和文字，但是如果有的项没有图片，我们仍然希望它们的文字能够居中对齐。这时，我们可以用“幽灵形态尺寸”来占位，代码如下：

<ul>
  <li>
    <img src="image.jpg" alt="some image">
    <span>Some text</span>
  </li>
  <li>
    <span>Some text without an image</span>
    <img src="" style="width: 0; height: 0;" alt="">
  </li>
</ul>

在第二个列表项中，我们用一个空白的 img 元素，并将它的样式设置为“幽灵形态尺寸”，以占位，这样文字就可以垂直居中了。

2. 特定样式

应用“幽灵形态尺寸”的另一个场景是赋予特定样式。比如说，有时候我们希望一个元素在鼠标 hover 时出现一个特定样式的效果，但是这个元素本身并没有尺寸（比如说一个 i 标签），这时我们可以使用“幽灵形态尺寸”来赋予它一个尺寸，代码如下：

<a href="#">
  <i class="icon"></i>
  Hover me!
</a>

.icon {
  display: inline-block;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-bottom-color: #ccc;
}

在这个例子中，我们用一个 i 标签来表示一个图标，然后将它的样式设置为“幽灵形态尺寸”，并通过 CSS 给它赋予一个三角形的效果。

注意事项

尽管“幽灵形态尺寸”在某些场景下很有用，但是我们还是要注意一些问题。比如说，如果“幽灵形态尺寸”被用在图片上，那么这个图片将无法显示，因为它的尺寸为0。此外，“幽灵形态尺寸”也可能会影响布局和性能。因此，在使用时应做出明智的选择。