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个均匀间隔的“背景”重复，其中最右边的排列正好与元素的边缘。

这个额外空间的原因是什么？

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

在codepen示例中，我有一个具有我想要的背景的元素，该元素有10个子元素。父母是10厘米，孩子是1厘米。正好有10个孩子适合父母，因为1cm * 10 = 10 1cm。

然而，背景是重复一个1厘米宽的梯度。这将导致在一个10厘米宽的元素上精确地重复10个背景。正如你所看到的，每一幅背景图像都不超过1cm。

Answer 1

CSS单位不一定等同于精确的尺寸。最后，显示在屏幕上的每个CSS度量最终都以像素为单位进行计算。

CSS假设屏幕有96 dpi，所以使用in、pt和pc通常是安全的，尽管不同的监视器分辨率或用户定义的缩放可能会影响结果。

然而，度量单位是另一回事，因为没有对像素的精确计算，因此这些数字被浏览器舍入，以传递接近指定度量的结果。这是单位用于屏幕目标布局的原因之一。

在你的例子中：

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

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

正如您在下面的示例中所看到的，这在英寸单位中是正确的，因为像素的计算是准确的：

​

.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

设置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>

​

Answer 3

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

​

.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>

​