时间戳

首页 > 解决方案 > 无法使用 rem 和边框使两个 div 相等

html - 无法使用 rem 和边框使两个 div 相等

问题描述

我正在尝试使两个 div 相等。一个有自己的rem大小，另一个应该等于第一个，但它有一个边框（它的宽度也是rem）。因此，我决定将其大小计算为第一个大小减去边框的总厚度。尽管如此，它们仍然是不同的大小，不同的像素份额。当我使用 px （在我的情况下它是不可取的）时，不会发生这样的问题。

<body>
  <div style="height: 10.16rem; width: 10.16rem; background-color: aqua;"></div>
  <div style="height: 10rem; width: 10rem; border: 0.08rem solid aqua; background-color: blue;"></div>
</body>

似乎对物边界的厚度符合其他一些法律，但我在任何地方都没有找到答案。理论上，在这两种情况下，divs 应该相等，因为 rem 是从 html 中的字体大小计算的。

标签： htmlcss

解决方案

将框大小设置为边框框以避免此问题。

然后你的两个 div 将遵循指定的尺寸，而不受边框、填充等的影响。

* {
   box-sizing: border-box;
}
<body>
    <div style="height: 10rem; width: 10rem; background-color: aqua;"></div>
    <div style="height: 10rem; width: 10rem; border: 0.08rem solid aqua; background-color: red;"></div>
</body>

推荐阅读