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



belarusweb.net

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

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

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

<!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, которые принимают аналогичные значения.

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

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

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

<!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):

<!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 для ячеек таблицы

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

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

  1. Какое свойство отвечает за отображение содержимого блочных элементов в случае их переполнения? Опишите его.
  2. За счет какого свойства можно регулировать вертикальное выравнивание строчных элементов относительно родительского элемента? Как происходит выравнивание содержимого в случае применения свойства к ячейкам таблицы?

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

display [dɪˈspleɪ] – показывать, демонстрировать.
inline [ɪnˈlaɪn] – строчный.
run [rʌn] – бежать, скользить.
table [ˈteɪb(ə)l] – таблица, стол.
caption [ˈkæpʃn] – заголовок.
cell [sel] – отсек, ячейка.
row [rou] – ряд.
column [ˈkɑːləm] – столбец, колонка.
group [ɡruːp] – группа.
head [hed] – голова, головной.
foot [fʊt] – ступня, основание, нижняя часть.
list [lɪst] – список, каталог.
item [ˈaɪtəm] – пункт, параграф.
none [nʌn] – никакой, ничто.
relative [ˈrelətɪv] – относительный.
static [ˈstætɪk] – неподвижный, статичный.
move [mu:v] – двигать, перемещать.
absolute [ˈæbsəluːt] – абсолютный, безусловный.
fixed [fɪkst] – неподвижный, закрепленный.
bottom [ˈbɑːtəm] – самый нижний, последний.
clip [klɪp] – урезать, обрезать.
float [floʊt] – плавать.
margin [ˈmɑːrdʒən] – поле страницы, запас.
overflow [oʊvərˈfloʊ] – переполнять.
hidden [ˈhidn] – скрытый, спрятанный.
clear [klɪə] – очищать.
both [boʊθ] – оба.
visibility [ˌvɪzəˈbɪləti] – видимость, обзор.
collapse [kəˈlæps] – сплющивание.
opacity [oʊˈpæsəti] – непрозрачность.
align []əˈlaɪn – ставить в ряд.
vertical [ˈvəːtɪk(ə)l] – вертикальный, отвесный.
middle [ˈmɪdl] – средний.
resize [rɪˈsaɪz] – изменять размер.
Комментарии (2)
Петр Романовский
1. Приветствуются комментарии, которые содержат дополнения к материалу текущей страницы, а также ваши ответы на вопросы других пользователей.
2. Если вам что-то непонятно - спрашивайте, не забывая написать, что именно и с какого места.
MikeBY
В Задачнике в задаче 5.2 для основного div'a_1 предлагается установить внутренние отступы 15px, а в ответе padding:10px
№66 от 2017-11-06 13:42:23
Нравится ()
Ответить
Петр Романовский
MikeBY
MikeBY
В Задачнике в задаче 5.2 для основного div'a_1 предлагается установить внутренние отступы 15px, а в ответе padding:10px
2017-11-06 13:42:23
MikeBY, спасибо! Исправил. Правда на скрине, если присмотреться, все равно останется 10px, но это не страшно)
№67 от 2017-11-07 08:57:21
Нравится ()
Ответить
Показаны все комментарии
Чтобы оставить свой комментарий, авторизуйтесь, пожалуйста!    
     
belarusweb.net © Петр Романовский, Минск, 2016-2017.
Связаться с автором
Наверх