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

css-свойство overflow

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

visible – в случае переполнения блочного элемента содержимым, оно будет отображаться даже за его пределами (т.е. обрезаться не будет); значение используется браузером по умолчанию;
hidden – содержимое, которое не поместиться в размеры блочного элемента, отображаться на странице не будет (т.е. будет обрезано);
scroll – в элемент будут добавлены полосы прокрутки; содержимое, которое не поместиться в размеры блочного элемента, отображаться на странице не будет (т.е. будет обрезано), но его можно будет просмотреть при помощи полос прокрутки;
auto – полосы прокрутки будут добавляться только в случае переполения блочного элемента его содержимым.

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Cвойство overflow</title>


	<style>
	
		div{
		width: 300px;
		height: 80px;
		margin: 4em;
		padding: 5px;
		white-space: nowrap;
		}
		
		.overflow_1{
		overflow: visible; 
		}
		
		.overflow_2{
		overflow: hidden; 
		}
		
		.overflow_3{
		overflow: scroll; 
		}
		
		.overflow_4{
		overflow: auto; 
		}
	
	</style>
	
</head>
<body>

		<div class="overflow_1" style="background-color: violet;">
			overflow: visible overflow: visible overflow: visible<br>
			overflow: visible overflow: visible overflow: visible<br>
			overflow: visible overflow: visible overflow: visible<br>			 
			overflow: visible overflow: visible overflow: visible<br>		 
			overflow: visible overflow: visible overflow: visible<br>			 
			overflow: visible overflow: visible overflow: visible			 
		</div>
			
			
		<div class="overflow_2" style="background-color: yellow;">
			overflow: hidden overflow: hidden overflow: hidden<br>
			overflow: hidden overflow: hidden overflow: hidden<br>
			overflow: hidden overflow: hidden overflow: hidden<br>			 
			overflow: hidden overflow: hidden overflow: hidden<br>		 
			overflow: hidden overflow: hidden overflow: hidden<br>			 
			overflow: hidden overflow: hidden overflow: hidden
		</div>
			
		<div class="overflow_3" style="background-color: green;">
			overflow: scroll overflow: scroll overflow: scroll<br>
			overflow: scroll overflow: scroll overflow: scroll<br>
			overflow: scroll overflow: scroll overflow: scroll<br>			 
			overflow: scroll overflow: scroll overflow: scroll<br>		 
			overflow: scroll overflow: scroll overflow: scroll<br>			 
			overflow: scroll overflow: scroll overflow: scroll
		</div>
			
		<div class="overflow_4" style="background-color: violet;"> 
			overflow: auto overflow: auto overflow: auto<br>
			overflow: auto overflow: auto overflow: auto<br>
			overflow: auto overflow: auto overflow: auto<br>			 
			overflow: auto overflow: auto overflow: auto<br>		 
			overflow: auto overflow: auto overflow: auto<br>			 
			overflow: auto overflow: auto overflow: auto
		</div>
		
</body>
</html>

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

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

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

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

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

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

baseline – базовая линия элемента будет выравниваться по базовой линии родительского элемента; значение используется браузером по умолчанию;
middle – середина элемента будет выравниваться относительно базовой линий родительского элемента;
sub – элемент будет отображаться в виде нижнего индекса, при этом размер его шрифта не изменится;
super – элемент будет отображаться в виде верхнего индекса, при этом размер его шрифта не изменится;
top – верхний край элемента будет выравниваться по верхнему краю самого высокого элемента в строке;
bottom – нижний край элемента будет выравниваться по нижнему краю элемента, расположенного ниже всех в строке;
text-top – верхний край элемента будет выравниваться по верхнему краю шрифта родительского элемента;
text-bottom – нижний край элемента будет выравниваться по нижнему краю шрифта родительского элемента.
размер – базовая линия элемента будет смещена на указанную величину относительно базовой линии шрифта родительского элемента, при этом в случае положительных значений смещение будет происходить вверх, а при отрицательных – вниз; разрешается использовать все доступные в CSS единицы измерения;
проценты – базовая линия элемента будет смещена на указанную величину относительно базовой линии шрифта родительского элемента; при этом проценты рассчитываются относительно высоты строки; отметим также, что разрешается использование отрицательных значений, в этом случае смещение будет происходить вниз.

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Cвойство vertical-align</title>

	<style>
	
		div{
		width: 600px;
		padding: 5px;
		border: solid 2px blue;
		}
		
		.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>
		<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>

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

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

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

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Cвойство vertical-align</title>
	
	<style>
	
		table{
		border-collapse: collapse;
		}
		
		table, td{
		border: 1px solid;
		}

		.big_size{
		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>
		
		<tr class="v_align_1">
			<td><span class="big_size">1-я строка</span></td>  <td>top</td>
		</tr>
		
		<tr class="v_align_2">
			<td><span class="big_size">2-я строка</span></td>  <td>middle</td>
		</tr>
		
		<tr class="v_align_3">
			<td><span class="big_size">3-я строка</span></td>  <td>bottom</td>
		</tr>
		
		<tr class="v_align_4">
			<td><span class="big_size">4-я строка</span></td>  <td>baseline</td>
		</tr>
		
	</table>
	
</body>
</html>

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

Изменение размеров элемента, css-свойство resize

По умолчанию пользователь не может изменять размеры текстовых полей и блочных элементов на странице. Однако для повышения удобства, например, при вводе текста пользователем бывает полезным снятие такого ограничения. Для этих целей предусмотрено ненаследуемое css-свойство resize (см. пример №4), которое указывает, как пользователь может изменять размеры элемента:

none – размеры элемента не доступны для изменения;
both – размеры элемента доступны для изменения как по горизонтали, так и по вертикали;
horizontal – размеры элемента доступны для изменения только по горизонтали;
vertical – размеры элемента доступны для изменения только по вертикали.

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Cвойство resize</title>

	<style>

		p{
		width: 300px;
		height: 100px;
		margin: 2em;
		padding: 1em;
		border: solid 1px #FF0000;
		background-color: yellow;
		overflow: hidden;
		}
		
		.p_1{
		resize: none;
		}
		
		.p_2{
		resize: both;
		}
		
		.p_3{
		resize: horizontal;
		}		
		
		.p_4{
		resize: vertical;
		}
		
	</style>
	
</head>
<body>
	 
	<p class="p_1">
		resize: none - размер элемента не изменяется.	
	</p> 
 
	<p  class="p_2">
		resize: both - размер изменяется как по 
		горизонтали, так и по вертикали. 
	</p>
 
	<p  class="p_3">
		resize: horizontal - размер изменяется только 
		по горизонтали.	
	</p>
 
	<p  class="p_4">
		resize: vertical - размер изменяется только 
		по вертикали.	
	</p>
	
</body>
</html>

Пример №4. Использование свойства resize

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

css-свойство overflow

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

Изменение размеров элемента, css-свойство resize

Быстрый переход к другим страницам