§5. Отображение элементов в документе

5.1. Определение вида элемента. Еще в курсе изучения языка гипертекстовой разметки HTML мы упоминали о строчных и блочных элементах, а также о свойстве display, которое отвечает за то, как элемент будет отображаться браузером. В частности, узнали, что строчным элементам соответсвует значение inline, а блочным – block. Теперь же, настало время перечислить все значения, принимаемые ненаследуемым свойством display:

Использование некоторых значений свойства display показано в примере 5.1.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Свойство display</title>
	<style>
		.class_1{
		color: green;
		border: solid 2px blue;
		width: 250px;
		}
	</style>
</head>
<body>
	<span class="class_1">
		По умолчанию элемент 'span' является строчным элементом.
	</span>
	<p class="class_1">
		По умолчанию абзац является блочным элементом.
	</p><br>
	
	<p class="class_1" style="display: inline">
		Теперь абзац стал строчным элементом и его ширина 
		определяется содержимым.
	</p><br><br>
	<span class="class_1" style="display: block">
		Теперь элемент 'span' стал блочным элементом.
	</span><br>
	
	<p style="display: inline">Первый строчный 'p'.</p>
	<p class="class_1" style="display: inline-block">inline-block 'p'</p>
	<p style="display: inline">Второй строчный 'p'.</p>
</body>
</html>

Пример 5.1. Использование значений свойства display

Кстати, не забываем про универсальное значение inherit, которое указывает, что для элемента наследуется значение аналогичного свойства родительского элемента.

5.2. Позиционирование элементов. Все браузеры в ходе разбора html-кода и формирования веб-страницы располагают элементы по установленному стандарту, согласно которому блочные элементы располагаются вертикально друг под другом, т.к. по умолчанию они стремятся занять всю доступную в данной ситуации ширину, а строчные элементы наоборот, располагаются горизонтально друг за другом до тех пор, пока не будет занята вся доступная в данной ситуации ширина, после чего браузер делает перенос строки и продолжает располагать строчные элементы друг за другом на новой строке. Однако такой способ расположения элементов на странице далеко не всегда удобен, поэтому в CSS присутствует специальное ненаследуемое свойство position, которое позволяет определять порядок расположения элементов относительно окна браузера, других элементов на веб-странице или относительно текущего местоположения элемента. Данное свойство используется в комбинации со свойствами left, right, top и bottom, которые определяют относительное смещение позиционированного элемента (см. пример 5.2). В качестве значений эти свойства принимают любые доступные в CSS единицы измерения, включая отрицательные значения. Разрешается использовать проценты, которые у свойств left и right рассчитываются относительно ширины родительского элемента, а у top и bottom относительно высоты родительского элемента. Если указать в качестве значения свойств ключевое слово auto, положение позиционированного элемента не изменится.

Теперь перечислим значения свойства position:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Позиционирование элементов</title>
	<style>
		.class_1{
		color: green;
		border: solid 2px blue;
		width: 450px;
		height: 150px;
		}
		.pos_1{position: absolute; top: 20px; left: 20px;}
		.pos_2{position: fixed; top: 240px; left: 20px;}
	</style>
</head>
<body>
	<p class="class_1 pos_1">
		Позиционирован абсолютно относительно окна браузера, т.к. 
		позиционированные не статически родитель или предок отсутствуют.
		При чем координаты левого верхнего угла элемента равны  20px 
		по горизонтали и 20px по вертикали относительно левого верхнего 
		угла браузера.
	</p>
	
	<p class="class_1 pos_2">
		Позиционирован фиксированно. При чем координаты левого верхнего угла 
		элемента равны 20px по горизонтали и 240px по вертикали относительно 
		левого верхнего угла браузера. Если бы на странице присутствовала 
		прокрутка, то данный абзац всегда оставался бы на месте, в то время 
		как верхний абзац стал бы перемещаться вместе со страницей.
	</p>
</body>
</html>

Пример 5.2. Использование различных вариантов позиционирования элементов

Наберите код примера в редакторе и попробуйте посмотреть, как изменится положение абзацев, если убрать позиционирование. Затем еще раз перечитайте материал, по ходу чтения пробуя применять к ним указанные варианты позиционирования.

Введение позиционирования значительно облегчило жизнь веб-разработчикам, позволив размещать элементы практически в любом месте веб-документа по своему усмотрению. Однако при использовании позиционирования зачастую происходит наложение элементов друг на друга, что привело к идее введения дополнительного ненаследуемого свойства z-index для регулирования положения позиционированных элементов не только в горизонтальной плоскости вдоль осей х и у, но и по вертикали вдоль оси z, имитируя тем самым третье измерение, перпендикулярное экрану (см. пример 5.3).

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>z-index</title>
	<style>
		.class_1{
		padding: 0px;
		border: solid 5px red;
		width: 400px;
		height: 200px;
		}
		.pos_1{position: absolute; top: 20px; left: 20px;}
		.pos_2{position: absolute; top: 60px; left: 60px;}
	</style>
</head>
<body>
	<p class="class_1 pos_1" style="z-index: 2; background-color: yellow">
		Позиционирован абсолютно. z-index равен 2.
	</p>
	
	<p class="class_1 pos_2" style="z-index: 3; background-color: violet">
		Позиционирован абсолютно. z-index равен 3, поэтому данный абзац 
		находится выше, т.е. ближе к нам по оси z.
	</p>
</body>
</html>

Пример 5.3. Использование свойства z-index

В качестве значений свойство принимает целые числа (включая отрицательные). Чем больше значение z-индекса элемента, тем выше он находится по сравнению с элементами, у которых он меньше. Если же элементы имеют одинаковый z-индекс, то на переднем плане будет отображаться элемент, который в html-коде встречается ниже. В качестве значения разрешается также использовать ключевое слово auto, которое присваивает элементу z-индекс родителя.

Для абсолютно и фиксированно позиционированных элементов имеется еще одно ненаследуемое свойство clip, определяющее прямоугольную область элемента, в которой содержимое будет видимым. Вся остальная часть обрезается и на странице не показывается (см. пример 5.4).

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Свойство clip</title>
	<style>
		.class_1{
		padding: 5px;
		border: solid 8px red;
		width: 400px;
		height: 150px;
		left: 20px;
		overflow: scroll;
		clip: rect(6px, 385px, 135px, 6px);
		}
		.pos_1{top: 20px; position: absolute;}
		.pos_2{top: 190px;  position: fixed;}
	</style>
</head>
<body>
	<p class="class_1 pos_1" style="background-color: yellow;">
		Позиционирован, как absolute. Отсекаем полосы прокрутки 
		и делаем тоньше границы. 
	</p>
	
	<p class="class_1 pos_2" style="background-color: violet;">
		Позиционирован, как fixed. Отсекаем полосы прокрутки 
		и делаем тоньше границы.
	</p>
</body>
</html>

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

В качестве значений свойство clip принимает:

Рис. 5.5. Схема отсчета некоторых значений свойства clip

5.3. Плавающие элементы и связанные с ними свойства. Как мы уже говорили, браузер по умолчанию размещает блочные элементы вертикально друг под другом. При этом даже, если задать их ширину, место по горизонтали все равно уже останется свободным и не будет занято другими элементами, все они по-прежнему будут размещаться либо выше, либо ниже данного блочного элемента по вертикали. Поэтому, чтобы иметь возможность изменять такое поведение браузера, в CSS применяется ненаследуемое свойство float, которое делает элемент плавающим, смещая его к левому или правому краю родительского элемента (см. пример 5.6).

Сразу же отметим, что свойство float не применяется к элементам с абсолютным и фиксированным позиционированием.

В качестве значений свойство float может принимать:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Свойство float</title>
	<style>
		.class_1{
		padding: 10px;
		margin: 10px;
		border: solid 8px red;
		width: 100px;
		height:50px;
		}
		.pos_1{float: left;}
		.pos_2{float: right;}
	</style>
</head>
<body>
	<div style="border: solid 6px blue; width: 400px; padding: 10px;">
		<div class="class_1 pos_1" style="background-color: yellow;">
			Первый div (float: left). 
		</div>
		
		<p> Текст обтекает первый div со всех сторон, кроме левой, т.к. у 
		него свойство float имеет значение left.</p> 
		
		<div class="class_1 pos_2" style="background-color: violet;">
			Второй div (float: right).
		</div>
		
		<p> Второй div обтекается со всех сторон, кроме правой, т.к. у 
		него свойство float имеет значение right.</p>
	</div>
</body>
</html>

Пример 5.6. Использование плавающих элементов (пример №1)

Поведение плавающих элементов отличается от поведения стандартных элементов. Когда браузер в ходе интерпретации кода html доходит до плавающего элемента, он вставляет его в документ в соответствии с текущим потоком, а затем, в зависимости от значения свойства float, смещает его к правому или левому краю родительского элемента. При этом все блочные элементы занимают его место и ведут себя так, как будто плавающий элемент вообще отсутствует в документе. Строчные элементы и элементы с похожим поведением (например, изображения) наоборот, видят плавающий элемент и обтекают его, считаясь при этом с установленными внешними отступами, которые были заданы свойствами группы margin.

В одном ряду разрешается расмещать несколько плавающих элементов. Если же ширины родительского элемента не хватит на все плавающие элементы, то некоторые из них будут смещены вниз. Следует отметить, что по умолчанию плавающие элементы не влияют на высоту родительского элемента, поэтому могут выходить за его пределы. Для устранения такой проблемы нужно либо заранее задать соответствующие размеры родительского элемента, либо воспользоваться свойством overflow (о нем чуть ниже), использовав значение auto или hidden, что заставит браузер автоматически рассчитать размеры родительского элемента с учетом плавающих элементов (см. пример 5.7).

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Свойство float</title>
	<style>
		.class_1{
		padding: 10px;
		margin: 10px;
		border: solid 8px red;
		width: 250px;
		height: 100px;
		}
		.pos_1{float: left;}
		.pos_2{float: right;}
	</style>
</head>
<body>
	<div style="border: solid 6px blue; width: 460px; padding: 10px;">
		<div class="class_1 pos_1" style="background-color: yellow;">
			Первый div (float: left). 
		</div>
		
		<p> Текст обтекает первый div со всех сторон, кроме левой, т.к. у 
		него свойство float имеет значение left.</p> 

		<div class="class_1 pos_2" style="background-color: violet;">
			Второй div (float: right). Он выходит за пределы родительского 
			элемента, т.к. тот его не видит. Для устранения такой проблемы 
			нужно задать родительскому элементу соответствующую высоту. 
		</div>
		
		<p> Второй div обтекается со всех сторон, кроме правой, т.к. у 
		него свойство float имеет значение right.</p>
	</div><br><br><br>
	
	<div class="class_1 pos_1" style="background-color: violet;">
			Третий div (float: left).
	</div>
	
	<p style="background-color: yellow; width: 450px; padding: 10px;"> 
	Обратите внимание, что сам элемент 'p' игнорирует плавающий 
	элемент, а вот строковое содержимое видит и обтекает его!!!</p> 
</body>
</html>

Пример 5.7. Использование плавающих элементов (пример №2)

В CSS имеется возможность для блочных элементов сделать так, чтобы они не обтекали плавающие элементы, которые идут в html-коде выше. Для этого используется ненаследуемое свойство clear (см. пример 5.8), которое может принимать значения, определяющие обтекание каких плавающих элементов осуществлять не нужно:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Свойство clear</title>
	<style>
		.class_1{
		margin: 10px;
		border: solid 8px red;
		width: 100px;
		height: 60px;
		}
		.pos_1{float: left; }
		.pos_3{float: left; }
		.pos_4{float: right; clear: left}
	</style>
</head>
<body>
	<div style="border: solid 6px blue; width: 400px; overflow: auto; ">
		<div class="class_1 pos_1" style="background-color: yellow;">
			1. float: left. </div>
		
		<div style="background-color: violet; clear: left;">
			2. Не плавающий, clear: left.</div>
		
		<div class="class_1 pos_3" style="background-color: yellow;">
			3. float: left.</div>
		
		<div class="class_1 pos_4" style="background-color: violet;"> 
			4. float: right, clear: left.</div>
	</div>
</body>
</html>

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

5.4. Видимость элементов. Если возникает необходимость скрыть элемент, можно поступить несколькими способами (см. пример 5.9). Во-первых, можно использовать значение none свойства display, тогда элемент временно будет удален из документа, а его место займут другие элементы (на рисунке визуально хорошо видно, что из пяти блоков, место выделено только под четыре, т.к. ко второму блоку применено данное значение и он вообще не отображается на странице). Во-вторых, видимость элемента можно определять через наследуемое свойство visibility, которое может принимать следующие значения:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Управление видимостью элементов</title>
	<style>
		.class_1{
		padding: 5px;
		margin: 10px;
		border: solid 5px blue;
		width: 100px;
		height: 60px;
		}
		.vis_1{visibility: hidden;}
		.vis_2{display: none;}
		.vis_3{opacity: 0;}
		.vis_4{opacity: 0.4;}
		.vis_5{opacity: 1;}
	</style>
</head>
<body>
		<div class="class_1 vis_1" style="background-color: yellow;">
			1.  </div>
		<div class="class_1 vis_2" style="background-color: violet;">
			2. </div>
		<div class="class_1 vis_3" style="background-color: green;">
			3. </div>
		<div class="class_1 vis_4" style="background-color: yellow;"> 
			4. </div>
		<div class="class_1 vis_5" style="background-color: yellow;"> 
			5. </div>
</body>
</html>

Пример 5.9. Управление видимостью элементов

В-третьих, видимость элемента можно определять через ненаследуемое свойство opacity, которое в качестве значения принимает числа от 0.0, когда элемент становится полностью прозрачным, до 1, когда элемент становится полностью непрозрачным.

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. Подробно опишите свойство display.
  2. Какое свойство используется для осуществления позиционирования элементов? Опишите виды позиционирования, а также их особенности.
  3. Какие свойства используются в комбинации с position для смещения элементов в горизонтальной плоскости?
  4. Для чего нужен z-index? Опишите значения соответствующего свойства.
  5. Для каких элементов разрешается применять свойство clip? Опишите его значения.
  6. Как называются элементы, к которым применяется свойство float? Подробно опишите его.
  7. Как отменить обтекание блочным элементом плавающего элемента?
  8. Для чего используются свойства visibility и opacity?
  9. Какое свойство отвечает за отображение содержимого блочных элементов в случае их переполнения? Опишите его.
  10. За счет какого свойства можно регулировать вертикальное выравнивание строчных элементов относительно родительского элемента? Как происходит выравнивание содержимого в случае применения свойства к ячейкам таблицы?


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

display [dɪˈspleɪ] – показывать, демонстрировать.
inline [ɪnˈlaɪn] – строчный.
run [rʌn] – бежать, скользить.
table [ˈteɪb(ə)l] – таблица, стол.
caption [ˈkæpʃn] – заголовок.
cell [sel] – отсек, ячейка.
row [roʊ] – ряд.
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ɜːrtɪkl] – вертикальный, отвесный.
middle [ˈmɪdl] – средний.
resize [rɪˈsaɪz] – изменять размер.

 

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