<div>: базовый блочный элемент
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since июль 2015 г..
Элемент разделения контента HTML (<div>) является универсальным контейнером для потокового контента. Он не влияет на контент или макет до тех пор, пока не будет стилизован с помощью CSS.
Интерактивный пример
<div class="warning">
<img
src="/shared-assets/images/examples/leopard.jpg"
alt="An intimidating leopard." />
<p>Beware of the leopard</p>
</div>
.warning {
border: 10px ridge #f00;
background-color: #ff0;
padding: 0.5rem;
display: flex;
flex-direction: column;
}
.warning img {
width: 100%;
}
.warning p {
font: small-caps bold 1.2rem sans-serif;
text-align: center;
}
Являясь "чистым" контейнером, элемент <div>, по существу, не представляет ничего. Между тем, он используется для группировки контента, что позволяет легко его стилизовать, используя атрибуты class или id, помечать раздел документа, написанный на разных языках (используя атрибут lang), и так далее.
| Категории контента | Потоковый контент, явный контент. |
|---|---|
| Допустимое содержимое | Потоковый контент или (в WHATWG HTML), если родительским является элемент <dl>: один или несколько элементов <dt>, сопровождаемых одним или более элементами <dd>, в ряде случаев смешанных с элементами <script> и <template>. |
| Пропуск тегов | Ни одного; Оба тега, открывающий и закрывающий, являются обязательными. |
| Допустимые родители | Любой элемент, который разрешает потоковый контент в качестве содержимого.. Или (в WHATWG HTML): элемент <dl>. |
| Допустимые ARIA-роли | Любые |
| DOM-интерфейс | HTMLDivElement |
Атрибуты
К этому элементу применимы глобальные атрибуты.
Примечание:
Атрибут align устарел и вышел из употребления; не используйте его больше. Вместо этого, вам следует использовать свойства CSS или методы, такие как CSS Grid или CSS Flexbox для выравнивания и изменения положения элементов <div> на странице.
Примечание
Примеры
Простой пример
<div>
<p>Любой тип контента. Например, <p>, <table>. Все что угодно!</p>
</div>
Результат будет выглядеть так:
Стилизованный пример
Этот пример создаёт прямоугольник с тенью, применяя стили к <div> с помощью CSS. Заметьте, что использование атрибута class на элементе <div> даёт применение стилей "shadowbox" (в дословном переводе означает "теневая коробка") к элементу.
HTML
<div class="shadowbox">
<p>Вот очень интересная заметка в прекрасном прямоугольнике с тенью.</p>
</div>
CSS
.shadowbox {
width: 15em;
border: 1px solid #333;
box-shadow: 8px 8px 5px #444;
padding: 8px 12px;
background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
}
Результат
Спецификации
| Specification |
|---|
| HTML # the-div-element |
Совместимость с браузерами
Loading…