CSS尺寸 - 1厘米!= 1厘米

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 = 10cm.

然而,背景是重复1cm宽的梯度.这应该导致在10cm宽的元素上精确地重复10次背景重复.如您所见,每个背景图像都不到1厘米.

Answer 1

CSS单位不一定等于精确尺寸.最后,屏幕上显示的每个CSS测量最终都以像素计算.

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

公制单位是一个不同的故事,因为没有精确的像素计算,因此浏览器将数字四舍五入以提供接近指定测量的结果.这是该原因之一W3C建议仅px,%或em单位对屏幕有针对性的布局.

在你的例子中:

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>