Тег <div> - пустой контейнер, который определяет разделение или раздел. Он не влияет на контент или макет и используется для группировки HTML-элементов, которые должны быть написаны с помощью CSS или с помощью скриптов.
Тег <div> является блочным элементом, поэтому разрыв строки помещается до и после него.
Вы можете поместить любой элемент HTML в тег <div>, включая другой тег <div>.
Для применения стилей внутри параграфа используется тег <span>.
Синтакс
Тег <div> - парный, состоит из двух частей, открывающего (<div>) и закрывающего (</div>) тегов.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Использование тега <div></title>
</head>
<body>
<h1> Тег <div> </h1>
<div style="background-color:#8ebf42">
<p> Мы использовали тег <div>, чтобы сгруппировать два параграфа и добавить фон к тексту, а для того, чтобы изменить цвет <span style="color:#1c87c9"> этого слова</span> мы использовали тег <span>.</p>
<p> Обратите внимание, что тег <div> является блочным элементом, до и после него добавляется разрыв строки.</p>
</div>
</body>
</html>Результат
Расположение блоков <div>
При верстке HTML страниц с помощью слоев тег <div> является ее базовым фундаментом, так как именно этот тег определяет многочисленные структурные блоки веб-страницы.
Для корректного отображения блоков на странице необходимо их правильно расположить. Различают несколько способов расположения блоков в зависимости от целей и контента страницы. Давайте рассмотрим несколько из них.
Флексбокс¶
Спецификация CSS Flexible Box успешно пришла на замену верстке float-ами. Flexbox позволяет контролировать размер, порядок и выравнивание элементов по нескольким осям, распределение свободного места между элементами и многое другое.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
.flex-container {
display: flex;
align-items: center; /* Подставьте другое значение и посмотрите результат */
width: 90%;
height: 300px;
background-color: #1c87c9;
}
.flex-container > div {
width: 25%;
padding: 5px 0;
margin: 5px;
background-color: lightgrey;
text-align: center;
font-size: 35px;
}
</style>
</head>
<body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>Результат
CSS свойство float ¶
CSS свойство float определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон. С помощью свойства float можно размещать элементы по горизонтали рядом друг с другом, что позволяет верстать типовые фрагменты веб-страниц, вроде врезок, горизонтальных меню, каталога товаров, колонок и др.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок страницы</title>
<style>
.content {
overflow: auto;
border: 3px solid #666666;
}
.content div {
padding: 10px;
}
.content a {
color: darkblue;
}
.blue {
float: right;
width: 45%;
background: #1c87c9;
}
.green {
float: left;
width: 35%;
background: #8ebf42;
}
</style>
</head>
<body>
<div class="content">
<div class="blue">
<p>Параграф в блоке div.</p>
<a href="#">Гиперссылка в теге div.</a>
<ul>
<li>Элемент списка 1</li>
<li>Элемент списка 2</li>
</ul>
</div>
<div class="green">
<p>Параграф в блоке div.</p>
<ol>
<li>Элемент списка 1</li>
<li>Элемент списка 1</li>
</ol>
</div>
</div>
</body>
</html>Результат
Отрицательные отступы ¶
Использование отрицательных отступов (negative margins) открывает широкие возможности и позволяет сделать верстку более универсальной.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок окна веб-страницы</title>
<style>
.content div {
padding: 2%;
}
.content a {
color: darkblue;
}
.main-content {
width: 30%;
margin-left: 32%;
}
.blue {
width: 25%;
margin-top: -10%;
background: #1c87c9;
}
.green {
width: 20%;
margin: -35% auto auto 70%;
background: #8ebf42;
}
</style>
</head>
<body>
<div class="content">
<div class="main-content">
<a href="#">Гиперссылка в теге div.</a>
</div>
<div class="blue">
<p>Параграф в теге div.</p>
<a href="#">Гиперссылка в теге div.</a>
<ul>
<li>Элемент списка 1</li>
<li>Элемент списка 2</li>
</ul>
</div>
<div class="green">
<p>Параграф в теге div.</p>
<ol>
<li>Элемент списка 1</li>
<li>Элемент списка 2</li>
</ol>
</div>
</div>
</body>
</html>Результат
Позиционирование Relative + absolute positioning¶
Комбинация разных типов позиционирования для вложенных элементов - один из удобных и практичных приемов верстки. Если для родительского элемента задать position: relative, а для дочернего position: absolute, то произойдёт смена системы координат и положение дочернего элемента при этом указывается относительно его родителя.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
.content { position: relative; height: 400px; border: 1px solid #666666;}
.content div { position: absolute; width: 35%; padding: 10px; }
.blue { right: 20px; bottom: 0; background: #1c87c9; }
.green { top: 10px; left: 15px; background: #8ebf42; }
</style>
</head>
<body>
<div class="content">
<div class="blue">
<p>Параграф в теге div.</p>
</div>
<div class="green">
<p>Параграф в теге div.</p>
</div>
</div>
</body>
</html>Результат
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| align | left right center justify |
Используется для выравнивания содержимого тега <div>. Не поддерживается в HTML5. Вместо атрибута align вы можете использовать CSS свойство text-align. |
Тег <div> поддерживает глобальные атрибуты и атрибуты событий.
Как добавить стиль к тегу <div> ?
Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега <div>:
- CSS свойство font-style задает стиль шрифта: normal | italic | oblique | initial | inherit
- CSS свойство font-family создает приоритетный список названий семейства шрифтов и/или общее имя шрифтов для выбранных элементов.
- CSS свойство font-size задает размер щрифта.
- CSS свойство font-weight устанавливает насыщенность шрифта.
- CSS свойство text-transform задает регистр текста (заглавные или строчные буквы).
- CSS свойство text-decoration устанавливает оформление текста. Оно является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.
Цвет текста внутри тега <div>:
- CSS свойство color определяет цвет контента и оформления текста.
- CSS свойство background-color устанавливает фоновый цвет элемента.
Стили форматирования текста для тега <div>:
- CSS свойство text-indent указывает размер отступа первой строки в текстовом блоке.
- CSS свойство text-overflow указывает, как будет отображаться пользователю строчный текст, выходящий за границы блока.
- CSS свойство white-space указывает, как будут отображены пробелы внутри элемента.
- CSS свойство word-break указывает перенос строки.
Другие свойства для тега <div>:
- CSS свойство text-shadow добавляет тень к тексту.
- CSS свойство text-align-last выравнивает последнюю строку текста.
- CSS свойство line-height устанавливает межстрочный интервал.
- CSS свойство letter-spacing устанавливает расстояние между буквами/символами в тексте.
- CSS свойство word-spacing устанавливает расстояние между словами в тексте.
Поддержка браузера
|
|
|
|
|
|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ |
Практикуйте свои знания
