HTML-тег <div>
Тег <div> — это контейнер, используемый для определения раздела или секции. Это блочный элемент, который сам по себе не влияет на содержимое, но в основном используется для группировки HTML-элементов, чтобы их можно было стилизовать с помощью CSS или обрабатывать с помощью скриптов.
Позиционирование блоков, определённых тегом <div>
TIP
Мы рекомендуем использовать тег <div> только тогда, когда не подходят другие семантические элементы, введённые в HTML5 (например, <nav>, <main> или <article>).
Поскольку <div> является блочным элементом, перед ним и после него вставляется перенос строки.
Внутрь тега <div> можно поместить любой HTML-элемент, включая другой <div>.
DANGER
Блочные элементы, такие как <div>, нельзя вкладывать внутрь тегов <p>, так как абзац будет разорван в месте, где расположен тег <div>.
Чтобы применить стили внутри абзаца, используйте тег <span>, который применяется с inline-элементами.
Синтаксис
Тег <div> используется в паре. Содержимое записывается между открывающим (<div>) и закрывающим (</div>) тегами.
Пример тега HTML <div>:
Пример тега HTML <div>
<!DOCTYPE html>
<html>
<head>
<title>The <div> Tag</title>
</head>
<body>
<h1> The <div> Tag </h1>
<div style="background-color:#8ebf42">
<p>We use the <div> tag to group two paragraphs for applying a background to the text, and to add color to this
<span style="color:#1c87c9">word</span> we place it within <span> tag.</p>
<p> Pay attention, that the <div> tag is a block-level element, so a line break is placed before and after
it.</p>
</div>
</body>
</html>Когда мы создаём макеты, мы работаем с несколькими блоками, определёнными тегом <div>. Позиционирование этих блоков — основа верстки: размещение элементов в правильных относительных позициях на экранах всех размеров — одна из важнейших задач.
В зависимости от содержимого и целей страницы мы можем использовать разные техники (или их комбинации), чтобы определить место каждого блока. Давайте подробнее изучим эти техники.
Flexbox ¶
В современных веб-сайтах макеты на основе float заменяются Flexbox. Основная идея Flexbox заключается в том, что с его помощью можно управлять выравниванием, направлением, порядком и размером элементов внутри контейнера.
Пример Flexbox с тегом HTML <div>:
Пример тега HTML <div> с Flexbox
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
align-items: center; /* Use another value to see the result */
width: 100%;
height: 200px;
background-color: #1faadb;
}
.flex-container > div {
width: 25%;
height: 60px;
margin: 5px;
border-radius: 3px;
background-color: #8ebf42;
}
</style>
</head>
<body>
<div class="flex-container">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>Свойство CSS Float ¶
Свойство CSS float, или «обтекание», позволяет элементам располагаться рядом друг с другом или отдельно друг от друга, что даёт возможность создавать разные типы макетов, включая многоколоночные страницы, боковые панели, сетки и т. д.
Пример тега HTML <div> со свойством CSS float:
Пример тега HTML <div> со свойством CSS Float
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.content {
overflow: auto;
border: 3px solid #666;
}
.content div {
padding: 10px;
}
.content a {
color: darkblue;
}
.blue {
float: right;
width: 45%;
background-color: #1faadb;
}
.green {
float: left;
width: 35%;
background-color: #8ebf42;
}
</style>
</head>
<body>
<div class="content">
<div class="blue">
<p>This is some paragraph inside div tag.</p>
<a href="#">This is some hyperlink inside div tag.</a>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
</div>
<div class="green">
<p>This is some paragraph inside div tag.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
</ol>
</div>
</div>
</body>
</html>Результат
Отрицательные отступы ¶
К элементам, находящимся в обычном потоке или плавающим, можно применять отрицательные отступы.
Пример отрицательных отступов:
Пример тега HTML <div> с отрицательными отступами
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.content div {
padding: 2%;
}
.content a {
color: darkblue;
}
.main-content {
width: 30%;
margin-left: 32%;
}
.blue {
width: 25%;
margin-top: -10%;
background-color: #1faadb;
}
.green {
width: 20%;
margin: -35% auto auto 70%;
background-color: #8ebf42;
}
</style>
</head>
<body>
<div class="content">
<div class="main-content">
<a href="#">This is some hyperlink inside div tag.</a>
</div>
<div class="blue">
<p>This is some paragraph inside div tag.</p>
<a href="#">This is some hyperlink inside div tag.</a>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
</div>
<div class="green">
<p>This is some paragraph inside div tag.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
</ol>
</div>
</div>
</body>
</html>Относительное+абсолютное позиционирование ¶
Если вы хотите позиционировать div относительно определённого элемента, можно использовать комбинацию position: relative и position: absolute.
Пример относительного+абсолютного позиционирования тега HTML <div>:
Пример тега HTML <div> со свойством CSS position
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.content {
position: relative;
height: 400px;
border: 1px solid #666;
}
.content div {
position: absolute;
width: 35%;
padding: 10px;
}
.blue {
right: 20px;
bottom: 0;
background-color: #1faadb;
}
.green {
top: 10px;
left: 15px;
background-color: #8ebf42;
}
</style>
</head>
<body>
<div class="content">
<div class="blue">
<p>This is some paragraph inside div tag.</p>
</div>
<div class="green">
<p>This is some paragraph inside div tag.</p>
</div>
</div>
</body>
</html>DANGER
position: relative не влияет на позиционирование элементов в нормальном потоке, если не задать смещения.
Атрибуты ¶
| Атрибут | Значение | Описание |
|---|---|---|
| align | left right center justify | Использовался для выравнивания содержимого внутри тега <div>. Этот атрибут не поддерживается в HTML5. Вместо него используется свойство CSS text-align. |
Тег <div> также поддерживает глобальные атрибуты и атрибуты событий.
Как стилизовать тег HTML <div>
{
"tag_name": "div"
}Practice
Какова основная функция тега HTML <div>?