Загрузка...Width и height: определяем размеры элемента
Width и height: определяем размеры элемента
Для того чтобы объекту можно было задать определенную ширину и высоту, в CSS существуют два свойства — width и height (соответственно). С их помощью вы можете устанавливать фиксированные размеры элементов, будь-то сайдбар, изображение, таблица или любой блок.
Особенности вычисления ширины и высоты
Для определения ширины либо высоты объекта можно использовать любые единицы измерения длины в CSS. Наиболее просты в понимании пикселы. Если вы используете процентную запись, имейте в виду, что в этом случае ширина объекта будет зависеть от ширины его родителя. Если такового нет, то ширина элемента вычисляется, исходя из ширины окна браузера (при изменении пользователем ширины окна значение width будет пересчитано).
В качестве значения ширины можно использовать и единицу em , которая является примерно тем же, чем и размер шрифта текста, но только в условных единицах. К примеру, вы установили размер для шрифта 24px . Тогда 1em для этого элемента будет равен 24 пикселам, а если вы зададите width: 2em , то ширина составит 2×24px = 48 пикселов. Если размер шрифта не задан, он будет унаследован.
Высота height , заданная в процентах, вычисляется аналогичным образом, что и ширина, но расчет основывается уже на высоте родительского элемента, а не на его ширине. Если родитель отсутствует, высота будет зависеть от высоты окна браузера.
Процентная ширина и высота дочернего элемента вычисляются на основании размеров родителя
Что входит в ширину и высоту
Сразу стоит запомнить, что у свойств width и height есть особенность — они не включают в себя значения margin , padding и border . Значение, которое вы установите для width/height, будет означать лишь ширину/высоту области содержимого элемента.
Таким образом, для того чтобы вычислить, например, фактическую ширину элемента (место, которое он в действительности займет на экране), понадобится немного арифметики. Фактическая ширина — это сумма значений, таких как width , padding , border и margin . Напомним, что ранее мы рассматривали, как выглядит блочная модель CSS.
Для закрепления знаний покажем пример. Допустим, у вас есть элемент с таким стилем:
Для подсчета фактической ширины элемента выполним сложение:
width + margin-left + margin-right + padding-left + border-left = 200px + 15px + 15px + 10px + 3px = 243px (фактическая ширина)
Рекомендации по высоте
Свойство height может быть удобным, если надо точно контролировать, например, высоту изображения. Однако, если в контейнере будет содержаться текст или любой другой контент, у которого может варьироваться высота, крайне не рекомендуется устанавливать фиксированную высоту для контейнера, так как подобная верстка может привести к неожиданному результату — контент будет отображаться поверх другого содержимого.
Вместо фиксированной высоты использовать height: auto — эта запись означает, что высота объекта будет рассчитываться автоматически, в зависимости от содержимого, которое он содержит.
Другой способ избежать развала верстки — использовать запись overflow: auto . В таком случае, если высота содержимого будет превышать значение height своего контейнера, браузер добавит к контейнеру полосу прокрутки.
В следующем уроке вы узнаете, как можно переопределять ширину элемента с помощью интересного и очень полезного свойства box-sizing.
Используйте em или px для шрифтов
Единицы pt (пункт) and pc (пика) CSS получил в наследство от печатного дела. Там традиционно применялись эти и подобные единицы, а не сантиметры или дюймы. В CSS незачем использовать pt , пользуйтесь любой единицей на свой выбор. Но есть хорошая причина не использовать ни pt , ни других абсолютных единиц, а использовать только em и px .
Вот несколько линий разной толщины. Некоторые из них могут казаться четкими, но как минимум линии в 1px и 2px должны быть четкими и видимыми:
0.5pt, 1px, 1pt, 1.5px, 2px
Если первые четыре линии выглядят одинаковыми (либо линия в 0.5pt пропала), скорее всего вы видите это на мониторе, не способном отображать точки мельче 1px. Если линии выглядят возрастающими по толщине, скорее всего вы видите эту страницу на качественном экране или на бумаге. А если 1pt выглядит толще, чем 1.5px, то это скорее всего экран мобильного устройства (похоже, последняя фраза описывает ситуацию до правки 2011 года — прим. перев.).
Волшебная единица CSS, px , часто бывает удачным выбором, особенно если нужно выровнять текст с картинками, либо просто потому, что что-либо толщиной 1px (или кратной 1px) заведомо будет выглядеть четко.
Но размеры шрифтов еще лучше задавать в em . Идея в том, чтобы 1) не задавать размер шрифта для элемента BODY (в HTML), а использовать размер шрифта по умолчанию для устройства, поскольку это наиболее удобный для читателя размер; и 2) указывать размеры шрифта других элементов в em : H1
Едиственное место, где можно использовать pt (либо cm или in ) для размера шрифтов — стили для печати, если нужно, чтобы напечатанный шрифт был строго определенного размера. Но даже там чаще всего лучше использовать размер шрифта по умолчанию.
Таким образом, единица px избавляет от необходимости знать разрешение устройства. Независимо от разрешения устройства вывода (96 dpi, 100 dpi, 220 dpi или 1800 dpi), длина, указанная в виде целого числа px , всегда выглядит хорошо и везде достаточно похоже. Но что, если мы хотим узнать разрешение устройства, например, чтобы решить, можно ли использовать линию в 0.5px ? Выход — проверить разрешение с помощью медиавыражений. Подробности о медиавыражениях — за рамками этой статьи, но вот небольшой пример:
Три способа найти длину прямоугольника
Если разделить фигуру на две части диагональю, то можно заметить, что прямоугольник поделится ею на два прямоугольных треугольника. Из этого разделения и вытекают все формулы длины прямоугольника.
Через теорему Пифагора
Если известна длина диагонали (обозначим ее буквой d) и длина прямоугольника (примем значение за букву a). Тогда корень квадратный из разности квадратов диагонали и длины будет равен ширине прямоугольника.
Чтобы было понятнее, напишем решение в виде нескольких формул.
Согласно теореме Пифагора – квадрат гипотенузы равен сумме квадратов катетов. Гипотенуза – это сторона, противоположная прямому углу, две другие стороны зовутся катетами. В нашем случае гипотенуза это диагональ.
Значит: d 2 =a 2 +b 2 . Из этого выражения выразим квадрат ширины (значение «b»):b 2 =d 2 -a 2
Для того, чтобы определить значение b, нужно взять корень квадратный из обеих сторон получившегося выражения: b=(d 2 -a 2 ) (-1)
В случае необходимости, можно поменять местами а и b, тогда получится формула длины.
Через площадь
Рассмотрим еще один способ найти длину прямоугольника – через площадь.Площадь прямоугольника равна произведению длины и ширины. То есть, используя уже знакомые обозначения S=a*b. Выразим из этой формулы значение ширины: b=S/b.
Так же, как и в первом методе, можно поменять местами а и b, чтобы получить формулу для длины: a=S/b.
Тригонометрическая функция
Один из самых быстрых, но при этом немного сложных способов нахождения длины – воспользоваться тригонометрической функцией.
Если имеется прямоугольный треугольник, то соответственно имеются отношения, известные как синус и косинус.
Выберем угол между длиной и диагональю. Обозначим его α. Тогда sin α равен отношению катета, противоположного углу α к гипотенузе: Sin α = a/c
Рис. 2. Угол альфа на половине прямоугольника
Значение синуса любого угла можно найти в таблицах Брадиса или с помощью калькулятора. Для удобства можно воспользоваться онлайн-версией, которая найдет значение отношения автоматически.
Но в формуле нет значения b, которое соответствует длине, а, значит, воспользуемся основным тригонометрическим тождеством. Косинус – это отношение стороны, прилежащей к углу, к гипотенузе: cos a=b/c
Значит можно найти длину, умножив косинус на гипотенузу: b=cos α*c
