Введение в блочную модель

1.1 Основы блочной модели

Блочная модель является основой для понимания того, как элементы размещаются и взаимодействуют друг с другом на веб-странице. Она определяет структуру и размеры HTML-элементов, а также то, как они окружаются отступами, границами и внешними отступами.

Основы блочной модели

Блочная модель CSS описывает состав блоков HTML-элементов. Каждый элемент состоит из четырех основных компонентов:

• Содержимое (content).
• Отступы (padding).
• Границы (border).
• Внешние отступы (margin).

Эти компоненты определяют, как элемент будет отображаться и как он будет взаимодействовать с другими элементами на странице.

Содержимое (Content)

Содержимое (content) — это основная часть элемента, в которой находится текст, изображения или другие вложенные элементы. Размеры содержимого могут быть заданы явно с помощью свойств width и height, либо определяться содержимым элемента.

Пример использования

В этом примере содержимое элемента .content включает в себя текст "Это содержимое элемента.":

    
      .content {
        background-color: #e0e0e0;
        padding: 20px;
        border: 2px solid #000;
        margin: 20px;
      }
    
  

    
      <div class="content">
        Это содержимое элемента.
      </div>
    
  

1.2 Визуализация блочной модели

Каждый элемент в блочной модели можно представить в виде прямоугольного блока, состоящего из следующих частей:

• Контент (Content): внутренний контент элемента, например, текст или изображение
• Внутренний отступ (Padding): пространство между контентом и границей элемента
• Граница (Border): линия, окружающая внутренний отступ и контент
• Внешний отступ (Margin): пространство между границей элемента и соседними элементами

Визуализация блочной модели:

    
      .element {
        width: 200px;           /* Ширина контента */
        padding: 10px;          /* Внутренний отступ */
        border: 2px solid red;  /* Граница */
        margin: 20px;           /* Внешний отступ */
      }
    
  

1.3 Границы (Border)

Границы (border) окружают содержимое и внутренние отступы элемента. У границ могут быть различные стили, толщина и цвет. Границы могут использоваться для визуального выделения элементов на странице.

Пример использования

В этом примере к элементу .border применена граница толщиной 5 пикселей, пунктирная и черного цвета, которая окружает содержимое и внутренние отступы.

    
      .border {
        background-color: #e0e0e0;
        padding: 20px;
        border: 5px dashed #000;
        margin: 20px;
      }
    
  

    
      <div class="border">
        Это элемент с границей.
      </div>
    
  

1

Задача

Модуль 1: Web Core, 9 уровень, 0 лекция

Недоступна

Граница элемента

Граница элемента

Открыть

1

Задача

Модуль 1: Web Core, 9 уровень, 0 лекция

Недоступна

Блочная модель

Блочная модель

Открыть