ГРУППА КУРСА
|
Главная >
Учебник CSS >
Размеры блокаРазмеры блока по умолчаниюЕсли в CSS размеры блока не заданы, то они формируются так:
Для примера создадим блок без указания размеров и посмотрим, как он выглядит. Чтобы видеть размеры блока, зададим рамку с помощью свойства border. Стиль: +
HTML код:
Попробуйте менять ширину окна браузера, Вы увидите, что ширина блока тоже меняется. Установка размеров блока в CSSДля установления размеров блока есть свойство width, которое устанавливает ширину, и свойство height, которое устанавливает высоту. В значениях этих свойств указываются размеры блока в любых единицах, существующих в CSS, например в пикселях. При указании значения, единицы обязательно нужно указывать. Добавим на страницу ещё один блок с шириной 500 пикселей и высотой 200 пикселей.
Размеры можно указывать в процентах от внешнего блока. Если внешнего блока нет, то размер будет в процентах от размера страницы. Попробуем оба варианта. В блок с размерами поместим ещё один блок и укажем ему ширину 70%. Также создадим отельный блок и тоже укажем ширину 70%
Обратите внимание - при изменении ширины окна браузера отдельный блок меняет свою ширину. А тот, который внутри другого блока, остаётся неизменным, ведь его ширина зависит от размера, заданного точно. У размеров есть значение: width: auto; height: auto; При этом значении размеры блока определяются также, как если они не заданы. Это значение используется, если размер ранее был задан, а теперь его нужно вернуть к начальному. Также у размеров есть значение: width: inherit; height: inherit; При этих свойствах блок получает значения размеов от родительского элемента. Браузеры, особенно старые, по-разному определяют CSS размеры блока. Поэтому при установлении размеров нужно тщательно проверять отображение страницы. Минимальные и максимальные размеры блокаЕсли в CSS размер блока не задан точно и может меняться, то можно установить минимальный и максимальный размер. Для этого есть свойства min-width, max-width, min-height, max-height. Для примера создадим ещё один блок размером также 70%. Установим ему минимальную ширину 600 пикселей. Когда Вы будете уменьшать окно браузера, этот блок уменьшится только до 600 пикселей, а далее будет неизменным.
Содержимое за пределами блокаЕсли блоку заданы размеры, то часть содержимого может не поместиться в блок и оказаться за его пределами. Свойство overflow определяет, как отображается эта часть содержимого. Значения: overflow: visible - отображается и не учитывает границы (по умолчанию) overflow: hidden - не отображается overflow: scroll - содержимое не выходит за границы, а у блока есть полосы прокрутки overflow: auto - пока содержимое полностью помещается в блок, полос прокрутки нет. А когда содержимое перестаёт помещаться, они появляются overflow: inherit - значение принимается от родительского элемента Создадим блок с контентом, выходящим за его пределы. Свойство overflow пока не устанавливаем.
Текст этого блока выходит за границы и накладывается на другие элементы страницы. Установим свойство overflow:
Теперь содержимое за границами блока не отображается. Для текста это не подходит, ведь пользователь не сможет его прочитать. Попробуйте установить другие значения. Со значением scroll блок имеет обе полосы прокрутки. А со значением auto горизонтальной прокрутки нет, ведь содержимое помещается в блок по ширине. Существуют свойства overflow-x и overflow-y, которые отдельно устанавливают отображение содержимого по ширине и высоте. Они имеют те же значения. |