belarusweb.net - веб-программирование для новичков: HTML,CSS, JavaScript, PHP, MySQL и др.

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

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

- block – элемент будет отображаться как блочный, в результате браузер начнет добавлять разрывы строк до и после элемента, при этом сам элемент будет занимать всю доступную в данной ситуации шириную, а высота элемента будет формироваться его содержимым;
- inline – элемент будет отображаться как строчный, в результате браузер будет считать его частью строки, а ширина элемента будет формироваться его содержимым;
- run-in – элемент будет вести себя как блочный или строчный в зависимости от контекста;
- inline-block – элемент будет вести себя в общем потоке как строчный с тем отличием, что к нему можно будет применять свойства блочных элементов, например, можно будет задавать отступы и размеры;
- inline-table – элемент будет вести себя в общем потоке как строчный с тем отличием, что к нему можно будет применять свойства элемента 'table', т.е. значение предназначено для изменения формата обтекания таблицы соседними элементами;
- table – элемент будет отображаться как таблица;
- table-caption – элемент будет отображаться как заголовок таблицы;
- table-cell – элемент будет отображаться как ячейка таблицы;
- table-row – элемент будет отображаться как строка таблицы;
- table-column – элемент будет отображаться как колонка таблицы, как будто он является элементом 'col';
- table-column-group – элемент будет отображаться как группа колонок таблицы, как будто он является элементом 'colgroup';
- table-header-group – элемент будет отображаться как заголовочная часть таблицы, как будто он является элементом 'thead';
- table-row-group – элемент будет отображаться как группа строк таблицы, как будто он является элементом 'tbody';
- table-footer-group – элемент будет отображаться как нижняя часть таблицы, как будто он является элементом 'tfoot';
- list-item – элемент будет отображаться как блочный, а перед его содержимым будет добавлен маркер списка;
- none – элемент удаляется из общего потока, а все элементы ведут себя так, как-будто он отсутствует не только на странице, но и в исходном коде.

Использование некоторых значений свойства 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:

- static – элемент будет отображаться в том месте, в котором он обычно располагается, находясь в общем потоке документа; применение к элементу свойств left, right, top и bottom не даст никакого эффекта;
- absolute – элемент будет удален из общего потока документа, а другие элементы займут его место, как будто абсолютно позиционированный элемент вообще отсутствует; применение к элементу свойств left, right, top и bottom приведет к его смещению относительно соответствующей стороны позиционированного родителя (значение свойства у него не должно быть static) или, в случае отсутствия такового, относительно соответствующей стороны первого позиционированного элемента-предка; если же для данного элемента не найдется и позиционированного элемента-предка, то смещение будет происходить относительно соответствующей стороны окна браузера;
- fixed – элемент будет удален из общего потока документа, а другие элементы займут его место, как будто фиксированно позиционированный элемент вообще отсутствует; применение к элементу свойств left, right, top и bottom приведет к его смещению относительно соответствующей стороны окна браузера, соответственно, при прокрутке содержимого страницы в окне браузера фиксированный элемент будет оставаться на одном и том же месте;
- relative – элемент останется в общем потоке документа, а применение к элементу свойств left, right, top и bottom приведет к его смещению относительно текущего положения соответствующей стороны элемента, при этом его место не будет занято другими элементами из потока, т.к. для них относительно позиционированный элемент как будто остается на прежнем месте (в потоке документа).

    <!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 принимает:

- rect(y1,x1,y2,x2) – задает параметры прямоугольной области, в которой содержимое элемента будет видно на странице; через запятую указываются расстояния от края элемента до верхнего, правого, нижнего и левого края оставляемой области (см. рис. 5.5); при этом расстояния y1 и y2 отсчитываются от верхнего края элемента, соответственно, до верхего и нижнего края оставляемой (видимой) области, а расстояния x1 и x2 отсчитываются от левого края элемента, соответственно, до правого и левого края оставляемой (видимой) области, так что при указании значений следует быть внимательным и следить за тем, чтобы во избежание полной обрезки элемента выполнялись условия y1<y2 и x1>x2; если с какой-то стороны обрезать элемент не требуется, то разрешается использовать ключевое слово auto; отдля указания размеров разрешается использовать все доступные в CSS единицы измерения;
- auto – элемент обрезаться не будет; соответствует rect(auto,auto,auto,auto).

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

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

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

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

- left – элемент будет выравниваться по левому краю, а все остальные элементы обтекать его по правой стороне;
- right – элемент будет выравниваться по левому краю, а все остальные элементы обтекать его по правой стороне;
- none – элемент будет отображаться обычным образом, т.е. перестанет быть плавающим.

    <!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), которое может принимать значения, определяющие обтекание каких плавающих элементов осуществлять не нужно:

- left – данный блочный элемент не будет обтекать плавающие элементы, которые находятся выше в html-коде и для которых применяется свойство float, имеющее значение left;
- right – данный блочный элемент не будет обтекать плавающие элементы, которые находятся выше в html-коде и для которых применяется свойство float, имеющее значение right;
- both – данный блочный элемент не будет обтекать плавающие элементы, которые находятся выше в html-коде и для которых применяется свойство float, имеющее значение left или right;
- none – элемент будет обтекать плавающие элементы как обычно, т.е. согласно значениям свойства float.

    <!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, которое может принимать следующие значения:

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

    <!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), которое управляет отображением содержимого блочных элементов и может принимать следующие значения:

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

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

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

- url("path") – будет загружено собственное изображение для курсора, разрешается указывать через запятую путевые адреса сразу к нескольким файлам изображений;
- 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 – значение наследуется от родителя.

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

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.