ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

CSS Справочник

CSS Справочник CSS Поддержка браузерами CSS Селекторы CSS Функции CSS Справочник Aural CSS Безопасные веб-шрифты CSS Анимационные CSS Единицы измерения CSS PX-EM Конвертер CSS Цвета CSS Значения цвета CSS Значения по умолчанию CSS Объекты

CSS Свойства

align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function backface-visibility background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-decoration-break box-shadow box-sizing caption-side caret-color @charset clear clip clip-path color column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns content counter-increment counter-reset cursor direction display empty-cells filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font @font-face font-family font-kerning font-size font-size-adjust font-stretch font-style font-variant font-weight grid grid-area grid-auto-columns grid-auto-flow grid-auto-rows grid-column grid-column-end grid-column-gap grid-column-start grid-gap grid-row grid-row-end grid-row-gap grid-row-start grid-template grid-template-areas grid-template-columns grid-template-rows hanging-punctuation height hyphens @import isolation justify-content @keyframes left letter-spacing line-height list-style list-style-image list-style-position list-style-type margin margin-bottom margin-left margin-right margin-top max-height max-width @media min-height min-width mix-blend-mode object-fit object-position opacity order outline outline-color outline-offset outline-style outline-width overflow overflow-x overflow-y padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside perspective perspective-origin pointer-events position quotes resize right scroll-behavior tab-size table-layout text-align text-align-last text-decoration text-decoration-color text-decoration-line text-decoration-style text-indent text-justify text-overflow text-shadow text-transform top transform transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function unicode-bidi user-select vertical-align visibility white-space width word-break word-spacing word-wrap writing-mode z-index



CSS3. Уроки для начинающих

CSS Единицы измерения


CSS Единицы измерения

CSS имеет несколько различных единиц для выражения длины.

Многие свойства CSS принимают значения "длины", такие как width, margin, padding, font-size и др.

Длина - это число, за которым следует единица длины, например 10px, 2em и др.

Между числом и единицей не должно быть пробела. Однако, если значение равно 0, единица может быть опущена.

Для некоторых свойств CSS допустимы отрицательные длины.

Существует два типа единиц длины: абсолютная и относительная.


Абсолютные длины

Единицы абсолютной длины являются фиксированными, и длина, выраженная в любом из них, будет отображаться именно как этот размер.

Абсолютные единицы длины не рекомендуются для использования на экране, потому что размеры экрана сильно различаются. Однако их можно использовать, если известен выходной носитель, например, для макета печати.

Единица измерения Описание
cm сантиметры Попробуй это
mm миллиметры Попробуй это
in дюймы (1дюйм = 96px = 2.54cm) Попробуй это
px * пиксели (1px = 1/96th of 1in) Попробуй это
pt точки (1pt = 1/72 1дюйма) Попробуй это
pc пики (1pc = 12 pt) Попробуй это

* Пиксели (px) относительно устройства просмотра. Для устройств с низким разрешением 1 пиксель - это один пиксель (точка) устройства на дисплее. Для принтеров и экранов с высоким разрешением 1px подразумевает несколько пикселей устройства.


Относительные длины

Единицы относительной длины определяют длину относительно другого свойства длины. Относительные единицы длины лучше масштабируются между различными средами рендеринга.

Единица измерения Описание
em Относительно размера шрифта элемента (2em означает 2-кратный размер текущего шрифта) Попробуй это
ex Относительно x-высоты текущего шрифта (редко используется) Попробуй это
ch Относительно ширины "0" (ноль) Попробуй это
rem Относительно размера шрифта корневого элемента Попробуй это
vw Относительно 1% ширины области просмотра* Попробуй это
vh Относительно 1% высоты окна просмотра* Попробуй это
vmin Относительно 1% *меньшего размера области просмотра Попробуй это
vmax Относительно 1% *большего размера области просмотра Попробуй это
% Относительно родительского элемента Попробуй это

Совет: Единицы em и rem удобны в создании идеально масштабируемого макета!
*Viewport = размер окна браузера. Если ширина окна составляет 50 см, 1vw = 0.5 см.


Поддержка браузерами

Числа в таблице указывают первую версию браузера, которая полностью поддерживает единицу длины.

Единица длины
em, ex, %, px, cm, mm, in, pt, pc 1.0 3.0 1.0 1.0 3.5
ch 27.0 9.0 1.0 7.0 20.0
rem 4.0 9.0 3.6 4.1 11.6
vh, vw 20.0 9.0 19.0 6.0 20.0
vmin 20.0 12.0 19.0 6.0 20.0
vmax 26.0 16.0 19.0 7.0 20.0