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

Курсы HTML/CSS

Урок 19. Margin-collapse вложенных элементов, минимальная и максимальная ширина, высота в процентах.

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

Margin-collapse вложенных элементов

Рассмотрим такой код: в примере ниже для блока OUT задан внутренний отступ (padding-top), который не разрешает содержимому (а содержимое в примере - это блок IN) приближаться к его верхней границе на 100px.

<!DOCTYPE html>
	<html>
		<head>
			<title>margin-collapse</title>
			<style>
			
				#out {
					background: yellow;
					padding-top: 100px;
					}
					
				#in {
					background: silver;
					height: 100px;
					width: 60%;
					margin: auto;
					}
					
			</style>
		</head>
		<body>
			<div id="out">
				<div id="in">Содержимое в блоке IN</div>
			</div>
		</body>
	</html>

Вертикальный margin, заданный для элемента переходит к родителю, т.е выдавливает родителя. Именно поэтому, если теперь мы уберём у блока OUT правило padding-top: 100px, а для блока IN зададим margin-top: 100px, то получим такой результат:

Однако если в родителе есть содержимое, то оно будет выступать ограничителем для распространения вертикального margin. Если в примере выше положить какое-нибудь содержимое в блок OUT например, текст, то картина отображения будет такой:

Также ограничителями будут являться свойства заданные для родителя: border, padding-top, overflow (все значения, кроме visible), position: absolute, ограничителем будет выступать и свойство float, заданное для самого элемента (в примере: блока IN).

Минимальная и максимальная ширина

Возьмём такой пример:
<!DOCTYPE html>
	<html>
		<head>
			<title>Минимальная и максимальная ширина</title>
			<style>
			
				#out {
					background: red; 
					padding: 20px;
					}
					
				#in {
					background: silver;
					height: 100px;
					}
					
			</style>
		</head>
		<body>
			<div id="out">
				<div id="in"></div>
			</div>
		</body>
	</html>

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

Если теперь задать для блока IN ширину в 500px - width:500px, то блок OUT по-прежнему будет подстраиваться под ширину своего родителя, а вот блок IN при ширине области просмотра браузера меньше 500px вылезет за пределы своего родителя - блока OUT.

Эти свойства поведения блоков следует учитывать при создании "резиновых" сайтов, т.е. таких сайтов, колонки которых подстраиваются под ширину экрана. С этим могут возникнуть большие сложности: при уменьшении области просмотра вся вёрстка будет разваливаться и колонки начнут наезжать друг на друга, а на больших экранах всё будет выглядеть очень сильно растянутым.

Для того, чтобы избежать нежелательного диапазона значений ширины, есть свойства max-width и min-width - это максимальная и минимальная ширина элемента соответственно. Зададим блоку OUT в нашем примере минимальную и максимальную ширину:

<!DOCTYPE html>
	<html>
		<head>
			<title>Минимальная и максимальная ширина</title>
			<style>
			
				#out {
					background: red; 
					padding: 20px; 
					max-width: 700px;
					min-width: 500px
					}
					
				#in {
					background: silver;
					height: 100px;
					}
					
			</style>
		</head>
		<body>
			<div id="out">
				<div id="in"></div>
			</div>
		</body>
	</html>

Теперь, при уменьшении области просмотра браузера, как только ширина станет меньше 500px, блок OUT прекратит уменьшать свою ширину, а браузер начнёт отображать полосы прокрутки. Если же ширина области просмотра станет больше 700px, то блок OUT не станет увеличивать свою ширину. Таким образом мы задали диапазон допустимого изменения ширины блока OUT от 500px до 700px. Получился "резиново-фиксированный" блок

Высота в процентах в режиме "quirks mode"

В приведённом ниже примере для блока DIV задана высота 100%:

<!DOCTYPE html>
	<html>
		<head>
			<title>Высота в % в режиме "quirks mode"</title>
			<style>
			
				html, body {
					color: silver;
					}
					
				div {
					background: slateblue;
					height: 100%;
					}
					
			</style>
		</head>
		<body>
			<div>
				Текст в блоке DIV <br />
				Текст в блоке DIV <br />
				Текст в блоке DIV <br />
				Текст в блоке DIV <br />
				Текст в блоке DIV <br />
				Текст в блоке DIV <br />
				Текст в блоке DIV <br />
				Текст в блоке DIV <br />
				Текст в блоке DIV <br />
				Текст в блоке DIV <br />
			</div>
		</body>
	</html>

Однако в браузере DIV, как ожидалось, не растянется на всю высоту области просмотра.

Причина в том, что высота DIV взялась 100% от высоты родителя - элемента <body>, а у BODY высота по умолчанию выставлена в auto и зависит от содержимого. В режиме "standarts mode" дочерний элемент не может прочитать значение высоты своего родителя, но вот в режиме "quirks mode" это возможно. Если мы теперь уберём строку <!DOCTYPE html> из кода, то браузер отобразит документ режиме "quirks mode" и высота DIV займёт 100% области просмотра.

Как же можно добиться желаемого результата в режиме "standarts mode"? Для этого нужно всей цепочки родителей указать высоту 100%, в нашем примере - это элементы <body> и <html>. Последнему (целевому) элементу, отображение которого требуется на всю высоту области просмотра, нужно задать min-height: 100% (иначе будет окрашена только высота изначальной области просмотра). Таким образом конечный набор правил CSS для нашего примера будет таким:

<!DOCTYPE html>
	<html>
		<head>
			<title>Высота в % в режиме "standarts mode"</title>
			<style>
			
				html, body {
					color: silver;
					height: 100%;
					}
					
				div {
					background: slateblue;
					min-height: 100%;
					}
					
			</style>
		</head>
		<body>
			<div>
				Содержимое элемента DIV
			</div>
		</body>
	</html>

Комментарии

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

Введите e-mail:

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

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