phpjshtmlcssblog

Блочный тег div, свойства, пример

Что такое тег div? что означает тег div,для чего используют, примеры применения тега div.

О теге div

1. Что такое тег div, зачем нужен?
2. Для чего нужен тег div

Скопировать ссылку



Что такое тег div, зачем нужен?

Начнем с того : "Что такое тег div" с определения :

тег div - является блочным элементом. Это двойной тег.


Синтаксис тега div:

<div>Содержание тега div</div>

Закрывающий тег обязателен!

Что такое блочный элемент div?

Приведу простой пример, который должен показать разницу между блочным и строчным элементом, напишем в одну строчку вот такой текст с двумя элементами div и span.

И в каждый элемент добавим border -> " style="color:red;border:1px solid #a7a7a7;"", бордюр применил для того, чтобы вы смогли увидеть границы блоков:


Маша <div style="color:red;border:1px solid #a7a7a7;">мыла</div>раму, рама <span style="color:red;border:1px solid #a7a7a7;">мыла</span> машу.

Результат:

Маша
мыла
раму, рама мыла машу.


Какой вывод можно сделать по поведению div?

Что он ведет себя как блочный элемент. Т.е. занимает все пространство 100% в строке, в которой он расположен.

Если справа и слева от "div" в строке находится текст, то автоматически произойдет перенос строки.

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

Как и у всех других блоков/элементов у div есть значение display по умолчанию.
Открываем исследовать элемент в браузере, наводим мышку на блок div и видим справа не редактируемые свойства, которые принадлежат нашему div-у :
Эту картинку, скриншот, можно увеличить в отдельном окне нажмите по нему!



Скопировать ссылку



Для чего нужен тег div

Следующий вопрос, который очень часто встречается : "Для чего нужен тег div".


С чем в жизни можно сравнить div?

Если есть какие-то ассоциации с элементами в жизни, то становится сразу понятно, для чего нужен этот элемент в html...

Какой элемент в жизни можно сравнить с div в html.


Div - это фундаментные блоки вашего дома.

Div - это строительный кирпич для вашего дома.

Div - это плиты перекрытия...

Div - это строительный материал для сайта.

Div - это входная и другие двери в вашей квартире...

Мебель, техника, телефон, любой предмет... который имеет физическую оболочку...

Через стили css можно задавать любые свойства вашему блоку!

О блоке divна нашем сайте

Всё, что вы видите вокруг, на этой страницу, всё(100%) построено на div.


Раньше я использовал таблицы table для создания сайта.

У таблиц есть свои плюсы и свои минусы.

Поскольку пользовался и тем и другим - то первое место, конечно же, за div!

Сообщение системы комментирования :

01.09.2021

Форма пока доступна только админу... скоро все заработает...надеюсь...