logo
Web / Методичка по WEB

3. Вариант

Сделать блок содержимого с относительным позиционированием (position:relative). В этом случаи он никуда не денется из потока, но в то же время станет содержащим блоком, и "об авторе" расположится в его правом верхнем углу.

Обтеканием блока текста другим текстом управляют два атрибута CSS: float и clear. Атрибут float определяет блок как "плавающий" и может принимать значения:

Как и позиционирование, плавающие блоки используется для того, чтобы двигать боксы. Но в отличие от позиционирования, которым можно двигать боксы практически произвольно, все, что может float – это сдвинуть элемент к одной из сторон потока, правой или левой. При этом сам бокс и следующие за ним в потоке приобретают интересное поведение:

1. Плавающий бокс смещается по горизонтали и прилипает к одной из сторон родителя;

2. Плавающий бокс перестает раздаваться на всю ширину родительского бокса-контейнера (как это происходит с блоками в потоке). С его не прижатой к родителю свободной стороны появляется свободное место;

3. Следующие за ним блочные боксы подтягиваются вверх и занимают его место, как если бы плавающего бокса в потоке не было;

4. Строчные же боксы внутри подвинувшихся наверх блоков начинают обтекать плавающий бокс со свободной стороны.

Сама коробка блока, следующего за плавающим блоком, подлезает под него и занимают всю ширину потока, а вот текст внутри этого блока смещается в сторону и обтекает плавающий.

Сдвинутые в одну сторону плавающие блоки будут пытаться уместиться сбоку от предыдущего, с его свободной стороны. И только если ему там не будет достаточно места, тогда сместится ниже и будет пытаться уместиться уже там.

Пример. Задать два плавающих блока прижатых к разным границам охватывающего элемента.

<html>

<head>

<style type="text/css">

.col1 {

border-style:solid;

border-width: 5px;

width: 250px;

color: red;

float:left

}

.col2 {

border-style:solid;

border-width: 5px;

width: 250px;

color: blue;

float: right

}

</style>

</head>

<body>

<p><div class=col1> <p>текстовый блок1</p> </div>

Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст <div class=col2> <p>текстовый блок 2</p> </div> Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст</p>

</body>

</html>

Второй атрибут описания стилей clear устанавливает, с какой стороны элемента запрещено его обтекание другими элементами. Если задано обтекание элемента с помощью свойства float, то clear отменяет его действие для указанных сторон. Допустимые значения:

Пример. Запрет обтекания вокруг элемента другими элементами

.block {clear: both; }

Случается, что содержимое элемента выходит за его границы. Например, графическое изображение или текст могут не поместиться полностью в содержащем его контейнере (<div>, <span> и др). Свойство overflow управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров. Может принимать следующие значения:

Пример. Управление отображением содержания блочного элемента

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>overflow</title>

<style>

.layer {

overflow: scroll; /* Добавляем полосы прокрутки */

width: 300px; /* Ширина блока */

height: 150px; /* Высота блока */

padding: 5px; /* Поля вокруг текста */

border: solid 1px black; /* Параметры рамки */

}

</style>

</head>

<body>

<div class="layer">

<h2>Duis te feugifacilisi</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem

nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

</div>

</body>

</html>

Элементы, по умолчанию видимые в окне браузера, можно сделать невидимыми с помощью параметров visibility и display. Обычно они используются в сценариях для динамического управления видимостью элементов. Иногда в документе требуется использовать элемент, но не показывать его. Например, можно загрузить в браузер таблицу с данными, которые будут как-то использоваться сценарием, но пользователь не должен их видеть. Параметр visibility принимает следующие значения:

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

<p style="visibility:visible;">Видимый текст</p>

<p style="visibility:hidden;">Невидимый текст</p>

<p style="visibility:visible;">Видимый текст</p>

<p style="visibility:hidden">Видимый текст

<b style="visibility:inherit">Видимый текст</p>

<p style="visibility:hidden">НЕвидимый текст

<b style="visibility:visible ">Видимый текст</p>

Параметр display – многоцелевое свойство, которое определяет, как элемент должен быть показан в документе. Параметр display:none делает элемент не только невидимым, но и не занимающим место.

6.HTML5