CSS display block: что это?

CSS свойство display используется для определения типа отображения элемента на веб-странице. Значение block является одним из вариантов для данного свойства.

Когда свойство display установлено в значение block, элемент рассматривается как блочный элемент. Блочные элементы занимают всю доступную горизонтальную ширину и начинают новую строку после себя. Они по умолчанию имеют ширину 100% от родительского контейнера. Примером блочного элемента является div.

Преимущества использования блочных элементов заключаются в возможности определения размеров (ширины и высоты) и позиционирования элемента точно по своему усмотрению. Элементы с display: block могут содержать другие блочные или строчные элементы внутри себя.

Вот простой пример использования свойства display: block, где у нас есть div элемент с классом box:

.box {
  display:block;
  width: 200px;
  height: 200px;
  background-color: #ff0000;
}

В этом примере мы создаем блочный элемент с шириной и высотой 200 пикселей, а также красным фоном. Когда этот элемент добавляется на веб-страницу, он займет всю доступную горизонтальную ширину и будет начинать новую строку после себя.

Применение display: block также позволяет нам легко создавать столбцы или секции веб-страницы, задавая ширину и высоту элементов. Мы можем использовать блочные элементы для создания меню, боковой панели, заголовков и других структурных элементов на сайте.

<div class="header">Это шапка сайта</div>
<div class="sidebar">Это боковая панель</div>
<div class="content">Это основное содержимое</div>
<div class="footer">Это подвал сайта</div>

.header, .sidebar, .content, .footer {
  display: block;
  width: 100%;
  height: 100px;
  background-color: #ccc;
  margin-bottom: 10px;
}

В этом примере мы создаем разные секции сайта с помощью блочных элементов div. Каждый блок имеет ширину 100% и высоту 100 пикселей, а также серый фон. Между блоками мы добавляем небольшой отступ, чтобы они были отделены друг от друга.

В заключение, использование display: block позволяет нам создавать блоки, которые начинают новую строку после себя, занимают всю доступную ширину и могут содержать другие элементы. Это особенно полезно при создании макетов и структуры веб-страницы.