- •Лекция "Блочная вёрстка"
- •Блочная вёрстка
- •Границы
- •Отступы
- •Ширина блока
- •Алгоритм блочной модели
- •Вложенные слои
- •Высота блока
- •Схлопывающиеся отступы
- •Оба отступа положительны
- •Один из отступов отрицательный
- •Оба отступа отрицательны
- •Вложенные элементы
- •Отмена схлопывания
- •Поток документа
- •Использование position
- •Использование float
- •Блочные элементы
- •Преобразование в блочный элемент
- •Строчные элементы
- •Преобразование в строчный элемент
- •Строчные элементы
- •Преобразование в строчный элемент
- •Строчно-блочные элементы
- •Наложение и порядок слоёв
- •Плавающие элементы
- •Создание врезок
- •Расположение слоев по горизонтали
- •Влияние обтекания
- •Отмена обтекания
- •Ширина элемента
- •Использование overflow
- •Свойство clear
- •Псевдокласс :after
- •Позиционирование элементов
- •Нормальное позиционирование
- •Абсолютное позиционирование
- •Фиксированное положение
- •Относительное позиционирование
- •Вложенные слои
Псевдокласс :after
Частое включение пустого тега <div> со свойством clear захламляет код, особенно при активном использовании свойства float. Логично перенести всё в стили, избавившись от лишних тегов. Для этого воспользуемся псевдоэлементом :after, который в комбинации со свойством contentдобавляет текст после элемента. К такому тексту можно применить стилевые свойства, в частности clear. Остаётся только спрятать выводимый текст от браузера.
.clearleft:after {
content: "."; /* Выводим текст после элемента (точку) */
clear: left; /* Отменяем обтекание*/
visibility: hidden; /* Прячем текст */
display: block; /* Блочный элемент */
height: 0; /* Высота */
}
Какой именно выводить символ значения не имеет, он в любом случае скрывается от пользователя через visibility, но даже будучи скрытым, текст при этом занимает какую-то высоту и влияет на близлежащие элементы. Поэтому выводимый текст ещё необходимо превратить в блочный элемент и задать ему нулевую высоту.
Поскольку текст, генерируемый через псевдоэлемент :after, располагается после элемента, он с лёгкостью заменяет конструкцию <div class="clearleft"></div>. Там, где она требуется достаточно только добавить класс clearleft, как показано в примере 3.30.
Пример 3.30. Псевдоэлемент :after
XHTML 1.0CSS 2.1IE 7IE 8IE 9Cr 12Op 11Sa 5Fx 5
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>:after</title>
<style type="text/css">
DIV { border: 1px solid #000; padding: 10px; }
.fig { float: left; margin: 0 10px 5px 0; }
.clearleft:after {
content: ".";
clear: left;
visibility: hidden; display: block; height: 0;
}
</style>
</head>
<body>
<div class="clearleft">
<img src="images/figure.jpg" class="fig" />Винни-Пух в гостях у Кролика
</div>
</body>
</html>
Браузер IE не поддерживает :after до версии 7.0 включительно, поэтому приведённый пример в этих версиях работать не будет. Добавлениеzoom: 1 к плавающему элементу отменяет обтекание в IE.
Удобство приведённого метода заключается в использовании класса clearleft, который при необходимости добавляется к любому тегу. Также можно ввести дополнительные классы, стиль у которых будет различаться другими значениями clear.
Позиционирование элементов
Начало формы
Конец формы
Позиционированием называется положение элемента в системе координат. Различают четыре типа позиционирования: нормальное, абсолютное, фиксированное и относительное. В зависимости от типа, который устанавливается через свойство position, изменяется и система координат.
Благодаря комбинации свойств position, left, top, right и bottom элемент можно накладывать один на другой, выводить в точке с определёнными координатами, фиксировать в указанном месте, определить положение одного элемента относительно другого и др. Подобно другим свойствам CSS управление позиционированием доступно через скрипты. Таким образом, можно динамически изменять положение элементов без перезагрузки страницы, создавая анимацию и различные эффекты.