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

Введение

Добро пожаловать в лабораторию CSS Box Model! В веб-дизайне каждый HTML-элемент можно рассматривать как коробку. CSS Box Model — это фундаментальная концепция, описывающая, как эти коробки отображаются на веб-странице. Она состоит из четырех основных частей: области содержимого (content area), полей (padding), границы (border) и внешних отступов (margin).

В этой лаборатории вы научитесь манипулировать каждой из этих частей для управления размером и отступами элементов. Мы будем работать с файлом index.html и файлом style.css. Все ваши изменения будут вноситься в файл style.css, и вы сможете мгновенно увидеть результаты, переключившись на вкладку Web 8080 в интерфейсе LabEx.

Приступим!

Установите свойство width для элемента div

На этом шаге мы начнем с определения размера области содержимого нашего элемента. Свойство width в CSS устанавливает ширину области содержимого элемента. Другие компоненты блочной модели (padding, border, margin) будут добавлены вокруг этой области содержимого.

Сначала найдите файл style.css в файловом проводнике слева от WebIDE. Щелкните по нему, чтобы открыть в редакторе.

Теперь добавьте следующее CSS-правило в файл style.css. Это правило нацелено на элемент div с классом box и устанавливает его ширину в 300 пикселей.

.box {
  width: 300px;
}

После добавления кода сохраните файл (Ctrl+S или Cmd+S). Чтобы увидеть эффект, нажмите на вкладку Web 8080. Вы заметите, что текст внутри блока теперь переносится, чтобы поместиться в контейнер шириной 300 пикселей.

Примените свойство padding с одинаковыми значениями

На этом шаге мы добавим некоторое пространство между содержимым и краем элемента. Это пространство называется padding (внутренний отступ). Свойство padding очищает область вокруг содержимого. Оно находится внутри границы элемента.

Давайте добавим 20 пикселей внутреннего отступа со всех четырех сторон нашей коробки. Измените существующее правило .box в вашем файле style.css, чтобы включить свойство padding.

.box {
  width: 300px;
  padding: 20px;
  background-color: lightblue; /* Добавлено для лучшей визуализации */
}

Мы также добавили background-color (цвет фона), чтобы сделать области содержимого и внутренних отступов более заметными. Сохраните файл и переключитесь на вкладку Web 8080. Вы увидите, что теперь вокруг текстового содержимого внутри блока появилось светло-голубое пространство шириной 20 пикселей. Обратите внимание, что общая видимая ширина блока увеличилась, поскольку внутренний отступ добавляется поверх ширины содержимого.

Используйте свойство border со стилем, шириной и цветом

На этом шаге мы добавим border (границу) вокруг внутренних отступов и содержимого нашего элемента. Свойство border является сокращенным и позволяет одновременно установить ширину, стиль и цвет границы.

Давайте добавим сплошную черную границу толщиной 2 пикселя. Обновите правило .box в вашем файле style.css, как показано ниже:

.box {
  width: 300px;
  padding: 20px;
  background-color: lightblue;
  border: 2px solid black;
}

Значения для свойства border — это border-width (ширина границы), border-style (стиль границы) и border-color (цвет границы) соответственно.

Сохраните файл и обновите вкладку Web 8080. Теперь вы увидите черную линию, нарисованную вокруг области внутренних отступов блока. Общая ширина элемента снова увеличилась, чтобы вместить эту новую границу.

Реализуйте свойство margin для отступов

На этом шаге мы будем управлять пространством за пределами границы элемента. Это делается с помощью свойства margin (внешний отступ). Внешний отступ создает пустое пространство вокруг элемента, отодвигая другие элементы от него.

Давайте добавим внешний отступ в 50 пикселей со всех сторон нашей коробки, чтобы создать некоторое расстояние от заголовка <h1> и краев страницы. Добавьте свойство margin к правилу .box в style.css.

.box {
  width: 300px;
  padding: 20px;
  background-color: lightblue;
  border: 2px solid black;
  margin: 50px;
}

Сохраните файл и проверьте вкладку Web 8080. Вы увидите, что вся коробка теперь отодвинута вниз от элемента <h1> и от левого края окна браузера. Это демонстрирует, как внешний отступ используется для управления пространством между элементами.

Добавьте box-sizing: border-box для включения padding

На этом шаге мы решим распространенную проблему компоновки. По умолчанию свойства width (ширина) и height (высота) элемента применяются только к блоку содержимого (content box). Внутренние отступы (padding) и граница (border) добавляются поверх этого, что может сделать расчет размеров непредсказуемым. Для нашей коробки общая ширина в настоящее время составляет 300px (ширина) + 40px (внутренние отступы слева/справа) + 4px (граница слева/справа) = 344px.

Чтобы упростить это, мы можем использовать свойство box-sizing. Установив его значение в border-box, мы говорим браузеру включать внутренние отступы и границу в общую ширину и высоту элемента.

Добавьте свойство box-sizing: border-box; к вашему правилу .box.

.box {
  width: 300px;
  padding: 20px;
  background-color: lightblue;
  border: 2px solid black;
  margin: 50px;
  box-sizing: border-box;
}

Сохраните файл и посмотрите на вкладку Web 8080. Вы увидите, что коробка уменьшилась. Теперь общая ширина коробки, включая внутренние отступы и границу, составляет ровно 300 пикселей. Браузер автоматически корректирует область содержимого, чтобы она соответствовала. Такое поведение гораздо более интуитивно для создания макетов.

Резюме

Поздравляем с завершением лабораторной работы! Вы успешно освоили основы CSS Box Model (блочной модели CSS).

В этой лабораторной работе вы практиковались в:

• Установке width (ширины) области содержимого элемента.
• Применении padding (внутренних отступов) для создания пространства между содержимым и границей.
• Добавлении border (границы) вокруг внутренних отступов и содержимого.
• Использовании margin (внешних отступов) для создания пространства за пределами границы элемента.
• Применении box-sizing: border-box для более предсказуемого и интуитивно понятного определения размеров элементов.

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