CSS — обширная тема. Рассмотрим свойства display и overflow на практическом примере.
Свойство display
Добавим несколько абзацев после элемента <hr>:
<hr>
<p>Абзац 1</p>
<p>Абзац 2</p>
<p>Абзац 3</p>По умолчанию абзацы — блочные элементы, каждый на новой строке. Заменим абзацы на спаны:
<hr>
<span>Span 1</span>
<span>Span 2</span>
<span>Span 3</span>Спаны — строчные элементы, располагаются в одну строку. Добавим стиль:
span {
display: block;
}display: block; преобразует спаны в блочные элементы. Каждый спан отображается на новой строке. Любой элемент можно сделать блочным с помощью display: block;.
display: none; полностью скрывает элемент, в отличие от visibility: hidden;, которое скрывает элемент, но сохраняет за ним место.
Свойство overflow
Создадим блок с заданной шириной и высотой:
<div class="my-block">
Много текста, который может не поместиться в блок.
</div>.my-block {
width: 20px;
height: 20px;
border: 1px solid black;
}Текст переполняет блок. Для управления переполнением используется свойство overflow:
- overflow: visible; (по умолчанию): Текст вылезает за пределы блока.
- overflow: hidden;: Текст за пределами блока скрывается.
- overflow: scroll;: Появляются полосы прокрутки (вертикальная и горизонтальная), независимо от необходимости.
- overflow: auto;: Полосы прокрутки появляются только при необходимости.
display управляет способом отображения элементов (блочный, строчный и т.д.), а overflow — отображением контента, выходящего за границы элемента.
Рассмотрены свойства CSS display и overflow, позволяющие контролировать отображение и поведение блочных элементов на веб-странице. Знание этих свойств необходимо для создания гибких и адаптивных веб-дизайнов.