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

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

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

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

Единица ex определяется как высота символа «x» в нижнем регистре. На ex распространяются те же правила, что и для em , а именно, он привязан к размеру шрифта, заданного в браузере по умолчанию, или к размеру шрифта родительского элемента.

Единица ch равна ширине символа «0» для текущего элемента и подобно em зависит от размера шрифта.

Разница между em и rem следующая. em зависит от размера шрифта родителя элемента и меняется вместе с ним, а rem привязан к корневому элементу, т. е. размеру шрифта заданного для элемента html .

Также есть группа относительных единиц привязанных к размеру области просмотра браузера. В табл. 2 показан их список с описанием.

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

Абсолютные единицы представляют собой физические размеры - дюймы, сантиметры, миллиметры, пункты, пики, а также пиксели. Для устройств с низким dpi (количество точек приходящихся на один дюйм, определяет плотность точек) привязка идёт к пикселю. В этом случае один дюйм равен 96 пикселям. Очевидно, что реальный дюйм не будет совпадать с дюймом на таком устройстве. На устройствах с высоким dpi реальный дюйм совпадает с дюймом на экране, поэтому размер пикселя вычисляется как 1/96 от дюйма. В табл. 3 перечислены основные абсолютные единицы.

Пример

Заголовок размером 30 пикселей

Размер текста 1.5 em

Заголовок размером 24 пункта

Сдвиг текста вправо на 30 миллиметров

Примечание

При установке размеров обязательно указывайте единицы измерения, например width : 30px . В противном случае браузер не сможет показать желаемый результат, поскольку не понимает, какой размер вам требуется. Единицы не добавляются только при нулевом значении (margin : 0 ).

Internet Explorer поддерживает единицу vm вместо vmin .

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

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation (Рекомендация ) - спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation (Возможная рекомендация ) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation (Предлагаемая рекомендация ) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft (Рабочий проект ) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor"s draft (Редакторский черновик ) - черновая версия стандарта после внесения правок редакторами проекта.
• Draft (Черновик спецификации ) - первая черновая версия стандарта.

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

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

К абсолютным единицам измерения относятся сантиметры (cm), миллиметры (mm) и дюймы (in). Не смотря на то, что они предназначены для одинакового отображения элементов на веб-странице, браузер не всегда может точно вычислить физический размер дисплея или монитора, поэтому на разных устройствах элементы могут иметь разные размеры.

One-cm { font-size: 1cm; } .one-mm { font-size: 1mm; } .one-in { font-size: 1in; }

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

Типографские единицы

К типографским единицам измерения относятся точки (pt) и пики (pc). Точка (1pt) имеет фиксированный размер 1/72 дюйма, в то время как пика (1pc) равна 1/6 дюйма (1pc = 12pt). Эти две единицы измерения наиболее полезны в стилях, написанных для печатных версий документов, а не для использования на экранах.

One-point { font-size: 1pt; } .one-pica { font-size: 1pc; }

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

К относительным единицам измерения относятся пиксели (px) и проценты (%). Процент - единица измерения, не имеющая напрямую никакого отношения к размеру шрифта в элементе или к размеру самого элемента. Величина свойства, установленная в процентах, напрямую зависит от величины этого же свойства, установленного для родительского элемента. Например, размер шрифта задается относительно размера шрифта родительского элемента, также высота и ширина выражается в процентах относительно высоты и ширины области содержимого родительского элемента.

One-pixel { font-size: 1px; } .one-percent { font-size: 1%; }

Пиксель - точка равная одному физическому пикселю на экране. Однако браузеры не всегда точно расчитывают размер области просмотра в пикселях.

Рассмотрим последние модели ноутбуков, планшетов и смартфонов, оснащенные экранами с высоким разрешением. На таких устройствах браузер не соотносит единицу px с количеством физических пикселей на экране. Вместо этого он нормализует единицу px, так чтобы приблизить характеристики просмотра к традиционному настольному монитору с плотностью пикселей в районе от 96 до 120 пикселей/дюйм. В результате квадрат со стороной в 10px может отрисовыватся браузером на смартфоне так, что на каждой стороне окажется от 15 до 20 физических пикселей. Это означает, что px также оказывается относительной единицей измерения.

Шрифтозависимые относительные единицы

Двумя дополнительными относительными единицами измерения являются em и ex. Em - высота текущего шрифта, ex - высота символа "х" в нижнем регистре указанного шрифта.

One-ex { font-size: 1ex; } .one-em { font-size: 1em; }

Как и проценты, em является распространенной единицей измерения, которую обычно используют для установки размера шрифта для текста на веб-странице.

В CSS3 введены две дополнительные единицы измерения: rem и ch. Rem - размер шрифта корневого элемента (), она может использоваться вместо em для предотвращения влияния размеров шрифта родителя или предков на размер шрифта текущего элемента.

One-rem { font-size: 1rem; }

Единица ch равна ширине символа ноль (0) шрифта элемента. Ее использование может быть полезным для определения ширины поля, содержащего текст, потому что 1ch примерно соответствует одному символу.

Единица ch поддерживается только в Chrome 27+, Firefox 19+ и IE9. Rem поддерживается в Chrome 4+, Firefox 3.6+, IE9+, Safari 4.1+ и Opera 11.6+.

Единицы области просмотра

К единицам измерения области просмотра относятся vw (ширина) и vh (высота), позволяющие масштабировать элементы относительно области просмотра, то есть видимой части веб-страницы.

Width: 50vw; /* 50% от ширины области просмотра */ height: 25vh; /* 25% от высоты области просмотра */

Двумя дополнительными единицами являются vmin и vmax, которые задают минимальное или максимальное значение размера области просмотра.

Width: 1vmin; /* 1vh или 1vw, в зависимости от того что меньше */ height: 1vmax; /* 1vh или 1vw, в зависимости от того что больше */

Единицы измерения относительные области просмотра поддерживаются в Chrome 26+, Firefox 19+, IE11+, Safari 6.1+ и Opera 15+.

Значения единиц измерения

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

P { font-size: 0.394in; } /* десятичная дробь */ p { margin: -1px; } /* отрицательное значение */

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

P { font-size: 1ex; } /* корректно */ p { font-size: 0; } /* корректно */ p { font-size: 0ex; } /* корректно */ p { font-size: 1 ex; } /* неправильно */ p { font-size: 1; } /* неправильно */

Всякий раз, когда CSS объявление содержит ошибку, оно игнорируется браузером, при этом остальные объявление продолжают работать.

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

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

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

EM

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

EX

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

PX

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

%

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

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

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

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

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

Приветствую Вас, уважаемые читатели блога webcodius! Для задания размеров различных элементов html страницы, в CSS существуют единицы измерения. Причем могут использоваться как относительные, так и абсолютные единицы.

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

Абсолютные единицы используются реже чем относительные и применяются в основном для задания размера текста. А для указания размера текста в основном используют пункт (pt), который получается путем деления одного дюйма на 72 части. Дюйм в свою очередь равен примерно 25,4 миллиметра, соответственно один пункт примерно равен одной трети миллиметра. Пример использования абсолютных единиц измерения:

Размер 12 миллиметров

Размер 1 сантиметр

Размер 1 дюйм

Размер 24 пункта

Размер 1 пика

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

Для отображения информации на мониторе лучше использовать относительные единицы измерения. Так как физический размер точек (пикселей), образующих изображения на мониторе, может быть разным в зависимости от типа и физического размера этого самого монитора. Также размер пикселя зависит от установленного разрешения экрана. Основные относительные единицы:

1 px в CSS , как мы уже говорили выше, это точка на экране пользователя, физическая величина которой зависит от разрешения устройства и от того, с какого расстояния человек смотрит на его поверхность.
При указании процентов размер вычисляется в зависимости от размера родительского элемента. Так, например если ширина родительского элемента 500px, то при указании width:50% ширина элемента будет 250px.

em привязан к размеру шрифта, заданного в браузере по умолчанию или к размеру шрифта родительского элемента. А ex это высота прописной (маленькой) буквы «x» (икс) в латинской раскладке. То есть em также привязан к размеру шрифта, заданного в браузере по умолчанию или к размеру шрифта родительского элемента. Примеры:

Размер 20 пикселов

Размер 150%

Размер 2 em

Размер 2 ex

Результат:

Кроме вышеперечисленных, есть группа относительных единиц привязанных к размеру области просмотра браузера:

Примеры использования:

Размер 2 vw

Размер 2 vh

Размер 2 vmin

Размер 2 vmax

Функция calc ()

Используется для указания вычисляемого значения свойств CSS, которые в качестве значения используют какое-либо число. В первую очередь calc можно применять для вычисления размеров, уголов, времени. Причем функция позволяет смешивать различные единицы измерений, например ширину div-а можно задать так:

div {
width: calc (100% — 40px);
}

В этом случае ширина div-а будет равно ширине родительского элемента минус 40 пикселей.

В выражениях можно использовать следующие арифметические действия:

• + — сложение. Символ отделяется пробелами с двух сторон (height: calc (20% + 50px));
• — — вычитание. Символ отделяется пробелами с двух сторон (width: calc (90% — 10px););
• * — умножение (padding: calc (2em*2););
• / — деление. На ноль делить запрещено (width: calc (100%/4);).

В браузерах Firefox до версии 16.0 поддерживается функция -moz-calc, в Chrome до версии 26.0 и в Safari с версии 6.0 поддерживается -webkit-calc.

Например, нам необходимо в резиновом двухколоночном макете сайта сделать так, чтобы между колонками при любом размере окна браузера было расстояние 50px. Тогда с помощью функции calc это делается следующим образом: