Лекция 5
Блоки
1. Блочные элементы
2. Использование отступов
3. Расчет ширины и высоты блока
4. Отмена обтекания
5. Позиционирование блоков
6. Свойства FLOAT
Блочные элементы
К блочным элементам относятся теги:
<div>,<dl>,<h1>...<h6>,<hr>,<ol>,<p>,<table>,<ul>..
Блок представляет собой как бы отдельную структурную единицу. Блочные элементы в общем потоке располагаются последовательно один под другим. По умолчанию два блочных элемента не могут располагаться на одной строке.
Один или несколько блоков также могут располагаться внутри другого (родительского) блочного элемента.
В CSS блоки создаются на основе элементов HTML и имеют следующую структуру.
Блочный элемент имеет границу и содержимое: это может быть текстовая информация, фотографии, логотип фирмы и т.п., называемое контентом (англ. content — содержание).
Границы это линии вокруг полей элемента на одной, двух, трёх или всех четырёх его сторонах.
Границе блока при помощи свойства border можно придать необходимое оформление: задать толщину, цвет и стиль линий. По умолчанию граница невидима.
Для создания рамки применяется универсальное свойство border одновременно задающее все эти параметры, а для создания линий на отдельных сторонах элемента можно воспользоваться свойствами border-left, border-top, border-right и border-bottom, соответственно устанавливаю-щих границу слева, сверху, справа и снизу. В примере 1 показано добавление линии слева от элемента.
Пример 1. Красная пунктирная линия.<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Линия</title>
<style type="text/css">
P.line {
border-left: 1px dotted red;
padding: 10px;
}
</style>
</head>
<body>
<p class="line">Лев ревет только в том случае, когда сообщает, что
|
|
территория принадлежит ему или провозглашает себя царем природы.</p>
</body>
</html>
Результат данного примера показан на рис. 1.
Рис. 1. Линия возле текста
Полем (свойство padding) будем называть расстояние от внутреннего края границы или края блока до воображаемого прямоугольника, ограничивающего содержимое блока.
Если явно не установить поля у блока, то граница будет вплотную примыкать к содержимому блока, либо отстоять от него на каком-то минимальном расстоянии. С другой стороны, поля могут иметь совершенно конкретные размеры, которые указывает разработчик.
Использование отступов
Вокруг блока - за его границей существуют пустые, ничем не занятые области, называемые отступами (свойство margin). Отступы - это расстояния от границы блока, до ближайших элементов, или, если их нет, то до краев окна браузера. Отступы также, как и поля, по умолчанию отсутствуют, либо имеют минимальную ширину, автоматически определяемую браузером.
Для отступов характерны следующие особенности.
Отступы прозрачны, на них не распространяется цвет фона или фоновая картинка, заданная для блока. Однако если фон установлен у родительского элемента, он будет заметен и на отступах.
Отступы в отличие от полей могут принимать отрицательное значение, это приводит к сдвигу всего блока в указанную сторону. Так, если задано margin-left: -10px, это сдвинет блок на десять пикселов влево.
Для отступов характерно явление под названием «схлопывание», когда отступы у близлежащих элементов не суммируются, а объединяются меж собой.
|
|
Отступы, заданные в процентах, вычисляются от ширины контента блока. Это касается как вертикальных, так и горизонтальных отступов.
В примере 2 показано схлопывание отступов и их прозрачность.
Пример 2. Использование отступов
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Отступы</title>
<style type="text/css">
.layer1,.layer2 {
background: #F2EFE6;
border: 1px solid #B25538;
padding: 10px;
margin: 20px;
}
</style>
</head>
<body>
<div class="layer1">Лев ревет только в том случае, когда сообщает, что
территория принадлежит ему или провозглашает себя царем природы.</div>
<div class="layer2">Охотничий участок льва может иметь длину и ширину
до тридцати километров.</div>
</body>
</html>
Результат данного примера показан на рис. 2. Обратите внимание, что расстояние между блоками равно 20 пикселов, а не 40, которые получаются суммированием верхнего и нижнего отступа у блоков. Это происходит за счёт эффекта «схлопывания», при котором близлежащие отступы объединяются.
Если один из отступов отрицательный- происходит складывание отступов по правилам математики:
x + (-y) = x – y здесь x и y величина прилегающих отступов элементов
Если оба отступа отрицательны- из двух значений выбирается наибольшее по модулю, оно же и выступает в качестве отрицательного отступа между элементами.
Схлопывание не срабатывает:
1) для элементов, у которых установлено свойство padding.
2) для элементов, у которых на стороне схлопывания задана граница;
3) на элементах с абсолютным позиционированием, т.е. таких, у которых position у становлено как absolute;
|
|
4) на плавающих элементах (для них свойство float задано как left или right);
5) для строчных элементов;
Также схлопывание не срабатывает при соблюдении некоторых условий:
ü для элементов, у которых значение overflow задано как auto, hidden или scroll схлопывание не действует для их дочерних элементов;
ü у элементов, к которым применяется свойство clear, не схлопывается верхний отступ с нижним отступом родительского элемента.
Рис. 2. Отступы в элементе
На рисунке хорошо видно, что цвет, задаваемый через свойство background, не выходит за пределы границы элемента и не оказывает влияние на отступы.