Tailwind CSS 中的 0.5 和 1/2 的区别

在 Tailwind CSS 中，经常会看到类似 w-0.5 和 w-1/2 这样的尺寸类名，它们都表示元素的宽度，但是看上去很相似，实际上是有一些区别的。

0.5 的含义

首先，w-0.5 表示元素的宽度是父元素宽度的一半（50%），对应的 CSS 代码如下：

.w-0\.5 {
  width: 50%;
}

这个类非常简单，只需要将宽度设置成 50% 即可，通常用来实现两个元素并排排列的效果，例如两个按钮：

<div class="flex">
  <button class="w-0.5">按钮1</button>
  <button class="w-0.5">按钮2</button>
</div>

上面的代码会把两个按钮平均分成两部分，使它们并排排列。

1/2 的含义

而 w-1/2 则稍微复杂一些，这个类表示元素的宽度是父元素的一半，再减去一个带有 4 像素 padding 的容器宽度的一半，对应的 CSS 代码如下：

.w-1\/2 {
  width: calc((100% - var(--tw-container-x)) / 2);
}

其中的 --tw-container-x 表示带有 4px 的 padding 的容器宽度（也就是 .container 类的宽度），它的值是 1rem，可以根据自己的需要进行调整。

这个类比较难理解，但是它的作用非常有用，可以在不使用网格系统的情况下，让元素在容器中水平居中，并且不会超出容器的范围。

例如，在一个 .container 容器中，放置一个宽度为一半的卡片元素，使用 w-1/2 类可以实现水平居中的效果：

<div class="container">
  <div class="w-1/2 bg-gray-200 p-4">
    这是一个卡片
  </div>
</div>

这个卡片元素会自动居中，并且不会超出容器的范围，而且不需要使用额外的居中类名。

总结

尽管 w-0.5 和 w-1/2 看起来很相似，它们具有不同的含义和用途。w-0.5 用于简单地将元素的宽度均分成两部分，而 w-1/2 可以让元素水平居中，并且不会超出父容器的范围。在使用 Tailwind CSS 的时候，需要理解这些类的含义和实际用途，才能更好地使用并掌握这个框架。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647d7c4a968c7c53b0845b05