belarusweb.net
© Петр Романовский Минск, 2016-2017.



belarusweb.net

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

CSS >>>

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

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

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

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

Также имеются возможности для указания минимально и максимально допустимых значений высоты и ширины. Для этого предназначены ненаследуемые свойства 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.

Контрольные вопросы и задания

  1. Что понимается под шириной и высотой элемента (по умолчанию)? Можно ли применять свойства height и width к строчным элементам, строкам и колонкам таблицы?
  2. При помощи каких свойств можно задать минимально (максимально) допустимые размеры ширины и высоты? Как браузер определяет размеры в случае применения этих свойств?

Словарь новых английских слов

width [wɪtθ] – ширина.
hidden [ˈhɪdn] – скрытый, спрятанный.
dotted [ˈdɒtɪd] – линия в виде точек.
dashed [daʃt] – штриховая линия.
solid [ˈsɒlɪd] – цельный, сплошной.
double [ˈdʌb(ə)l] – парный, двойной.
groove [ɡruːv] – желобок, канавка, паз.
ridge [rɪdʒ] – ребро, край, гребень.
inset [ˈɪnsɛt] – вставлять, вкладка.
shadow ['∫ædəʊ] – тень.
outset [ˈaʊtsɛt] – начало, отправление.
thin [θɪn] – тонкий, худой.
thick [θɪk] – толстый, густой.
outline [ˈaʊtlʌɪn] – контур, обвод, очертание.
transparent [tranˈspar(ə)nt] – прозрачный.
margin [ˈmɑːdʒɪn] – поле (страницы).
display [dɪˈspleɪ] – показ, отображение.
padding [ˈpadɪŋ] – внутренние поля (элемент).
Комментарии (0)
Петр Романовский
1. Приветствуются комментарии, которые содержат дополнения к материалу текущей страницы, а также ваши ответы на вопросы других пользователей.
2. Если вам что-то непонятно - спрашивайте, не забывая написать, что именно и с какого места.
Показаны все комментарии
Чтобы оставить свой комментарий, авторизуйтесь, пожалуйста!    
     
belarusweb.net © Петр Романовский, Минск, 2016-2017.
Связаться с автором
Наверх