Определение размеров элементов в CSS
belarusweb.net
© Петр Романовский Минск, 2016-2018.



belarusweb.net
Основы создания сайтов...

Определение размеров элементов

Размеры элементов и css-свойства width и height

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

css-свойство box-sizing

По умолчанию, говоря о высоте и ширине, имеются в виду размеры области содержимого элемента, которые не включают в себя внутренние отступы и границы элемента (см. рис. 3.1). Если же требуется, чтобы браузер, имея дело со свойствами height и width, интерпретировал их значения по другому, необходимо использовать свойство box-sizing, которое может принимать следующие значения:

Рис 3.1. Общая схема элемента

Установка предельных значений размеров элементов,
css-свойства min-width, min-height, max-width, max-height

Также имеются возможности для указания минимально и максимально допустимых значений высоты и ширины. Для этого предназначены ненаследуемые свойства min-height и min-width, max-height и max-width (см. пример 3.2). Если высота (ширина) элемента будет меньше, чем значение свойства min-height (min-width), то браузер отдаст приоритет значению свойства min-height (min-width). Аналогично, если высота (ширина) элемента будет больше, чем значение свойства max-height (max-width), то браузер отдаст приоритет значению свойства max-height (max-width).

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Размеры элементов</title>
	<style>
		.size_1{
		background-color: yellow;
		width: 250px;
		height: 15vh;
		}
		
		.size_2{
		background-color: violet;
		min-width: 350px;
		max-height: 400px;
		width: 250px;
		height: 150px;
		}
	</style>
</head>
<body>
	<p class="size_1">
		Ширина абзаца равна 250px, высота &ndash; 15%
		<br>от высоты области просмотра окна браузера.
	</p>
	
	<p class="size_2">
		Ширина абзаца будет 350px, т.к. width меньше min-width,
		<br>а высота &ndash; 150px, т.к height меньше max-height.
	</p>
</body>
</html>

Пример 3.2. Установка размеров элементов

В конце пункта отметим, что свойства min-height, min-width, max-height и max-width в качестве значений принимают все доступные в CSS единицы измерения длины, а также проценты. Но, в отличие от свойств определения высоты и ширины, они не принимают значение auto.

Видеоуроки по курсу CSS

Комментарии (2)

Петр Романовский
1. Приветствуются комментарии, которые содержат дополнения к материалу текущей страницы, а также ваши ответы на вопросы других пользователей.
2. Если вам что-то непонятно - спрашивайте, не забывая написать, что именно и с какого места.
Furmanya
Доброго времени суток! В примере 3.2 при уменьшении высоты области просмотра браузера, высота первого абзаца уменьшается, а текст при этом выходит за рамки абзаца и даже накладывается на второй абзац... Как изменить данное поведение (чтобы текст изменялся вместе с размером абзаца)?
№142 от 2018-06-04 08:35:08
Нравится ()
Ответить
Петр Романовский
Furmanya
Furmanya
Доброго времени суток! В примере 3.2 при уменьшении высоты области просмотра браузера, высота первого абзаца уменьшается, а текст при этом выходит за рамки абзаца и даже накладывается на второй абзац... Как изменить данное поведение (чтобы текст изменялся вместе с размером абзаца)?
2018-06-04 08:35:08
Furmanya, в том то и дело, что во втором абзаце таких проблем нет! Это как раз и связано с тем, что у него задано свойство min-height. А вообще для изменения размера текста (и вообще всех элементов) вместе с размером родительского элемента самый оптимальный вариант - это использование JavaScript! Но чтобы с легкостью его применять, все равно нужно знать HTML и CSS.
№144 от 2018-06-04 19:56:23
Нравится ()
Ответить
Показаны все комментарии
Чтобы оставить свой комментарий, авторизуйтесь, пожалуйста!