CSS :: Размеры элементов
Размеры элементов и css-свойства width и height
Высоту и ширину элементов можно задать при помощи ненаследуемых свойств height и width, которые в качестве значений принимают все доступные в CSS единицы измерения длины, а также проценты. Кроме того, свойства принимают значение auto, которое используется браузером по умолчанию и сообщает ему о том, что высоту и ширину элемента нужно устанавливать автоматически таким образом, чтобы в нем поместилось все его содержимое. Применение этих свойств к строчным элементам не будет иметь никакого эффекта. Также не будет иметь эффекта установка ширины для строк таблицы и высоты для колонок таблицы.
css-свойство box-sizing
По умолчанию, говоря о высоте и ширине, имеются в виду размеры области содержимого элемента, которые не включают в себя внутренние отступы и границы элемента (см. рисунок №1). Если же требуется, чтобы браузер, имея дело со свойствами height и width, интерпретировал их значения по другому, необходимо использовать свойство box-sizing, которое может принимать следующие значения:
- content-box – используемое по умолчанию значение, браузер не принимает во внимание внутренние отступы и границы элемента при расчете его высоты и ширины, в результате свойства height и width задают высоту и ширину контента элемента;
- border-box – браузер учитывает внутренние отступы и границы элемента при расчете его высоты и ширины, в результате свойства height и width задают высоту и ширину самого элемента.
Рис №1. Общая схема элемента
Установка предельных значений размеров элементов,
css-свойства min-width, min-height, max-width, max-height
Также имеются возможности для указания минимально и максимально допустимых значений высоты и ширины. Для этого предназначены ненаследуемые свойства min-height и min-width, max-height и max-width (см. пример №2). Если высота (ширина) элемента будет меньше, чем значение свойства min-height (min-width), то браузер отдаст приоритет значению свойства min-height (min-width). Аналогично, если высота (ширина) элемента будет больше, чем значение свойства max-height (max-width), то браузер отдаст приоритет значению свойства max-height (max-width).
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Размеры элементов</title> <style> .size_1{ width: 250px; height: 15vh; background-color: yellow; } .size_2{ width: 250px; height: 150px; min-width: 350px; max-height: 400px; background-color: violet; } </style> </head> <body> <p class="size_1"> Ширина абзаца равна 250px, высота – 15% от высоты области просмотра окна браузера. </p> <p class="size_2"> Ширина абзаца будет 350px, т.к. width меньше min-width, а высота – 150px, т.к height меньше max-height. </p> </body> </html>
Пример №2. Установка размеров элементов
В конце пункта отметим, что свойства min-height, min-width, max-height и max-width в качестве значений принимают все доступные в CSS единицы измерения длины, а также проценты. Но, в отличие от свойств определения высоты и ширины, они не принимают значение auto.
Быстрый переход к другим страницам
- Оформление внешнего вида колонок
- Определение размеров элементов
- Установка границ элементов
- Вернуться к оглавлению учебника