CSS大小调整问题

Question

好的， 我有一个问题，但找不到答案。 所以说我有这样的东西：

<div className='container'>
    <div className='wrapper' style={{
        width: 40,
        height: 40,
        backgroundColor: 'red'
    }}>
        <div
            className='item'
            style={{
                width: 18,
                height: 18,
                backgroundColor: 'black',
            }}
        />
    </div>
</div>

所以基本上，我在顶部container内有一个正方形，里面有一个正方形。

如果我在container上添加填充，则item的大小和位置将会改变：

如您所见，项目的大小正在更改 [在视频中，我将容器上的填充物更改了] （如果将其放置在居中位置，那么位置也将发生变化... ，正如Chrome浏览器的检查员所说的那样，该像素仍为18px）

P.S .：如果商品的大小是even percentage之类的10%, 20%, 30% ... 90%,（或px），则大小和位置都不会改变。 （就像我使用PX一样，它等于= 10% ... 90%.. eg.: 4px, 8px, 12px...）

Answer 1

发生这种情况是由于sub-pixel rendering与the way a CSS pixel is rendered结合使用了。

摘自链接的文章：

  

... CSS的“ px”单位（因为是1/96英寸）可能会分解为设备像素的分数。例如，在300dppi（每英寸的设备像素）屏幕上，设备像素与CSS像素的比率为300/96 = 3.125。

基本上，当您的元素位于屏幕上非常特定的位置时，浏览器会使用您指定的尺寸渲染它们，但是由于显示器的CSS像素为奇数，它们可能会流血一个像素或回落一个像素。 -屏幕像素比率。

如果要在不同的屏幕上尝试相同的测试，则元素将具有相同的“问题”，但可能在屏幕上的不同位置。