Ширина и высота блока в CSS
Ширина и высота блока в CSS
В этой статье проведен обзор таких CSS свойств как width и height, которые позволяют задавать ширину и высоту блочным элементам. Рассмотрено свойство overflow, которое определяет видимость контента внутри блоков с фиксированными размерами, а также возможность установить минимальные и максимальные значения ширины и высоты для блочных элементов html документа.
CSS свойство width – ширина
Ширина элемента html документа задается свойством width, значением которого, могут быть любые единицы измерения, рассмотренные нами в предыдущей статье по курсу CSS.
Для примера зададим фиксированную ширину для блока с идентификатором content, html код которого выглядит так:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE HTML> <html> <head> <meta charset=\"utf-8\" > <title>Урок 7. Ширина и высота блочных элементов</title> <link rel=\"stylesheet\" href=\"css/main.css\"> </head> <body> <div id=\"content\"> <p>Свойство margin часто используется для выравнивания элементов веб – страницы по центру, для этого необходимо назначить данному свойству следующие значения margin: 0 auto, это скажет браузеру, что необходимо выровнять блочный элемент по центру окна браузера или дочернего элемента.</p> <p>Свойство margin часто используется для выравнивания элементов веб – страницы по центру, для этого необходимо назначить данному свойству следующие значения margin: 0 auto, это скажет браузеру, что необходимо выровнять блочный элемент по центру окна браузера или дочернего элемента.</p> </div> </body> </html> |
Для того, чтобы наш пример был более наглядным, добавим еще несколько CSS свойств, с которыми мы уже знакомы. А именно: рамку для нашего блока и выравнивание по центру.
Итак, наш CSS код имеет вид:
1 2 3 4 5 |
div#content { width: 50%; border: 1px solid blue; margin:0 auto; } |
Результат работы кода на скриншоте:
CSS свойство height – высота
Аналогичным образом можно задать фиксированную высоту блочного элемента, для этого применяется CSS свойство height, значением которого, могут являться любые единицы измерения.
Добавим к нашему примеру выше фиксированное значение высоты и посмотрим, что изменится после наших действий.
Например:
1 2 3 4 5 6 |
div#content { width: 50%; height: 150px; border: 1px solid blue; margin:0 auto; } |
Довольно интересную картину, мы наблюдаем на скриншоте ниже:
Содержимое блока вышло за пределы заданной нами фиксированной ширины, так как оно просто не помещается в установленные нами размеры.
Для того чтобы исправить эту ситуацию в CSS существует такое свойство, как overflow. Давайте более подробно его разберем.
CSS свойство overflow
Свойство overflow управляет отображением содержания блочного элемента, если оно не помещается в заданные размеры и выходит за его пределы, как в нашем с вами случае.
У данного CSS свойства есть несколько значений:
-visible – отображает все содержимое, даже если оно выходит за пределы заданных размеров. Данное значение установлено по умолчанию;
-hidden – все, что выходит за пределы заданных размеров блока, будет скрыто;
-scroll – принудительно добавляет полосы прокрутки к блочному элементу, даже если контент внутри него не выходит за пределы заданных значений.
-auto – полосы прокрутки будут добавлены, но только в случае необходимости;
-inherit – наследует значение родителя.
В нашем случае, возможны два варианта, это либо спрятать часть текста, либо добавить полосы прокрутки. Я предлагаю воспользоваться вторым вариантом, тогда CSS код будет выглядеть так:
1 2 3 4 5 6 7 |
div#content { overflow: auto; width: 50%; height: 150px; border: 1px solid blue; margin:0 auto; } |
А результат работы такого кода, можно посмотреть ниже:
Справа появилась полоса прокрутки, благодаря которой, контент внутри блока фиксированных размеров можно полностью просмотреть.
Минимальное и максимальное значение ширины и высоты в CSS
Иногда, вместо фиксированной ширины и высоты требуется задать размеры блочных элементов в заданных пределах. Это довольно часто используется при верстке резиновых сайтов. В таком случае размеры блока будут изменятся в заданных пределах, в зависимости от его содержания.
Минимальные и максимальные размеры блока
Установить пределы ширины можно с помощью свойств:
-min— width – задает минимальную ширину блока;
-max— width – задает максимальную ширину блока.
Аналогично можно установить пределы высоты блока, с помощью CSS свойств:
-min— height – минимальная высота блока;
-max— height – максимальная высота блока.
Изменим CSS код ля нашего примера выше, таким образом, чтобы полоса прокрутки исчезла.
Например:
1 2 3 4 5 6 7 |
div#content { min-height: 200px; overflow: auto; width: 50%; border: 1px solid blue; margin:0 auto; } |
В результате высота нашего блока стала немного больше. И необходимость в полосе прокрутки пропала, что видно из скриншота.
На этом я заканчиваю свой обзор. Это была довольно познавательная статья, в которой мы научились не только задавать фиксированные размеры ширины и высоты блочных элементов, с помощью CSS свойств width и height, но также и манипулировать отображением содержания блока, используя свойство overflow.
В данной статье, вы также познакомились с такими CSS свойствами, которые позволяют задавать максимальную и минимальную ширину блочным элемента. Я искренне надеюсь, что вам было интересно, и жду вас в следующих статьях по курсу CSS на страницах блога.