[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Единицы измерения длины в CSS
Дата: Вторник, 02.04.2013, 12:18 | Сообщение # 1
Администраторы - Толик
  • Сообщений: 5
  • Репутация: 2
Существует несколько свойств в CSS, которые принимают длину (или расстояние) в качестве значений. К этим свойствам относятся свойства блочной модели: width, height, margin, padding,border. Но существуют и другие свойства, например, смещение и размер тени у свойства box-shadow или размер или интервал шрифта. Какие единицы измерения «длины» принято использовать в CSS? Существует много вариантов.

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

Пиксели px 
Код
wrap {
width: 400px;
}

Пиксель, возможно, лучше всего рассматривать как «абстрактную величину», так как он не имеет ничего общего с физическим пикселем вашего дисплея.

Цитата
CSS-пиксели — абстрактная величина, используемая браузерами для точного отображения контента на страницах, вне зависимости от экрана.

Пиксели основная единица измерения в вебе, и так как они отображаются практически единообразно, многие длины высчитываются в пикселях; тот же javascript «разговаривает» на пикселях.

Дюймы in.
Код
.wrap {
      width: 4in;
}

Дюйм (от нидерл. duim — большой палец) — единица измерения расстояния в некоторых европейских неметрических системах мер. В css дюймы просто сопоставляются с пикселями. Тем не менее, стоит отметить, что дюймы очень редко используются в CSS.

Код
1in == 96px


Сантиметры cm

Код
.wrap {
      width: 20cm;
}

Сантиметр — единица длины в различных метрических системах мер, равная 0,01 метра. В css также сопоставляется с пикселями.
Код
1cm == 37.8px


Миллиметры 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).

  • Страница 1 из 1
  • 1
Поиск:

Администрация проекта не несет какую-либо ответственность за
публикуемые пользователями материалы. Хостинг от uCoz.
Главный администратор сайта - Tolik.
Дизайн от life_man, верстка от sp1nn15.