Что означает тег div

Тег DIV

Браузер	Internet Explorer				Netтscape		Опера				Safari			Mozilla Firefox
Версия	5.5	6.0	7.0	8.0	8.0	9.0	7.0	8.0	9.2	9.5	1.3	2.0	3.1	1.5	2.0	3.0
Поддерживается	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да

Описание

Как и при использовании других блочных элементов, содержимое тега

Синтаксис

Параметры

Закрывающий тег

Пример 1. Использование тега

ШТМЛ 4.01 IE 5.5 IE 6 IE 7 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

Результат данного примера показан ни рис. 1.

Рис. 1. Вид блоков, оформленных с помощью стилей

Описание параметров тега DIV

Параметр ALIGN

Описание

Выравнивание содержимого контейнера

Синтаксис

Аргументы

Значение по умолчанию

Аналог CSS (ЦСС)

Пример 2. Выравнивание контента

ШТМЛ 4.01 IE 5.5 IE 6 IE 7 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

Результат данного примера показан ни рис. 2.

Рис. 2. Выравнивание элементов с помощью параметра align

Параметр TITLE

Описание

Добавляет поясняющий контент к контейнеру

Синтаксис

Аргументы

Любая контентовая строка. Строка должна заключаться в двойные или одинарные кавычки.

Значение по умолчанию

Пример 3. Подсказка к контенту

ШТМЛ 4.01 IE 5.5 IE 6 IE 7 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

Источник

Разница между

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

Для начала давайте разберём, как отображать один элемент под другим по вертикали. Мы в основном должны сказать браузеру: «Эй, мы хотим контейнер, который может стыковаться вертикально». К счастью, это тег контейнера известен как

Чтобы увидеть как работают элементы

Согласно приведённым выше условиям, HTML будет выглядеть следующим образом.

Посмотрим на это в браузере.

Похоже на один большой прямоугольник. Как насчёт отделить теги

Я добавил свойство margin-bottom (выделено выше), чтобы отделить каждый

Отлично! Браузер отображает эти «блоки» один под другим, в отличие от нашего предыдущего примера с формой, где элементы выводились в одну строку.

В чём различие? Когда дело доходит до отображения тегов, браузер распознаёт три группы элементов:

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

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

Позвольте мне поделиться с вами некоторыми примерами элементов, которые можно классифицировать в соответствии с одной из этих трёх групп.

Браузер отобразит в одну линию:

Однако можно изменить это поведение, добавив одну строку в CSS:

Для этого примера мы используем

Вообще, хорошей идеей будет не злоупотреблять тегом

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

Это выглядит чуть сложнее, но единственное что мы сделали, так это добавили теги

Ещё раз, давайте сравним новый (справа) и старый код (слева).

А теперь посмотрим, как новый код отображается в браузере!

Источник