html - 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.:如果元素的大小是偶数百分比(或 px)，例如 10%、20%、30% ... 90%， 依此类推大小和位置不会改变。 (如果我使用 PX 也是一样，它等于 = 10% ... 90%.. 例如:4px, 8px, 12px...)

Answer 1

发生这种情况是由于 sub-pixel rendering结合the way a CSS pixel is rendered .

来自链接的文章:

... A CSS ‘px’ unit (because it is 1/96 of an inch) may resolve to a fractional number of device pixels. For example, on a 300dppi (device pixel per inch) screen the ratio of device pixels to CSS pixels pixels is 300/96 = 3.125.

基本上，当您的元素位于屏幕上非常特定的位置时，浏览器会以您指定的尺寸呈现它们，但由于您的显示器的奇怪 CSS 像素，它们可能看起来溢出一个像素或后退一个像素屏幕像素比。

如果您使用不同的屏幕尝试相同的测试，这些元素会出现相同的“问题”，但可能位于屏幕上的不同位置。