Соблюдаются ли десятичные разряды в ширине CSS?
Что-то, что меня интересовало, пока я занимался дизайном CSS.
Соблюдаются ли десятичные разряды в ширине CSS? Или они округлые?
.percentage
{
width: 49.5%;
}
или же
.pixel
{
width: 122.5px;
}
6 ответов
Если это процентная ширина, то да, это соблюдается. Как указал Мартин, все становится хуже, когда вы получаете дробные пиксели, но если ваши процентные значения дают целочисленное значение пикселя (например, 50,5% от 200 пикселей в примере), вы получите разумное, ожидаемое поведение.
Редактировать: я обновил пример, чтобы показать, что происходит с дробными пикселями (в Chrome значения обрезаются, поэтому 50, 50,5 и 50,6 имеют одинаковую ширину).
Даже когда число округляется, когда страница раскрашивается, полное значение сохраняется в памяти и используется для последующего дочернего вычисления. Например, если ваш прямоугольник с размером 100,4999 пикселей перерисовывает в 100 пикселей, его дочерний элемент с шириной 50% будет рассчитан как 0,5*100,4999 вместо 0,5*100. И так далее до более глубоких уровней.
Я создал глубоко вложенные системы разметки сетки, где родительские ширины - это ems, а дочерние - проценты, и включение до четырех десятичных знаков вверх по течению оказало заметное влияние.
Крайний случай, конечно, но кое-что нужно иметь в виду.
Хотя дробные пиксели могут казаться округленными на отдельных элементах (как @SkillDrick демонстрирует очень хорошо) , важно знать, что дробные пиксели действительно соблюдаются в реальной блочной модели.
Это лучше всего видно, когда элементы располагаются рядом друг с другом (или поверх друг друга); другими словами, если бы я поместил 400 делителей по 0,5 пикселя рядом, они бы имели такую же ширину, что и отдельный делитель 200 пикселей. Если бы все они на самом деле округлились до 1 пикселя (как следует из рассмотрения отдельных элементов), мы бы ожидали, что 200px div будет вдвое длиннее.
Это можно увидеть в следующем фрагменте кода:
body {
color: white;
font-family: sans-serif;
font-weight: bold;
background-color: #334;
}
.div_house div {
height: 10px;
background-color: orange;
display: inline-block;
}
div#small_divs div {
width: 0.5px;
}
div#large_div div {
width: 200px;
}<div class="div_house" id="small_divs">
<p>0.5px div x 400</p>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
<br>
<div class="div_house" id="large_div">
<p>200px div x 1</p>
<div></div>
</div>Ширина будет округлена до целого числа пикселей.
Я не знаю, будет ли каждый браузер округлять его одинаково. Все они, кажется, имеют другую стратегию при округлении субпиксельных процентов. Если вам интересны детали субпиксельного округления в разных браузерах, есть отличная статья об ElastiCSS.
редактировать: я попробовал демо @Skilldrick в некоторых браузерах для любопытства. При использовании дробных значений пикселей (не в процентах, они работают так, как это было предложено в статье, с которой я связан), IE9p7 и FF4b7, кажется, округляются до ближайшего пикселя, в то время как Opera 11b, Chrome 9.0.587.0 и Safari 5.0.3 усекают десятичные разряды. Не то чтобы я надеялся, что у них есть что-то общее в конце концов...
Кажется, они округляют значения до ближайшего целого числа; но я вижу несоответствие в Chrome, Safari и Firefox.
Например, если 33,3% конвертируется в 420,945 пикселей
chrome и firexfox показывают его как 421px. в то время как сафари показывает его как 420px.
Кажется, что chrome и firefox следуют логике пола и потолка, а сафари - нет. Эта страница, кажется, обсуждает ту же проблему
Элементы должны рисовать до целого числа пикселей, и, как и в других ответах, проценты действительно соблюдаются.
Важным примечанием является то, что в данном случае пиксели означают пиксели css, а не пиксели экрана, поэтому контейнер 200 пикселей с дочерним элементом 50,7499% будет округлен до пикселей CSS 101 пикселей, которые затем отображаются на 202 пикселя на экране сетчатки, а не 400 * .507499 ~= 203 пикс.
Плотность экрана в этом расчете игнорируется, и нет способа подобрать размер элемента к конкретному размеру субпикселя сетчатки. Вы не можете отображать фон или границы элементов с размером пикселя менее 1 CSS, даже если фактический размер элемента может быть меньше 1 пикселя CSS, как показала Сэнди Гиффорд.
Интересно, что между ответом Натекоечли и Алекса Пономаренко, что точные значения хранятся в памяти и учитываются для некоторых вещей, но не для всех.