Меню
✘Скрыть меню
Меню заработка
✘Скрыть меню
Загрузка.. nostroma.online from NOSTROMA - best life and beautiful workЭто ужасно тяжелая работа — ничего не делать – Оскар УайльдРешающую роль в работе играет не всегда материал, но всегда мастер – Максим ГорькийЯ слишком энергичен, чтобы работать – Марсель АшарЧто привлекло меня в карьере писателя? Отсутствие бумажной работы.Одни люди работают только для того чтобы работать, другие – для того, чтобы иметь возможность не работать в будущем.Занятие ерундой на рабочем месте развивает боковое зрение, слух и бдительность в целомСтоит статýя в лучах заката с огромным буем, в руках - граната.Друзья, если вы попались на лохотрон, не будьте эгоистами - предупредите других о таком сайте!Секрет гения — это работа, настойчивость и здравый смысл. Томас Эдисон
Меню заработка

Курсы HTML/CSS

Урок 12. Переполнение контентом, управление потоком элементов

Содержание курса

Ширина и высота элементов, переполнение контентом.

У блочных элементов возможно задание фиксированной ширины и высоты. Для этого используются свойства CSS width (ширина) и height (высота), значения которых - любой допустимый формат размера (px, em, ex, cm, mm и др.).

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

Свойства min-height и min-width - задают минимально возможную ширину и высоту для элемента. При наполнении содержимым, в случае достижения минимально допустимой ширины и высоты дальнейшее уменьшение этих размеров элемента происходить не будет.

<!DOCTYPE html>
	<html>
		<head>
			<title>Ширина, высота, переполнение</title>
			<style>
				p {
					width: 200px;
					height: 100px;
					overflow: auto;
				}
			</style>
		</head>
		<body>
		
			<p>
			Абзац, состоящий из нескольких строк
			Абзац, состоящий из нескольких строк
			Абзац, состоящий из нескольких строк
			Абзац, состоящий из нескольких строк
			Абзац, состоящий из нескольких строк
			Абзац, состоящий из нескольких строк
			Абзац, состоящий из нескольких строк
			Абзац, состоящий из нескольких строк
			</p>
			
		</body>
	</html>

Результат отображения:


При задании фиксированной ширины и высоты может происходить переполнение элемента контентом (содержимым), которое по умолчанию будет просто "вываливаться наружу" (выходить за границы элемента).

Чтобы этим управлять в CSS есть свойство overflow (переполнение). Его возможные значения:
visible - содержимое видно даже при переполнении, значение по умолчанию.
hidden (скрыть) - отображается только то, что влезло, остальное будет скрыто.
scroll (прокрутка) - всегда отображаются полосы прокрутки по горизонтали и вертикали.
auto (авто) - полосы прокрутки отображаются при необходимости.
inherit (наследовать) - наследуется значение родителя элемента (если таковое имеется).

Свойство overflow-x - управляет отображением содержимого по горизонтали в случае переполнения. Значения: visible, hidden, scroll (полоса прокрутки добавляется только по горизонтали), auto.

Аналогично свойство overflow-y управляет отображением содержимого по вертикали в случае переполнения. Возможные значения те же, что и у overflow-x, только значение scroll в этом случае добавляет полосу прокрутки только по вертикали.

Управление потоком элементов - свойства float и clear

В условиях по умолчанию все элементы в html находятся в состоянии "нормально потока элементов", т.е. один элемент следует за другим. Свойство float позволяет управлять этим потоком и позиционировать элементы в нужном стиле.

		Пример нормального потока элементов:
		======================================
<!DOCTYPE html>
	<html>
		<head>
			<title>Пример нормального потока элементов</title>
			<style>
			
				#a {
					background: magenta; 
					width: 100px; 
					height: 50px;
					}
					
				#b {
					background: peru;
					width: 200px; 
					height: 50px;
					}
					
				#c {
					background: maroon;
					width: 120px; 
					height: 80px;
					}
					
				#d {
					background: red; 
					width: 100px;
					height: 50px;
					}
					
				#e {
					background: green; 
					width: 100px; 
					height: 50px;
					}
					
			</style>
		</head>
		<body>
			<div id="a">Раздел 1</div>
			<div id="b">Раздел 2</div>
			<div id="c">Раздел 3</div>
			<div id="d">Раздел 4</div>
			<div id="e">Раздел 5</div>
		</body>
	</html>

Вид в браузере:

Применение свойства float выбивает элемент из нормального потока и делает его плавающим. При этом остальные элементы, находящиеся в нормальном потоке как бы не замечают плавающий элемент. Значение float: left заставляет занять элемент доступный левый верхний угол своего родителя. Это видно в примере ниже: второй DIV цвета "peru" c шириной 200px, не замечая плавающего элемента, тоже занял левый верхний угол своего родителя и подлез под DIV 1.

		DIV 1 выбит из нормального потока:
		======================================
<!DOCTYPE html>
	<html>
		<head>
			<title>Плавающий DIV 1</title>
			<style>
			
				#a {
					background: magenta;
					width: 100px; 
					height: 50px; 
					float: left;
					}
					
				#b {
					background: peru; 
					width: 200px;
					height: 50px;
					}
					
				#c {
					background: maroon;
					width: 120px; 
					height: 80px;
					}
					
				#d {
					background: red;
					width: 100px;
					height: 50px;
					}
					
				#e {
					background: green;
					width: 100px;
					height: 50px;
					}
					
			</style>
		</head>
		<body>
			<div id="a">Раздел 1</div>
			<div id="b">Раздел 2</div>
			<div id="c">Раздел 3</div>
			<div id="d">Раздел 4</div>
			<div id="e">Раздел 5</div>
		</body>
	</html>

Вид в браузере:

Посмотрите в примере, текст у DIV 2 теперь обтекает DIV 1.

Если теперь у DIV 2 цвета "peru" тоже задать float: left, то и он будет плавающим и займет доступный верхний левый угол своего родителя, а таким доступным углом теперь станет положение рядом с DIV 1:

		DIV 1 и DIV 2 выбиты из нормального потока:
		======================================
<!DOCTYPE html>
	<html>
		<head>
			<title>Плавающий DIV 1 и DIV 2</title>
			<style>
			
				#a {
					background: magenta;
					width: 100px;
					height: 50px;
					float: left;
					}
					
				#b {
					background: peru; 
					width: 200px;
					height: 50px;
					float: left;
					}
					
				#c {
					background: maroon;
					width: 120px; 
					height: 80px;
					}
					
				#d {
					background: red;
					width: 100px; 
					height: 50px;
					}
					
				#e {
					background: green;
					width: 100px;
					height: 50px;
					}
					
			</style>
		</head>
		<body>
			<div id="a">Раздел 1</div>
			<div id="b">Раздел 2</div>
			<div id="c">Раздел 3</div>
			<div id="d">Раздел 4</div>
			<div id="e">Раздел 5</div>
		</body>
	</html>

Вид в браузере:

Как видно из примера DIV 1 и DIV 2 плавающие и теперь уже DIV 3, не замечая их, тоже занял верхний левый угол и подлез под DIV 1 и DIV 2. Текст в DIV 3 теперь обтекает DIV 2 и DIV 1. Значение right делает все то же самое, но с правым верхним углом.

Свойство clear запрещает элементам в нормальном потоке "подлезать" под плавающие элементы или запрещает обтекание элемента другими элементами. Его возможные значения:
none - обтекание разрешено, значение по умолчанию
left - запрещает обтекание с левого края элемента
right - запрещает обтекание с правого края элемента
both - запрещает обтекание с обоих краев элемента
inherit - наследую значение родителя

Зададим DIV 3 свойство clear: left и посмотрим, что получится:

<!DOCTYPE html>
	<html>
		<head>
			<title>Свойство clear</title>
			<style>
			
				#a {
					background: magenta;
					width: 100px; 
					height: 50px;
					float: left;
					}
					
				#b {
					background: peru; 
					width: 200px; 
					height: 50px;
					float: left;
					}
					
				#c {
					background: maroon;
					width: 120px; 
					height: 80px; 
					clear: left;
					}
					
				#d {
					background: red;
					width: 100px; 
					height: 50px;
					}
					
				#e {
					background: green;
					width: 100px; 
					height: 50px;
					}
					
			</style>
		</head>
		<body>
			<div id="a">Раздел 1</div>
			<div id="b">Раздел 2</div>
			<div id="c">Раздел 3</div>
			<div id="d">Раздел 4</div>
			<div id="e">Раздел 5</div>
		</body>
	</html>

Вид в браузере:

Теперь DIV 3 запрещено обтекать плавающие элементы с левой стороны от себя и он занял доступный для него верхний левый угол так, как показано в примере. Но понятней будет так: свойство clear запрещает элементу подлезать под плавающие элементы (у которых выставлен float).

Если вместе с clear со значением left для DIV 3 задать и float со значением left, то он станет плавающим, но доступным левым верхним углом для него останется свое место (свойство clear не позволяет ему подлезать под DIV 1 и 2), но поскольку теперь он станет плавающим, DIV 4 (ему мы не запрещали подлезать под плавающие элементы) подлезет под DIV 1, а DIV 5 под DIV 3 и их станет не видно, а текст "вывалится" (произойдет переполнение, тексту некуда деться). Такой вот получается "тетрис". Попробуйте сделать это самостоятельно.

Важная особенность свойства float: если у элемента не задана ширина и задан float, то его ширина устанавливается по ширине контента (содержимого) элемента.

Рассмотрим теперь практическое применение свойств float и clear. В примере ниже приведен пример макета сайта из трех колонок с "шапкой" и "подвалом".

<!DOCTYPE html>
	<html>
		<head>
			<title>Макет сайта из трех колонок</title>
			<style>
			
				#a {
					background: magenta; 
					width: 100%;
					}
					
				#b {
					background: peru;
					width: 150px;
					float: left;
					}
					
				#c {
					background: maroon; 
					width: 150px; 
					float: right;
					}
					
				#d {
					margin: 0 150px 0 150px;
					}
					
				#e {
					background: green;
					width: 100%; 
					clear: both;
					}
					
			</style>
		</head>
		<body>
			<div id="a">DIV a - "шапка" сайта</div>
			<div id="b">DIV b - левое меню сайта</div>
			<div id="c">DIV c - правое меню сайта</div>
			<div id="d">DIV d, содержащий контент сайта (содержимое 
			этого элемента определяет ширину и высоту DIV d)
			</div>
			<div id="e">DIV e - "подвал" сайта</div>
		</body>
	</html>

Вид в браузере:

В примере содержимое левого и правого меню, а также "шапки" и "подвала" будет определять высоту этих элементов. При наполнении их контентом они будут растягиваться только в высоту (ширина задана жестко).

В 21 уроке курса 1-2 мы ещё поговорим о свойстве float.

Комментарии

Введите Ваше имя:*

Введите e-mail:

Ваш комментарий:*

* Обязательные поля