<percentage>

Базовая Широко доступная

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2015 года.

Тип данных <percentage> CSS тип данных представляет собой процентное значение. Он часто используется для определения размера относительно родительского объекта элемента. Проценты могут использоваться во многих свойствах, таких как width, height, margin, padding и font-size.

Примечание: Наследуются только рассчитанные значения. Таким образом, даже если процентное значение используется в родительском свойстве, реальное значение (например, ширина в пикселях для значения <length>) будет доступно в наследуемом свойстве, а не процентное значение.

Синтаксис

Тип данных <percentage> состоит из <number>, за которым следует знак процента (%). Также он может быть опережен знаком + или -, хотя отрицательные значения не допустимы для всех свойств. Как и во всех CSS-размерах, между символом и числом пробелов нет.

Интерполяция

При анимации значения типа данных <percentage> интерполируются как действительные числа с плавающей точкой. Скорость интерполяции определяется функцией плавного изменения, связанной с анимацией.

Примеры

Ширина и margin-left

<div style="background-color:navy;">
  <div style="width:50%; margin-left:20%; background-color:chartreuse;">
    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% (9px)</span></p>
  <p><span style="font-size:200%;">200% (36px)</span></p>
</div>

Выходной HTML-код:

Спецификации

Спецификация
CSS Values and Units Module Level 4 # percentages

Совместимость с браузерами

	Рабочие столы					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`percentage`	1	12	1	3.5	1	18	4	10.1	1	1.0	≤37

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/percentage