Отображение содержимого элементов
http://belarusweb.net
Основы создания сайтов

Отображение содержимого элементов

css-свойство overflow

При заполнении страницы информацией часто возникает ситуация переполнения блочных элементов содержимым. Это обычно связано с тем, что размеры блочного элемента жестко заданы, а объем содержимого не позволяет вместить его в эти размеры. В таком случае браузер по умолчанию отображает все содержимое блочного элемента, даже не смотря на то, что оно выходит за его пределы и может заходить на соседние элементы. Чтобы иметь возможность избегать таких ситуаций в CSS предусмотрено специальное ненаследуемое свойство overflow (см. пример 5.10), которое управляет отображением содержимого блочных элементов и может принимать следующие значения:

  • visible – в случае переполнения блочного элемента содержимым, оно будет отображаться даже за его пределами (т.е. обрезаться не будет); значение используется браузером по умолчанию;
  • hidden – содержимое, которое не поместиться в размеры блочного элемента, отображаться на странице не будет (т.е. будет обрезано);
  • scroll – в элемент будут добавлены полосы прокрутки; содержимое, которое не поместиться в размеры блочного элемента, отображаться на странице не будет (т.е. будет обрезано), но его можно будет просмотреть при помощи полос прокрутки;
  • auto – полосы прокрутки будут добавляться только в случае переполения блочного элемента его содержимым.
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Cвойство overflow</title>
	<style>
		.class_1{
		padding: 5px;
		border: solid 2px blue;
		width: 250px;
		height: 75px;
		position: absolute;
		}
		.overflow_1{overflow: visible; top: 10px; left: 20px;}
		.overflow_2{overflow: hidden; top: 10px; left: 300px;}
		.overflow_3{overflow: scroll; top: 140px; left: 20px;}
		.overflow_4{overflow-x: scroll; top: 140px; left:300px;}
		.overflow_5{overflow-y: scroll; top: 260px; left: 20px;}
	</style>
</head>
<body>
		<div class="class_1 overflow_1" style="background-color: violet;">
			1.  В зависимости от значений свойства overflow содержимое
			будет либо скрыто, либо появятся полосы прокрутки, либо 
			будет выходить за пределы границ элемента.</div>
		<div class="class_1 overflow_2" style="background-color: yellow;">
			2.  В зависимости от значений свойства overflow содержимое
			будет либо скрыто, либо появятся полосы прокрутки, либо 
			будет выходить за пределы границ элемента.</div>
		<div class="class_1 overflow_3" style="background-color: green;">
			3.  В зависимости от значений свойства overflow содержимое
			будет либо скрыто, либо появятся полосы прокрутки, либо 
			будет выходить за пределы границ элемента.</div>
		<div class="class_1 overflow_4" style="background-color: violet;"> 
			4.  В зависимости от значений свойства overflow содержимое
			будет либо скрыто, либо появятся полосы прокрутки, либо 
			будет выходить за пределы границ элемента.</div>
		<div class="class_1 overflow_5" style="background-color: yellow;"> 
			5.  В зависимости от значений свойства overflow содержимое
			будет либо скрыто, либо появятся полосы прокрутки, либо 
			будет выходить за пределы границ элемента.</div>
</body>
</html>

Пример 5.10. Использование свойства overflow

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

Вертикальное выравнивание,
css-свойство vertical-align

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

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

А вот теперь перечислим значения, которые может принимать свойство vertical-align в случае применения его к строчным элементам (см. пример 5.11):

  • baseline – базовая линия элемента будет выравниваться по базовой линии родительского элемента; значение используется браузером по умолчанию;
  • middle – середина элемента будет выравниваться относительно базовой линий родительского элемента;
  • sub – элемент будет отображаться в виде нижнего индекса, при этом размер его шрифта не изменится;
  • super – элемент будет отображаться в виде верхнего индекса, при этом размер его шрифта не изменится;
  • top – верхний край элемента будет выравниваться по верхнему краю самого высокого элемента в строке;
  • bottom – нижний край элемента будет выравниваться по нижнему краю элемента, расположенного ниже всех в строке;
  • text-top – верхний край элемента будет выравниваться по верхнему краю шрифта родительского элемента;
  • text-bottom – нижний край элемента будет выравниваться по нижнему краю шрифта родительского элемента.
  • размер – базовая линия элемента будет смещена на указанную величину относительно базовой линии шрифта родительского элемента, при этом в случае положительных значений смещение будет происходить вверх, а при отрицательных – вниз; разрешается использовать все доступные в CSS единицы измерения;
  • проценты – базовая линия элемента будет смещена на указанную величину относительно базовой линии шрифта родительского элемента; при этом проценты рассчитываются относительно высоты строки; отметим также, что разрешается использование отрицательных значений, в этом случае смещение будет происходить вниз.
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Cвойство vertical-align</title>
	<style>
		.class_1{
		padding: 5px;
		border: solid 2px blue;
		width: 600px;
		}
		.v_align_1{vertical-align: baseline;}
		.v_align_2{vertical-align: sub;}
		.v_align_3{vertical-align: super;}
		.v_align_4{vertical-align: top;}
		.v_align_5{vertical-align: 4px;}
		.v_align_6{vertical-align: -50%;}
		.v_align_7{vertical-align: bottom;}
	</style>
</head>
<body>
	<div class="class_1">
		<span class="v_align_1">1-я строка: Выравнивание baseline.</span>
		<span class="v_align_2"> Выравнивание sub.</span>
		<span class="v_align_3"> Выравнивание super.</span> <br>
		<span class="v_align_1">2-я строка: Выравнивание baseline.</span>
		<span class="v_align_4"> Выравнивание top.</span>
		<span class="v_align_5"> Выравнивание 4px.</span> <br>
		<span class="v_align_1">3-я строка: Выравнивание baseline.</span>
		<span class="v_align_6"> Выравнивание -50%.</span>
		<span class="v_align_7"> Выравнивание bottom.</span>
	</div>	
</body>
</html>

Пример 5.11. Использование свойства vertical-align для строчных элементов

Для ячеек таблицы значения свойства vertical-align имеют несколько другой смысл (см. пример 5.12):

  • top – содержимое ячейки будет выравниваться относительно верхнего края ячейки;
  • middle – содержимое ячейки будет выравниваться относительно середины ячейки;
  • bottom – содержимое ячейки будет выравниваться относительно нижнего края ячейки;
  • baseline – базовая линия ячейки будет выравниваться относительно базовой линии первой текстовой строки (за базовую линию всей строки принимается базовая линия элемента строки, которая больше всех удалена от верхнего края ячейки), если текстовое содержимое в ячейке отсутствует, то за базовую линию принимается нижний край того элемента ячейки, который больше всех удален от верхнего края ячейки; кстати, все остальные значения свойства будут срабатывать как baseline.
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Cвойство vertical-align</title>
	<style>
		.class_1{
		font-size: 40px;
		}
		.v_align_1{vertical-align: top;}
		.v_align_2{vertical-align: middle;}
		.v_align_3{vertical-align: bottom;}
		.v_align_4{vertical-align: baseline;}
		
	</style>
</head>
<body>
	<table style="border-collapse: collapse;" border="1">
		<tr class="v_align_1">
			<td><span class="class_1">1-я строка</span></td>  <td>top</td>
		</tr>
		<tr class="v_align_2">
			<td><span class="class_1">2-я строка</span></td>  <td>middle</td>
		</tr>
		<tr class="v_align_3">
			<td><span class="class_1">3-я строка</span></td>  <td>bottom</td>
		</tr>
		<tr class="v_align_4">
			<td><span class="class_1">4-я строка</span></td>  <td>baseline</td>
		</tr>
	</table>	
</body>
</html>

Пример 5.12. Использование свойства vertical-align для ячеек таблицы

Оформление внешнего вида курсора мыши,
css-свойство cursor

В конце хотелось бы рассмотреть наследуемое свойство cursor, которое хоть и не относится к содержимому элементов, но позволяет изменить вид курсора при нахождении его над элементом. Перечислим значения этого свойства, которые позволяют устанавливать необходимый вид курсора:

  • url("path") – будет загружено собственное изображение для курсора; разрешается указывать через запятую путевые адреса сразу к нескольким файлам изображений; при этом важно помнить, что поддерживаются не все форматы изображений, а только форматы CUR, PNG, GIF, JPG (анимация в формате GIF работать не будет, также старайтесь ограничивать размеры изображений в пределах 128x128 пикселей, т.к. изображения слишком больших размеров отображаться не будут); кроме того, после адреса или списка адресов нужно обязательно указать через запятую одно из стандартных значений, перечисленных ниже (например, cursor: url("smile.png"), auto;);
  • auto – будет использован стандартный курсор, установленный браузером по умолчанию для данного вида элементов;
  • default – курсор по умолчанию;
  • e-resize – курсор, указывающий, что можно перетащить (растянуть) направо;
  • w-resize – курсор, указывающий, что можно перетащить (растянуть) налево;
  • n-resize – курсор, указывающий, что можно перетащить (растянуть) наверх;
  • s-resize – курсор, указывающий, что можно перетащить (растянуть) вниз;
  • ne-resize – курсор, указывающий, что можно перетащить (растянуть) вверх-направо;
  • nw-resize – курсор, указывающий, что можно перетащить (растянуть) вверх-налево;
  • se-resize – курсор, указывающий, что можно перетащить (растянуть) вниз-направо;
  • sw-resize – курсор, указывающий, что можно перетащить (растянуть) вниз-налево;
  • crosshair – курсор в виде перекрестья;
  • help – курсор, указывающий, что имеется возможность получить помощь;
  • move – курсор, указывающий, что элемент может быть перемещен;
  • pointer – курсор в виде указующего перста;
  • progress – курсор, указывающий, что программа занята процессом обработки информации;
  • text – курсор, указывающий на текст;
  • wait – курсор, указывающий, что программа занята;
  • inherit – значение наследуется от родителя.

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

Петр Романовский
1. Приветствуются комментарии, которые содержат дополнения к материалу текущей страницы, а также ваши ответы на вопросы других пользователей.
2. Если вам что-то непонятно - спрашивайте, не забывая написать, что именно и с какого места.
MikeBY
В Задачнике в задаче 5.2 для основного div'a_1 предлагается установить внутренние отступы 15px, а в ответе padding:10px
№66 от 2017-11-06 10:42:23
Нравится ()
Ответить
Петр Романовский
MikeBY
MikeBY
В Задачнике в задаче 5.2 для основного div'a_1 предлагается установить внутренние отступы 15px, а в ответе padding:10px
2017-11-06 10:42:23
MikeBY, спасибо! Исправил. Правда на скрине, если присмотреться, все равно останется 10px, но это не страшно)
№67 от 2017-11-07 05:57:21
Нравится ()
Ответить
Показаны все комментарии
Чтобы оставить свой комментарий, авторизуйтесь, пожалуйста!