Размеры блока

Размеры блока по умолчанию

Если в CSS размеры блока не заданы, то они формируются так:

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

Для примера создадим блок без указания размеров и посмотрим, как он выглядит. Чтобы видеть размеры блока, зададим рамку с помощью свойства border.

Стиль:

7
8
9
10

div
  {
  border: 1px solid Red;
  }

HTML код:

14	<div>Блок без указания размеров</div>

Попробуйте менять ширину окна браузера, Вы увидите, что ширина блока тоже меняется.

Установка размеров блока в CSS

Для установления размеров блока есть свойство width, которое устанавливает ширину, и свойство height, которое устанавливает высоту. В значениях этих свойств указываются размеры блока в любых единицах, существующих в CSS, например в пикселях. При указании значения, единицы обязательно нужно указывать.

Добавим на страницу ещё один блок с шириной 500 пикселей и высотой 200 пикселей.

15	<div style="width: 500px; height: 200px">Блок с размерами</div>

Размеры можно указывать в процентах от внешнего блока. Если внешнего блока нет, то размер будет в процентах от размера страницы. Попробуем оба варианта. В блок с размерами поместим ещё один блок и укажем ему ширину 70%. Также создадим отельный блок и тоже укажем ширину 70%

15
16
17
18
19

<div style="width: 500px; height: 200px">
  Блок с размерами
  <div style="width: 70%">В процентах от внешнего блока</div>
</div>
<div style="width: 70%">В процентах от страницы</div>

Обратите внимание - при изменении ширины окна браузера отдельный блок меняет свою ширину. А тот, который внутри другого блока, остаётся неизменным, ведь его ширина зависит от размера, заданного точно.

У размеров есть значение:

width: auto;

height: auto;

При этом значении размеры блока определяются также, как если они не заданы. Это значение используется, если размер ранее был задан, а теперь его нужно вернуть к начальному.

Также у размеров есть значение:

width: inherit;

height: inherit;

При этих свойствах блок получает значения размеов от родительского элемента.

Браузеры, особенно старые, по-разному определяют CSS размеры блока. Поэтому при установлении размеров нужно тщательно проверять отображение страницы.

Минимальные и максимальные размеры блока

Если в CSS размер блока не задан точно и может меняться, то можно установить минимальный и максимальный размер. Для этого есть свойства min-width, max-width, min-height, max-height.

Для примера создадим ещё один блок размером также 70%. Установим ему минимальную ширину 600 пикселей. Когда Вы будете уменьшать окно браузера, этот блок уменьшится только до 600 пикселей, а далее будет неизменным.

20
21

<div style="width: 70%; min-width: 600px">
Блок в процентах с минимальной шириной</div>

Содержимое за пределами блока

Если блоку заданы размеры, то часть содержимого может не поместиться в блок и оказаться за его пределами. Свойство overflow определяет, как отображается эта часть содержимого. Значения:

overflow: visible - отображается и не учитывает границы (по умолчанию)

overflow: hidden - не отображается

overflow: scroll - содержимое не выходит за границы, а у блока есть полосы прокрутки

overflow: auto - пока содержимое полностью помещается в блок, полос прокрутки нет. А когда содержимое перестаёт помещаться, они появляются

overflow: inherit - значение принимается от родительского элемента

Создадим блок с контентом, выходящим за его пределы. Свойство overflow пока не устанавливаем.

22
23
24
25

<div style="height: 90px">
Элемент<br>с большим<br>количеством<br>содержимого<br>
которое<br>занимает<br>несколько<br>строк</div>
<div>Следующий элемент</div>

Текст этого блока выходит за границы и накладывается на другие элементы страницы. Установим свойство overflow:

22	<div style="height: 90px; overflow: hidden">

Теперь содержимое за границами блока не отображается. Для текста это не подходит, ведь пользователь не сможет его прочитать. Попробуйте установить другие значения. Со значением scroll блок имеет обе полосы прокрутки. А со значением auto горизонтальной прокрутки нет, ведь содержимое помещается в блок по ширине.

Существуют свойства overflow-x и overflow-y, которые отдельно устанавливают отображение содержимого по ширине и высоте. Они имеют те же значения.