Дата: Вторник, 02.04.2013, 12:18 | Сообщение # 1
Администраторы - Толик
- Сообщений: 5
- Репутация: 2
Существует несколько свойств в CSS, которые принимают длину (или расстояние) в качестве значений. К этим свойствам относятся свойства блочной модели: width, height, margin, padding,border. Но существуют и другие свойства, например, смещение и размер тени у свойства box-shadow или размер или интервал шрифта. Какие единицы измерения «длины» принято использовать в CSS? Существует много вариантов. Абсолютные единицы измерения длины.
Пиксели px Код wrap { width: 400px; } Пиксель, возможно, лучше всего рассматривать как «абстрактную величину», так как он не имеет ничего общего с физическим пикселем вашего дисплея.
Цитата CSS-пиксели — абстрактная величина, используемая браузерами для точного отображения контента на страницах, вне зависимости от экрана. Пиксели основная единица измерения в вебе, и так как они отображаются практически единообразно, многие длины высчитываются в пикселях; тот же javascript «разговаривает» на пикселях.
Дюймы in. Дюйм (от нидерл. duim — большой палец) — единица измерения расстояния в некоторых европейских неметрических системах мер. В css дюймы просто сопоставляются с пикселями. Тем не менее, стоит отметить, что дюймы очень редко используются в CSS.
Сантиметры cm
Код .wrap { width: 20cm; } Сантиметр — единица длины в различных метрических системах мер, равная 0,01 метра. В css также сопоставляется с пикселями.
Миллиметры mmКод .wrap { width: 200mm; } Код 1mm == 0.1cm == 3.78px
Шрифто-зависимые единицы измерения [c][/c]Em Код .wrap { width: 40em; } Относительная единица измерения. В полиграфии используются дополнительные единицы измерения – одна из них соответствуют ширине заглавной букве М. Основное свойство влияющее на размер шрифта – font-size.
Без всяких дополнительных css правил 1em работает так: Код 1em == 16px == 0.17in == 12pt == 1pc == 4.2mm == 0.42cm Если в документе изменить размер шрифта, 1em становится равным текущему (установленному) размеру шрифта. Существуют некоторые на первый взгляд странные вещи. Если элемент с размером шрифта 1.1em находится в элементе с font-size равным также 1.1em, плюс они имеют общего родителя, у которого шрифт равен 1.1em, то результирующая высота шрифта самого вложенного элемента будет равна 1.1 X 1.1 X 1.1 == 1.331em. То есть вы должны учитывать следующее: когда вы назначаете элементу размер шрифта равный, например, 10em, и то это совсем не значит, что куда бы вы ни вложили элемент, его шрифт будет равен 10em.
RemКод .wrap { width: 40rem; } Rems предлагают лучшую альтернативу ems. Они работают почти одинаково, за исключением одного ключевого отличия: единицы rem всегда соотносится с фиксированным базовым значением, а именно — с размером шрифта корневого элемента документа (в случае HTML это всегда элемент html). Неполная поддержка браузерами: не работает в IE 8, Safari 4, или iOS 3.2.
ПунктыКод .wrap { width: 120pt; } Пункты – единица измерения равная 1/72 дюйма. Пункты очень распространены за пределами CSS (вероятно, поэтому они и включены в CSS). Пункты отлично подходят для печати, но ничто не мешает вам использовать пункты и на сайте. Хотя стоит отметить, что браузеры не всегда одинаково отображают пункты.
Пика Код .wrap { width: 12pc; } Та же история, что и с пунктами, но 1pc == 12pt.
ExКод .wrap { width: 60ex; } Эта единица измерения основана на высоте буквы х (в нижнем регистре) текущего шрифта. Иногда информация о высоте буквы x встроена в сам шрифт, иногда браузер вычисляет эту высоту путем измерения высоты символа в нижнем регистре, и в худшем случае, браузер просто устанавливает эту высоту как 0.5em. Чтобы понять, почему используется x-высота, представьте верхний выносной элемент (ascender), например, у строчной буквы d. Х-высота не включает эту выноску. В отличие от ems, которые не меняются при изменении свойства font-family, единицы измерения ex поменяются, когда вы измените значение у свойства font-family
Ch Код .wrap { width: 60ch; } По духу похожа на x-высоту, только вместо x-высоты, используется ширина символа 0. Также меняется при изменении значения у свойства font-family. Поддержка браузерами: на данный момент не поддерживается браузерами на основе webkit (safari, яндекс, chrome).
|