Question

所以我遇到了“em”值一致大小的问题，我似乎无法弄清楚原因。

我正在为我的网站使用SCSS并将所有SCSS文件预处理为单个CSS文件。

让我说明我的结构是如何设置的。

/* Value used for border width
$defaultBorderWidth: $sizeSmallest; */

.test {
	width: 5em;
	height: 5em;
	
	border-style: solid;
	border-width: 0.15em; /* normally $defaultBorderWidth */
}
.test div {
	width: 1em;
	height: 1em;
	
	border-style: solid;
	border-width: 0.15em; /* normally $defaultBorderWidth */
}

<!doctype html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=3.0">
</head>
<body>
  <div class="test">
    <div></div>
  </div>
</body>
</html>

这反过来显示了我期望的结果，这是两个div标签上的2px边框。我能够以完全相同的方式在我的网站上复制这个。

我的问题是，在我的一些小部件中，有些情况下我得到3px边框而不是2px。

我已经读过我的边框宽度可以与另一个属性值级联，但是对于我的生活来说无法弄清楚它在哪里或为什么会发生。当我在浏览器中查看开发人员工具时，我看到所有border-width实例都是0.15em。

如果无法确定解释/调试，我可以提供一个实时网站示例，期望它将在实际网站上进行更正（本文的未来观众可以参考）。

Answer 1

since095提供了使用rem而不是em的答案。 rem总是使用<html>标签的根默认字体大小（您可以覆盖），相反，em使用当前标签字体大小并相应地调整其他em值（适用于继承）。

两者都有优点和缺点，它实际上取决于您打算如何构建您的网站。继承可能会很快变得混乱和复杂，但如果正确使用可能会非常强大。使用统一的测量来控制站点的每个方面可以帮助简化和简化，但不具备继承的力量。

我遇到过那些暗示两者组合的东西，使用rem设置常量，如字体大小，边框和em，用于间距，如边距和填充。

以下是使用rem和em的示例。

.testRem h1 {
	border-style: solid;
	
	font-size: 3rem;
	width: 15rem;
	height: 3rem;
	margin: 0.5rem;
	border-width: 0.5rem;
}
.testEm h1 {
	border-style: solid;
	
	font-size: 3em;
	width: 5em;
	height: 3em;
	margin: 0.5em;
	border-width: 0.5em;
}

<!doctype html>
<html>
<head>
</head>
<body>
  <div class="testRem">
    <h1>Test rem</h1>
  <div class="testEm">
    <h1>Test em</h1>
  </div>
</body>
</html>

CSS - EM值不一致，如何调试/解释

1 个答案: