Единицы измерения в CSS.EM, EX, PX, %, IN, CM, MM, pt, pc

В CSS есть несколько основных единиц измерения это относительные и абсолютные. При работе с CSS следует точно разобраться с их применением иначе работа с каскадными таблицами стилей будет сложна и непонятна. Абсолютные единицы измерения делятся на 5 типов, относительные на 4. Следует знать что Абсолютные единицы измерения не зависят от устройства вывода, т.е. мониторов и экранов, относительные же определяют размер элемента относительна другого размера т.е. монитора, экрана, родительского элемента и т.д.Теперь подробнее о них.

Относительные единицы измерения.

Относительные единицы измерения обычно используют для работы с текстом и в «расширяемых» верстках. В следующей таблице приведены основные относительные единицы измерения.

Единица Описание
em Высота текущего элемента
ex Высота символа х
px Пиксел
% Процент

EM

Измеряемое значение зависит от размера шрифта текущего элемента (он устанавливается через атрибут font-size). Когда он явно не задан используется размер текста который заложен в браузере. Поэтому 1em изначально равен размеру шрифта заложенному в браузере по умолчанию.

EX

Этот аргумент  определяется как высота символа «х» в нижнем регистре. Ex привязан к размеру шрифта заданного в браузере по умолчанию, если у родительского элемента задан атрибут «font-size» то он привязан к нему.

PX

Пиксель это 1 точка разрешения устройства вывода (монитора или экрана). Т.е. Если у вас разрешение монитора 1024*768 то вы имеете 1024 пикселя по горизонтали и 768 пикселей по вертикале. Т.е. размер пикселя напрямую зависит от разрешения устройства вывода и его технических характреристик.

%

Процентная единицы измерения зависит от размеров родительского элемента.

Абсолютные единицы измерения.

Абсолютные единицы измерения применяются не так часто и в большинстве своем при работе с текстом. В следующий таблицы приведены Абсолютные единицы измерения.

Единица Описание
in Дюйм (1 дюйм равен 2,54 см)
cm Сантиметр
mm Миллиметр
pt Пункт (1 пункт равен 1/72 дюйма)
pc Пика (1 пика равна 12 пунктам)

Из данных единиц следует описать только pt (пункт), т.к. pc это производное от pt а использование in, cm и mm описывать не нужно.

Пункт является самой распространенной  и повсеместно используемой единицей измерения шрифтов (помните как выставляли размер шрифта в том же ворде или опен офисе?).

На этом все, удачи 😉

Теги: , , , , , , , , , ,

7 комментариев к “Единицы измерения в CSS.EM, EX, PX, %, IN, CM, MM, pt, pc”

  1. subtalk
    Июль 11th, 2010 at 17:35
    1

    Теперь стало всё ясно, благодарю за помощь в этом вопросе.

    [Ответить]

  2. Июль 13th, 2010 at 15:29
    2

    А em это разве не размер буквы m ?

    [Ответить]

    admin Reply:

    неа

    [Ответить]

  3. Июль 13th, 2010 at 15:58
    3

    Вот не помню уже адрес статьи, но em — это размер, взятый из типографии, обозначает он букву м, самую широкую в алфавите, соответственно, размер считается именно от самой буквы, а не от алфавита.
    Конечно, не авторитетное мнение, но все же http://alexvolkov.ru/nemnogo-pro-tipografiku.html

    [Ответить]

    admin Reply:

    Ну как авторитетное можно почитать на htmlbook.ru статейку о системах измерения в CSS

    [Ответить]

  4. Июль 13th, 2010 at 16:08
    4

    Ну или в типографическом словаре http://www.pushel.ru/polyslovar/em.html ))
    Лан, не суть важно, сорри за флуд

    [Ответить]

  5. Июль 21st, 2013 at 21:50
    5

    Кратко и понятно!

    Я бы добавил ещё одну относительную единицу — rem (root element).

    «Она всегда соотносится с фиксированным базовым значением, а именно — с размером шрифта корневого элемента документа (в случае HTML это всегда элемент ).»

    [Ответить]

Написать комментарий