Что-то, что меня интересовало, пока я занимался дизайном CSS.
Соблюдаются ли десятичные разряды в ширине CSS? Или они округлые?
.percentage {
width: 49.5%;
}
или
.pixel {
width: 122.5px;
}
Что-то, что меня интересовало, пока я занимался дизайном CSS.
Соблюдаются ли десятичные разряды в ширине CSS? Или они округлые?
.percentage {
width: 49.5%;
}
или
.pixel {
width: 122.5px;
}
Ответы:
Если это процентная ширина, то да, это соблюдается . Как указал Мартин, все становится хуже, когда вы получаете дробные пиксели, но если ваши процентные значения дают целочисленное значение пикселя (например, 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>:nth-child(even)или :nth-child(odd), вы заметите, что либо все это оранжевое, либо все это голубое, а не смесь синего и оранжевого (что было бы неким смутным пурпурным оттенком).
Ширина будет округлена до целого числа пикселей .
Я не знаю, будет ли каждый браузер округлять его одинаково. Все они, кажется, имеют различную стратегию при округлении субпиксельных процентов. Если вам интересны детали субпиксельного округления в разных браузерах, есть отличная статья об 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, как показала Сэнди Гиффорд.
[*] Вы можете использовать некоторые методы, такие как box-shadow со смещением 0,5 и т. Д., Но фактические свойства box-модели будут отображаться до полного пикселя CSS.