CSS 尺寸 - 1cm != 1cm

Question

好奇地想弄清楚为什么这似乎不起作用。

我应用了 CSS 背景渐变，例如：

.element {
  width: 10cm;
  height: 5cm;
  background-size: 1cm;
  background-image: repeating-linear-gradient(
    90deg,
    red,
    black
  );
}
.child {
  width: 1cm;
  height: 1cm;
  background: green;
  outline: 1px solid black;
  float:left;
}
.child:before {
  content: "1cm";
  color: white;
}

<div class="element">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

现在，当查看时（这是来自 Chrome，但我在其他浏览器中看到类似的结果），线条与元素不匹配。我希望看到 10 个均匀 spaced "backgrounds" 重复，right-most 正好与元素的边缘对齐。

是什么导致了这个额外的 space？

http://codepen.io/anon/pen/JoLVem

在 codepen 示例中，我有一个具有我想要的背景的元素，该元素有 10 个 children。 Parent是10cm，children是1cm。恰好 10 children 适合 parent 因为 1cm * 10 = 10cm。

然而，背景正在重复 1 厘米宽的渐变。这应该会导致在 10 厘米宽的元素上精确地重复 10 次背景。如您所见，每个背景图像都小于 1 厘米。

Answer 1

CSS units don't necessarily equate to exact dimensions。最后，屏幕上显示的每个 CSS 测量值最终都以像素为单位进行计算。

CSS 假定屏幕将具有 96 dpi，因此使用 in、pt 和 pc 通常是安全的，尽管不同的显示器分辨率或用户定义缩放可能会影响您的结果。

但公制单位是另一回事，因为没有精确的像素计算，因此浏览器会四舍五入以提供接近指定测量值的结果。这是 W3C only recommends px, %, or em units 用于屏幕目标布局的原因之一。

在你的例子中：

1cm ≈ 37px or 38px 
10cm ≈ 370px

唯一的选择是在每毫米 3 或 4 像素的毫米级别进行标准化。这不好，因为它不会让你在更大的水平上接近厘米测量值。

正如您在下面的示例中看到的，这在以英寸为单位时可以正常工作，因为对像素的计算是精确的：

.element {
    background-image: repeating-linear-gradient(
     90deg,
     white,
     black 100%
    );
    background-size: 1in;
    width: 5in;
    height: 4in;
}

.child {
  width: 1in;
  height: 1in;
  background: green;
  outline: 1px solid black;
  float:left;
}
.child:before {
  content: "1in";
  color: white;
}

<div class="element">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

Answer 2

给背景元素一个百分比宽度：

.element {
  background-image: repeating-linear-gradient(90deg, white, black 100%);
  background-size: 10%;
  width: 300px;
  height: 100px;
  border: 1px solid #000000;
}

<div class="element"></div>

Answer 3

设置 background-size :10% 将修复它。

也就是说，如果您使用像素值，它会正常工作

.element {
  background-image: repeating-linear-gradient(90deg, white, black 100%);
  background-size: 30px;
  width: 300px;
  height: 100px;
  border: 1px solid #000000;
}

<div class="element"></div>

CSS 尺寸 - 1cm != 1cm

CSS dimensions - 1cm != 1cm

css

units-of-measurement