<percentage>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
CSS тип данных <percentage>
представляет значение в процентах. Оно часто используется, чтобы определить размер относительно родительского элемента. Проценты используются в различных свойствах, таких как width
, height
, margin
, padding
, и font-size
.
Примечание: Наследуются рассчитанные значения. Таким образом, даже если процентное значение используется на родительском элементе, настоящее значение (такое, как пиксели для типа данных <length>
) будет доступно в унаследованном свойстве, а не значение в процентах.
Синтаксис
Тип данных <percentage>
состоит из <number>
, за которым следует знак процента (%
). Так же впереди может стоять знак +
или -
, хотя отрицательные значения допустимы не во всех свойствах. Как и у всех единиц измерения CSS между символом процента и числом нет пробельного символа.
Интерполяция
При анимировании значения типа данных <percentage>
интерполируются как настоящие числа с плавающей запятой. Скорость интерполяции зависит от функции времени, с которой используется анимация.
Примеры
Ширина и левый отступ
<div style="background-color:blue;">
<div style="width:50%; margin-left:20%; background-color:lime;">
Width: 50%, Left margin: 20%
</div>
<div style="width:30%; margin-left:60%; background-color:pink;">
Width: 30%, Left margin: 60%
</div>
</div>
HTML код выше будет выглядеть так:
Размер шрифта
<div style="font-size:18px;">
<p>Full-size text (18px)</p>
<p><span style="font-size:50%;">50%</span></p>
<p><span style="font-size:200%;">200%</span></p>
</div>
HTML код выше будет выглядеть так:
Спецификации
Specification |
---|
CSS Values and Units Module Level 4 # percentages |
Совместимость с браузерами
BCD tables only load in the browser