13. Блочная модель. Поля, границы и отступы. Размер области содержимого.

Все HTML элементы могут рассматриваться как блоки (в смысле контейнеры, оболочки и т.п.). В CSS, термин "блочная модель" используется, когда говорят о дизайне и компоновке.

Блочная модель CSS - это по существу контейнер (оболочка), который вмещает (оборачивает) HTML элементы, и состоит из: полей, границ, отступов и фактического содержимого.

Блочная модель позволяет нам устанавливать границу вокруг элементов и располагать элементы по отношению к другим элементам.

Объяснение различных частей:

• Поля - Создают пространство вокруг границы. Поля не имеют фоновых цветов, они полностью прозрачны

• Граница - Граница идет вокруг отступов и содержания. Цвет границы определяется цветом фона блока

• Отступы - Создают пространство вокруг содержания. На отступы влияет фоновый цвет блока

• Содержание - Содержание блока, где располагается текст, изображения и т.п.

Для того чтобы установить ширину и высоту элемента корректно во всех браузерах, вам необходимо знать, как работает блочная модель.

Поля

Полем будем называть расстояние от внутреннего края границы или края блока до воображаемого прямоугольника, ограничивающего содержимое блока. Из-за того, что значения полей могут различаться на каждой стороне, применяют выражения «верхнее поле» или «поле сверху», и им подобные для других сторон. Обозначение «поля» следует понимать как одинаковое значение полей для всех сторон. Основное предназначение полей — создать пустое пространство вокруг содержимого блочного элемента, например текста, чтобы он не прилегал плотно к краю элемента. Использование полей повышает читабельность текста и улучшает внешний вид страницы. В примере 3.1 показано использование полей для оформления текста.

Границы

Границы это линии вокруг полей элемента на одной, двух, трёх или всех четырёх его сторонах. У каждой линии есть толщина, стиль и цвет. Для создания рамки применяется универсальное свойство border одновременно задающее все эти параметры, а для создания линий на отдельных сторонах элемента можно воспользоваться свойствами border-left, border-top, border-right и border-bottom, соответственно устанавливающих границу слева, сверху, справа и снизу.

Отступы

Отступом будем называть пустое пространство от внешнего края границы, полей или содержимого блока. Как уже упоминалось, границы с полями не обязательны и могут отсутствовать, так что способ формирования отступов зависит от ситуации. Как и в случае с полями, применяют выражения «верхний отступ» или «отступ сверху», и им подобные для других сторон. Обозначение «отступы» следует понимать как одинаковое значение отступов для всех сторон.

Для отступов характерны следующие особенности.

• Отступы прозрачны, на них не распространяется цвет фона или фоновая картинка, заданная для блока. Однако если фон установлен у родительского элемента, он будет заметен и на отступах.

• Отступы в отличие от полей могут принимать отрицательное значение, это приводит к сдвигу всего блока в указанную сторону. Так, если задано margin-left: -10px, это сдвинет блок на десять пикселов влево.

• Для отступов характерно явление под названием «схлопывание», когда отступы у близлежащих элементов не суммируются, а объединяются меж собой.

• Отступы, заданные в процентах, вычисляются от ширины контента блока. Это касается как вертикальных, так и горизонтальных отступов.

14. Логические разделы. Элементы <div> и <span>. Для чего они используются? Привести примеры. Создание плавающего элемента. Поток.

Люди склонны использовать эти две теги аналогичным образом, но они служат для совершенно разных целей.  <div> <div> тег определяет логические отделы в Вашей веб-странице. Он очень похож на <p> тег, но он делит страницу на большие разделы. <div> дает Вам возможность определить стиль целых разделов HTML. Он также дает Вам возможность назвать определенные разделы Вашей страницы, чтобы Вы могли работать с ними с помощью CSS или динамического HTML. Одно, что надо запомнить при использовании тега <div>, что <div> разделяет параграфы, и хотя Вы можете иметь параграфы в рамках <div>, Вы не можете иметь <div> внутри параграфа.  Первичные атрибуты тега <div>: • style  • class  • id  Даже если Вы не ползуйтесь CSS и DHTML, Вы должны войти в привычку использовать тег <div>. Это даст Вам больше гибкости. Кроме того, Вы можете использовать атрибуты id и name с именем раздела, чтобы Ваша веб-страница была сформирована лучше (всегда используйте атрибуты id и name и дайте им одинаковые содержания).

<span>  Тег <span> имеет очень похожие свойства тега <div>, поскольку он меняет стиль текста, который содержится в нем. Но без каких-либо атрибутов style, тег <span> никаких элементов бы не изменил.  Основное различие между тегами <span> и <div> является то, что <span> самостоятельно не делает форматирование. Тег <span> не имеет обязательные атрибуты, но вот три, которые являются наиболее распространенными: • style • class  • id Используйте <span>, когда хотите изменить стиль элементов, не ставя их в новый блок на странице.

Теги <DIV> и <SPAN>

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Пример использования стилей</title> <style> .text1 {font-size:12px; color:#FF0000; font-family:Arial } .text2 {font-size:12px; color:#0000FF; font-family: Verdana} </style> </head>

<body> <div class="text1"> <p>Абзац1</p> <p>Абзац2</p> </div>

<span class="text2"> <p>Абзац3</p> <p>Абзац4</p> </span> </body> </html>

Надо уточнить, что тег <DIV> позволяет не только группировать элементы, но и управлять горизонтальным выравниванием текста с помощью атрибута align. Параметр может принимать следующие значения:

• center — выравнивание по центру;

<div align = "center">Элемент с выравниванием по центру</div>

• left — выравнивание по левому краю;

<div align = "left">Элемент с выравниванием по левому краю</div>

• right — выравнивание по правому краю.

<div align = "right">Элемент с выравниванием по правому краю</div>

Свойство float мощный и ценный актив для любого веб-дизайнера/разработчика, работающего с CSS и HTML. Но в то же время оно может разочаровать или смутить, если вы не до конца понимаете принципы его работы. Раньше оно было связано с довольно неприятными браузерными багами, поэтому вполне нормально, если вы нервничаете при использовании этого свойства. Так давайте успокоимся и облегчим своё разочарование. Я покажу вам, чего можно достичь, используя свойство float, и как полезно оно может быть.

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