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

Но как использовать высоту и ширину, чтобы ваши элементы выглядели не только правильно, но и эстетично? Давайте вместе рассмотрим тонкости управления размерами с красочными примерами и практическими заданиями!

Основы Высоты и Ширины

Начнем с базов. Высота и ширина – это свойства, которые определяют размеры элемента. Пример кода:

CSS

 .box {
      width: 200px;
      height: 100px;
      background-color: #3498db; /* Добавлено для наглядности */
      color: #fff; /* Добавлено для наглядности */
    }

HTML

  <div class="box">Ваш контент здесь</div>

Этот код устанавливает ширину 200 пикселей и высоту 100 пикселей для элемента с классом "box".

Единицы измерения

Помимо пикселей, можно использовать различные единицы измерения, такие как проценты или вьюпортные единицы:

CSS

.box {
      width: 60%;
      height: 30vh;
      background-color: #e74c3c; /* Добавлено для наглядности */
      color: #fff; /* Добавлено для наглядности */
    }

HTML

  <div class="box">Ваш контент здесь</div>

Этот код устанавливает ширину в 50% от ширины родительского элемента и высоту в 50% от высоты вьюпорта.

Максимальная и Минимальная Ширина/Высота

Используем свойства для ограничения размеров элемента:

CSS

.box {
      width: 300px;
      max-width: 500px;
      min-height: 100px;
      background-color: #2ecc71; /* Добавлено для наглядности */
      color: #fff; /* Добавлено для наглядности */
    }

HTML

  <div class="box">Ваш контент здесь</div>

Этот код устанавливает ширину в 300 пикселей, но не больше 500 пикселей, и минимальную высоту в 100 пикселей.

Box Sizing и Разница между Content-Box и Border-Box

Изучим различия между box-sizing: content-box и box-sizing: border-box:

CSS

.content-box {
      box-sizing: content-box;
      width: 200px;
      height: 100px;
      padding: 20px;
      border: 5px solid #f39c12; /* Добавлено для наглядности */
    }

    .border-box {
      box-sizing: border-box;
      width: 200px;
      height: 100px;
      padding: 20px;
      border: 5px solid #f39c12; /* Добавлено для наглядности */
    }

HTML

<div class="content-box">Content-Box</div>
  <div class="border-box">Border-Box</div>

Этот код демонстрирует влияние box-sizing на размеры элемента в зависимости от используемой модели.

Заключение

Высота и ширина – это не просто числа в коде, это способ контролировать пространство и форму вашего веб-дизайна. Используйте эти свойства творчески, экспериментируй