Карта сайта

Урок 22: Работа с блоками в HTML и CSS

/Уроки по HTML/CSS/Урок 22: Работа с блоками в HTML и CSS
Урок 22: Работа с блоками в HTML и CSS
Автор: написал в рубрике Уроки по HTML/CSS. 0 Комментариев.

На 22-м уроке нашего курса по изучению HTML и CSS для начинающих мы разберем одну из ключевых тем, которая поможет вам лучше понимать, как создавать структуру веб-страниц и управлять их внешним видом. Мы поговорим о блочных и инлайн элементах, а также изучим, как работать с плавающими элементами с помощью свойства float. В конце урока вас ждут практические задачи и примеры кода, чтобы закрепить материал.

Блочные и инлайн элементы

Что такое блочные элементы?

Блочные элементы (block elements) это элементы, которые занимают всю доступную ширину родительского контейнера и начинаются с новой строки. Они создают «блоки» на странице, которые можно легко стилизовать с помощью CSS. Примеры блочных элементов:

  • <div>
  • <p>
  • <h1>—<h6>
  • <ul>, <ol>, <li>
  • <header>, <footer>, <section>, <article>

Особенности блочных элементов:

  1. Занимают всю доступную ширину.
  2. Начинаются с новой строки.
  3. Можно задавать ширину, высоту, отступы и поля.
  4. Могут содержать другие блочные и инлайн элементы.

Пример:

<div style="background-color: lightblue; padding: 10px;">
  Это блочный элемент. Он занимает всю ширину страницы.
</div>

Что такое инлайн элементы?

Инлайн элементы (inline elements) это элементы, которые занимают только столько места, сколько необходимо для их содержимого. Они не начинаются с новой строки и располагаются в одной строке с другими инлайн элементами. Примеры инлайн элементов:

  • <span>
  • <a>
  • <strong>, <em>
  • <img>
  • <input>

Особенности инлайн элементов:

  1. Занимают только необходимое пространство.
  2. Не начинаются с новой строки.
  3. Ширина и высота задаются автоматически, их нельзя изменить (кроме изображений).
  4. Могут содержать только другие инлайн элементы.

Пример:

<p>Это <span style="color: red;">инлайн элемент</span>, который выделен красным цветом.</p>

Разница между блочными и инлайн элементами

Основное отличие заключается в том, как они ведут себя на странице:

  • Блочные элементы создают структуру страницы, разделяя её на блоки.
  • Инлайн элементы используются для оформления текста и других мелких элементов внутри блоков.

Как изменить тип элемента?

Иногда нужно изменить тип элемента, например, сделать блочный элемент инлайн или наоборот. Для этого используется CSS-свойство display.

Пример:

<div style="display: inline; background-color: yellow;">
  Этот блочный элемент теперь ведет себя как инлайн.
</div>

<span style="display: block; background-color: green;">
  Этот инлайн элемент теперь ведет себя как блочный.
</span>

Плавающие элементы (float)

Свойство float это мощный инструмент для управления расположением элементов на странице. Оно позволяет «обтекать» элементы друг другом, что особенно полезно при создании макетов с колонками или изображениями с текстом.

Как работает float?

Свойство float может принимать следующие значения:

  • left — элемент прижимается к левому краю, а остальные элементы обтекают его справа.
  • right — элемент прижимается к правому краю, а остальные элементы обтекают его слева.
  • none — обтекание отключено (по умолчанию).

Пример:

<img src="image.jpg" style="float: left; margin-right: 10px;" alt="Изображение">
<p>Этот текст обтекает изображение слева. Свойство float позволяет легко создавать такие макеты.</p>

Очистка потока (clear)

Когда вы используете float, элементы могут «накладываться» друг на друга, что приводит к нежелательным эффектам. Чтобы этого избежать, используется свойство clear. Оно может принимать следующие значения:

  • left — очищает обтекание слева.
  • right — очищает обтекание справа.
  • both — очищает обтекание с обеих сторон.

Пример:

<div style="float: left; width: 50%; background-color: lightblue;">
  Левая колонка
</div>
<div style="float: right; width: 50%; background-color: lightgreen;">
  Правая колонка
</div>
<div style="clear: both;"></div>
<p>Этот текст будет расположен под колонками, так как мы использовали clear: both.</p>

Проблемы с float

Хотя float это удобный инструмент, у него есть свои недостатки:

  1. Выпадение из потока: Элементы с float выпадают из обычного потока документа, что может привести к «схлопыванию» родительского контейнера.
  2. Сложность управления: При использовании нескольких плавающих элементов может быть сложно управлять их расположением.

Решение: Чтобы избежать проблем, можно использовать «clearfix» — технику, которая заставляет родительский контейнер учитывать плавающие элементы.

Пример clearfix:

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

Применение:

<div class="clearfix">
  <div style="float: left; width: 50%;">Левая колонка</div>
  <div style="float: right; width: 50%;">Правая колонка</div>
</div>

Практические задачи

Задача 1: Создание макета с колонками

Создайте макет страницы с двумя колонками: левая колонка шириной 30%, правая — 70%. Используйте свойство float и clearfix для очистки потока.

Решение:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Макет с колонками</title>
  <style>
    .clearfix::after {
      content: "";
      display: table;
      clear: both;
    }
    .left-column {
      float: left;
      width: 30%;
      background-color: lightblue;
      padding: 10px;
    }
    .right-column {
      float: right;
      width: 70%;
      background-color: lightgreen;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="clearfix">
    <div class="left-column">
      <h2>Левая колонка</h2>
      <p>Это содержимое левой колонки.</p>
    </div>
    <div class="right-column">
      <h2>Правая колонка</h2>
      <p>Это содержимое правой колонки.</p>
    </div>
  </div>
</body>
</html>

Задача 2: Обтекание изображения текстом

Создайте блок с изображением, которое будет обтекаться текстом слева. Используйте свойство float.

Решение:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Обтекание изображения</title>
  <style>
    img {
      float: left;
      margin-right: 10px;
      width: 150px;
      height: auto;
    }
  </style>
</head>
<body>
  <img src="image.jpg" alt="Пример изображения">
  <p>Этот текст обтекает изображение слева. Свойство float позволяет легко создавать такие макеты. Вы можете использовать его для оформления статей, блогов и других типов контента.</p>
</body>
</html>

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

Если вам понравился этот урок, обязательно посмотрите полный курс по «HTML и CSS для начинающих», где вы найдете еще больше полезной информации и практических заданий.