Определение размера и позиции с помощью CSS-манекенов

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

Например, многие дизайнеры, работающие с бумагой и чернилами, используются для указания шрифтов в точках . Точка - абсолютная длина: 1/72 дюйма. Использование абсолютных спецификаций размера шрифта для журнала или книги отлично работает - в конце концов, пользователь не может сжимать, растягивать или изменять пропорции страницы в книге. ( Соотношение сторон - это соотношение между высотой и шириной.) Браузеры, однако, могут быть изменены по желанию. Если вы перетащите одну сторону браузера, вы меняете его, делая его тоньше или толще. Другими словами, вы меняете свою форму, ее соотношение сторон, от, скажем, квадрата до прямоугольника.

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

Измеряемая длина

Здесь они в двух словах … все единицы измерения длины:

px (в пикселях): Пиксели - это самая маленькая единица на дисплее - точки вы можете иногда видеть, приближаетесь ли вы к телевизору. Например, установка разрешения монитора 800 × 600 означает, что он имеет разрешение 800 пикселей на 600 пикселей.

pt (points): Точка равна 1/72 дюйма. Очки (и picas) - это классические измерения шрифтов. В большинстве браузеров по умолчанию используется шрифт с засечками с 12 точками.
pc (picas): Одна пика равна 12 пунктам.
мм (миллиметры): мм.0394 дюйма, поэтому один дюйм содержит приблизительно 26 миллиметров. Один сантиметр содержит 10 миллиметров. Большая часть мира использует эту метрическую систему .

см (сантиметры): См. 3937 дюймов, поэтому дюйм содержит приблизительно 2 1/2 сантиметра.
дюймы (дюймы): Дюймы являются единицей в английской или имперской системе , используемой в Соединенных Штатах. Англия и несколько остатков колониального периода также долгое время оставались с имперской системой, но недавно обрушились. Британское правительство в 2000 году выполнило европейскую метрику, и теперь уголовное преступление продается фунтом в любом месте царства Ее Величества. Например, мужчина в Корнуолле, как сообщается, должен был заплатить судебные издержки после того, как его поймали, продавая скумбрию в 1 фунт стерлингов. 50 фунтов.

em: Em - единица измерения, полученная из приблизительной ширины буквы < m шрифта. Это считается лучшим способом указать размер шрифта в CSS, хотя некоторые дизайнеры следуют этому совету. ex (x-height):
Ex - это высота x или высота строчной буквы x шрифта текущего элемента.) Браузеры обычно делят их на половину чтобы получить экс-высоту. Эта единица измерения в настоящее время не так полезна, как em, потому что она не столь предсказуема в среднем для всех шрифтов.

% (в процентах):

Проценты превосходны для указания относительного размера (это может быть относительно предка, родителя и т. Д.). Единицы измерения не чувствительны к регистру. Вы можете капитализировать их или нет, как пожелаете. Аналогично, в IE вы можете включить пробел между номером и его единицей или нет: например, 2 в эквиваленте 2in. Другие браузеры не любят пространство. Для простоты, используя строчные буквы и избегая ненужных пространств, как правило, хорошая идея при работе с CSS. Просто придирайтесь к формату 2in или 24px, и все будет в порядке, если комитеты CSS не захотят отменить себя в будущем.

Понимание мало em

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

m . Возможно, вы слышали термин

m-dash или em-dash , который является тире, обычно используемым при публикации. Это горизонтальная линия - такая же, как и ширина шрифта шрифта m (это не является строго точным эквивалентом во многих шрифтах). Существует также en-dash. Угадайте, на чем он основан.

Em и ex единицы

относительный для каждого шрифта. Это полезно, потому что это означает, что размер, заданный em, изменяется точным образом на основе разрешения монитора пользователя, настроек предпочтений и других факторов.Другими словами, использование em позволяет указать, что произойдет с относительным шрифтом. Результат пропорционален другим качествам шрифта и окружающего текста. Кроме того, относительные характеристики, такие как em, позволяют людям с ограниченными возможностями расширять шрифт в своем браузере по мере необходимости. Исправленные спецификации, такие как px или pt, не предоставляют пользователю эту возможность. Em и ex - это стандартная единица измерения набора, но их значения в CSS немного изменены. Во-первых, компьютеры вычисляют ex, просто деля их пополам. Это проще вычислить, но только приближение для большинства шрифтов. Em в CSS - размер шрифта в пикселях. Это полезно, потому что вы можете указать em units и полагаться на них относительно шрифта родительского (или другого) элемента.

Вот эксперимент, чтобы понять, как em

относительный для другого элемента. В этом коде текст внутри элемента определяется как 26px, но текст внутри элемента абзаца определяется как 1. 5em, или, иначе говоря, в полтора раза больше размера родителя. Позже в HTML-коде элемент абзаца прилагается (родительский) к элементу body. Следовательно, текст абзаца отображается на 1. 5 × 26 пикселей (или 39 пикселей). body {font-size: 26px;}

p {font-size: 1. 5em;}

p. abs {font-size: 39px;}

некоторый текст

некоторый текст (1. 5 em родительского тела).

некоторый текст (39 пикселей).

Текст в версии класса abs

отображается в том же размере, что и обычный

. Элемент является родительским элементом

, а

определяется как 1. 5em его родителя. Родительский орган использует 26 пикселей в качестве размера текста, поэтому 26 × 1. 5 результатов в 39 пикселей.