当 box-sizing 为 border-box 时，背景大小按百分比

Question

我正在尝试使用背景在 div 中创建网格。当然，背景大小属性是创建网格的好方法，其中 10% 的大小将在 div 中创建 10 个均匀间隔的单元格，例如：

div{
 width:200px;
 border:solid 1px black;
 background-size: 10% 1px;
 background-image: linear-gradient(to left, gray 1px,  transparent 1px);
}

<div>x</div>

然而，我还需要 box-sizing 为 "border-box"，否则盒子占用的像素比通过宽度属性指定的要多。这会导致 Chrome 中的各种破坏，背景大小按百分比指定，例如：

div{background-color:white;}
#d1 { 
    width:200px;
    border:solid 1px black;
    background-size: 10% 1px;
    background-image: linear-gradient(to left, gray 1px, transparent 1px);
    padding:5px;
    box-sizing:border-box;
}
#d2 { 
    width:200px;
    border:solid 1px black;
    background-size: 10% 1px;
    background-image: linear-gradient(to left, gray 1px, transparent 1px);
    padding:5px;
}

<div id="d1">more than 10 cells</div>
<p>
<div id="d2">box is bigger than 200px</div>

请注意，顶部 div (d1) 中显示了 10 多个单元格，尽管每个单元格都应该是 div 宽度的 10%。

这似乎只是一个 Chrome 问题，但如果有人对此有解决方案，请告诉我。

Answer 1

我承认我以前从未玩过这个东西，但看起来你需要考虑 background-image 的 1px 宽度。现在不要问我为什么，但它确实有效。用不同的百分比和宽度测试它。如果你需要why，不仅是how ，您必须自己挖掘 W3C 的文档或等待更好的文档化答案。

div { 
  background-color:white;
  width:200px;
  border:solid 1px black;
  background-size: calc(10% + 1px), 1px;
  background-image: linear-gradient(to left, gray 1px, transparent 1px);
  padding:5px;
  box-sizing:border-box;
}

div ~ div { 
  width:300px;
  }

<div>exactly 10%</div>
<p>
<div>also exactly 10%</div>

干杯！

Answer 2

检查进度条码。它是如何工作的？

.progress-bar{
background-color: blue;
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-size: 40px 40px;
height: 40px;
width: 400px;
}

<div class="progress-bar"></div>

background-size: 40px 40px; 表示框的 40px 宽度和 40px 宽度。 两个width如何更努力？ background-size先放image再放gap.背景图像将从 0 to 40px 开始，然后放置 40px 间隙，然后是 40px 图像。在 full width 完成之前它是无限的。使用 1px width image 查看您的第一个代码段 background-size: 10% 1px; 浏览器渲染 10 gap from total width.

Note: background-size will work when you set background-image. Otherwise background-size property will not work.

希望对您有所帮助。

Answer 3

Andrei Gheorghiu 的回答非常好，但在所有浏览器中并不一致，并且在某些分隔符位置有几个像素的偏差。无论如何，这是更一致的答案，似乎无处不在：

div { 
  background-color:white;
  width:200px;
  border:solid 1px black;
  background: repeating-linear-gradient(to left, red, red 1px, white 2px, white 10%);
  box-sizing:border-box;
}

div ~ div { 
  width:300px;
  }

<div>exactly 10 red separators</div>
<div>also exactly 10 red separators</div>

当 box-sizing 为 border-box 时，背景大小按百分比

background-size by percentage when box-sizing is border-box

css

border-box

background-size