| [ Новые сообщения · Участники · Правила форума · Поиск · RSS ] |
|
   |
| Форум » Все для Веб-Мастера » CSS » Единицы измерения длины в CSS (Существует несколько свойств в CSS, которые принимают....) |
| Единицы измерения длины в CSS |
|
Существует несколько свойств в 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; } Пункты отлично подходят для печати, но ничто не мешает вам использовать пункты и на сайте. Хотя стоит отметить, что браузеры не всегда одинаково отображают пункты. Пика Код .wrap { width: 12pc; } Ex Код .wrap { width: 60ex; } В отличие от ems, которые не меняются при изменении свойства font-family, единицы измерения ex поменяются, когда вы измените значение у свойства font-family Ch Код .wrap { width: 60ch; } Поддержка браузерами: на данный момент не поддерживается браузерами на основе webkit (safari, яндекс, chrome). 
  |
| |||
| |||