length-percentage — CSS

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

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

Тип <length-percentage> CSS данных представляет значение, которое может быть либо <length>, либо <percentage>.

Синтаксис

Обратитесь к документации для <length> и <percentage> для получения подробной информации об индивидуальном синтаксисе, разрешенном этим типом.

Формальный синтаксис

<length-percentage> = 
  <length>      |
  <percentage>

Примеры

Примеры length-percentage

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

HTML

<p>You can use percentages and lengths in so many places.</p>

CSS

p {
  /* length-percentage examples */
  width: 75%;
  height: 200px;
  margin: 3rem;
  padding: 1%;
  border-radius: 10px 10%;
  font-size: 250%;
  line-height: 1.5em;

  /* length examples */
  text-shadow: 1px 1px 1px red;
  border: 5px solid red;
  letter-spacing: 3px;

  /* percentage example */
  text-size-adjust: 20%;
}

Результат

Использование в calc()

Когда <length-percentage> указано как допустимый тип, это означает, что процент преобразуется в длину и, следовательно, может использоваться в выражении calc(). Поэтому все следующие значения являются допустимыми для width:

width: 200px;
width: 20%;
width: calc(100% - 200px);

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

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

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`length-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/length-percentage