Измерение размеров

3.1 Свойство width

Размеры блоков в CSS играют важную роль в построении макетов веб-страниц. Они определяют, как элементы будут отображаться и взаимодействовать с окружающими их элементами. Сейчас мы рассмотрим свойства width, height, max-width и max-height, которые позволяют задавать размеры блоков.

Свойство width задает ширину элемента. Оно может быть задано в различных единицах измерения, таких как пиксели (px), проценты (%), em, rem и другие.

Значения

• Автоматическое значение: auto — ширина элемента определяется автоматически на основе его содержимого и окружения
• Абсолютные единицы: px, pt, cm, mm, in и другие
• Относительные единицы: %, em, rem, vw, vh и другие

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

    
      .box {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 10px;
      }

      .box-fixed {
        width: 200px;
      }

      .box-percentage {
        width: 50%;
      }
    
  

    
      <div class="box box-fixed">Фиксированная ширина (200px)</div>
      <div class="box box-percentage">Ширина в процентах (50%)</div>
    
  

Объяснение кода:

• .box-fixed: элемент с фиксированной шириной 200 пикселей
• .box-percentage: элемент с шириной 50% от родительского элемента

3.2 Свойство height

Свойство height задает высоту элемента. Оно также может быть задано в различных единицах измерения.

Значения:

• Автоматическое значение: auto — высота элемента определяется автоматически на основе его содержимого и окружения
• Абсолютные единицы: px, pt, cm, mm, in и другие
• Относительные единицы: %, em, rem, vh, vw и другие

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

    
      .container {
        height: 300px;
      }

      .box {
        color: white;
        padding: 10px;
      }

      .box-fixed-height {
        height: 150px;
        background-color: #2ecc71;
      }

      .box-percentage-height {
        height: 50%;
        background-color: #7a5c71;
      }
    
  

    
      <div class="container">
        <div class="box box-fixed-height">Фиксированная высота (150px)</div>
        <div class="box box-percentage-height">Высота в процентах (50%)</div>
      </div>
    
  

Объяснение кода:

• .box-fixed-height: элемент с фиксированной высотой 150 пикселей
• .box-percentage-height: элемент с высотой 50% от родительского элемента

3.3 Свойство max-width

Свойство max-width задает максимальную ширину элемента. Это ограничение, которое предотвращает расширение элемента за пределы заданного значения.

Значения:

• Нет ограничения: none — элемент может расширяться до любой ширины
• Абсолютные единицы: px, pt, cm, mm, in и другие
• Относительные единицы: %, em, rem, vh, vw и другие

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

    
      .box {
        background-color: #e74c3c;
        color: white;
        padding: 10px;
        margin: 10px;
      }

      .box-max-width {
        width: 100%;
        max-width: 300px;
      }
    
  

    
      <div class="box">Ширина 100% (по умолчанию)</div>
      <div class="box box-max-width">Максимальная ширина 300px</div>
    
  

Объяснение кода:

• .box-max-width: элемент с максимальной шириной 300 пикселей. Содержимое не позволит элементу расширяться за пределы 300 пикселей

3.4 Свойство max-height

Свойство max-height задает максимальную высоту элемента. Это ограничение, которое предотвращает увеличение элемента за пределы заданного значения.

Значения:

• Нет ограничения: none — элемент может расширяться до любой ширины
• Абсолютные единицы: px, pt, cm, mm, in и другие
• Относительные единицы: %, em, rem, vh, vw и другие

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

    
      .box {
        background-color: #9b59b6;
        color: white;
        padding: 10px;
        max-height: 35px;
        overflow: auto;
      }
    
  

    
      <div class="box">
        <p>Дополнительный текст для демонстрации прокрутки.<br>Дополнительный текст для демонстрации прокрутки.<br>Дополнительный текст для демонстрации прокрутки.</p>
      </div>
    
  

Объяснение кода:

• max-height: элемент с максимальной высотой 35 пикселей. Если содержимое элемента превышает это значение, оно будет прокручиваться благодаря свойству overflow: auto;

1

Задача

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

Недоступна

Ширина блока

Ширина блока

Открыть

1

Задача

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

Недоступна

Максимальная высота

Максимальная высота

Открыть