Movatterモバイル変換


[0]ホーム

URL:


  1. Веб-технологии для разработчиков
  2. CSS: каскадные таблицы стилей
  3. Руководство по CSS
  4. Values
  5. <percentage>

This page was translated from English by the community.Learn more and join the MDN Web Docs community.

View in EnglishAlways switch to English

<percentage>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨июль 2015 г.⁩.

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

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

Синтаксис

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

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

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

Примеры

Ширина и левый отступ

html
<div>  <div>    Width: 50%, Left margin: 20%  </div>  <div>    Width: 30%, Left margin: 60%  </div></div>

HTML код выше будет выглядеть так:

Размер шрифта

html
<div>  <p>Full-size text (18px)</p>  <p><span>50%</span></p>  <p><span>200%</span></p></div>

HTML код выше будет выглядеть так:

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

Specification
CSS Values and Units Module Level 4
# percentages

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

Help improve MDN

Learn how to contribute

This page was last modified on byMDN contributors.


[8]ページ先頭

©2009-2025 Movatter.jp