Проблемы с размером CSS
Хорошо, ребята, У меня возникла проблема / вопрос, и я не могу найти на него ответа. Допустим, у меня есть что-то вроде этого:
<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 говорит, что он остается на 18 пикселей)
P.S .: Если размер элемента even percentage (или px), например 10%, 20%, 30% ... 90%,, и так далее, то размер и положение не изменятся. (То же самое, если я использую PX, и он равен = 10% ... 90%.. eg.: 4px, 8px, 12px...)
Хм, да, это действительно похоже. Это действительно странно :(. В моем реальном приложении это элемент, у которого есть оболочка со значком в ней. (Item-> Wrapper-> Icon), но мой значок (значок шрифта) не будет центрирован, если его размер не равен даже 10% процентов (что кажется немного строгим правилом.: /)
Ответы 1
Это происходит из-за субпиксельный рендеринг в сочетании с способ рендеринга CSS-пикселя.
Из статьи по ссылке:
... 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-пикселя на вашем мониторе. соотношение пикселей экрана.
Если бы вы попробовали тот же тест на другом экране, у элементов была бы такая же «проблема», но, вероятно, в разных местах на экране.
Аааааааааааааааааа в этом есть смысл! Спасибо, что разъяснили мне это!
вот аналогичная проблема: stackoverflow.com/questions/48044040/… ... это связано с перерисовкой браузера и некоторым подсчетом субпикселей