⚙️ Что такое свойство aspect-ratio в CSS и зачем оно используется?

aspect-ratio — это CSS-свойство, которое позволяет задавать соотношение сторон элемента (ширина к высоте). Оно особенно полезно для адаптивной верстки, когда нужно сохранить форму элемента независимо от содержимого или экрана.

➡️ Пример:

<div class="box"></div>

<style>
  .box {
    width: 100%;
    aspect-ratio: 16 / 9; /* Соотношение 16:9 */
    background-color: lightblue;
  }
</style>

🗣 В этом примере:

• aspect-ratio: 16 / 9; заставляет элемент сохранять форму прямоугольника с шириной в 16 единиц и высотой в 9.
• Это особенно удобно для видео, изображений, контейнеров с неизвестной высотой.
• Работает без необходимости использовать padding-hack или JavaScript.

Свойство aspect-ratio делает вёрстку проще и адаптивнее без дополнительных обёрток и расчётов.

CodeBase | Frontend | #CSS

⚙️ Что такое свойство object-position в CSS и зачем оно используется?

object-position — это CSS-свойство, которое управляет положением содержимого внутри элемента, например, изображения или видео, особенно когда используется object-fit для обрезки.

➡️ Пример:

<img src="image.jpg" class="preview" alt="Пример изображения">

<style>
  .preview {
    width: 300px;
    height: 200px;
    object-fit: cover;
    object-position: top right; /* Смещаем фокус к верхнему правому углу */
  }
</style>

🗣 В этом примере:

• object-fit: cover; обрезает изображение, чтобы оно заполнило контейнер.
• object-position: top right; указывает, какую часть изображения показывать в приоритете.
• Можно использовать значения вроде center, bottom, 20% 80% и др.

Свойство object-position позволяет точно управлять отображением медиа внутри контейнера и удобно при создании адаптивных и эстетичных интерфейсов.

CodeBase | Frontend | #CSS

🖥 Курс: "Верстка простого сайта для самых маленьких, html/css подробное объяснение"!

🌟 Изучите шаг за шагом, как создать современный веб-макет с помощью HTML и CSS. Идеально подходит для новичков, желающих развить практические навыки в веб-разработке!

🕞 Продолжительность: 4:00:18

🔗 Ссылка

CodeBase | Frontend | #курс #html #css

⚙️ Что такое свойство white-space в CSS и зачем оно используется?

white-space — это CSS-свойство, которое управляет отображением пробелов и переносом строк внутри элемента. Оно определяет, как браузер будет обрабатывать пробелы, табуляции и переводы строк.

➡️ Пример:

<div class="text">
  Этот   текст  
  сохраняет    пробелы
  и переносы.
</div>

<style>
  .text {
    white-space: pre; /* Сохраняем пробелы и переносы */
    border: 1px solid black;
  }
</style>

🗣 В этом примере:

• white-space: normal; — пробелы схлопываются, текст переносится автоматически (значение по умолчанию).
• white-space: nowrap; — текст не переносится.
• white-space: pre; — сохраняются все пробелы и переносы, как в коде.

Это свойство полезно для оформления кода, вывода логов и управления форматированием текста.

CodeBase | Frontend | #CSS

⚙️ Что такое свойство text-overflow в CSS и зачем оно используется?

text-overflow управляет тем, как обрезается текст, выходящий за пределы блока. Оно работает вместе с overflow: hidden и white-space: nowrap, чтобы отображать, например, троеточие.

➡️ Пример:

<div class="truncate">Очень длинный текст, который не помещается</div>

<style>
  .truncate {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid #ccc;
  }
</style>

🗣 В этом примере длинный текст обрезается и заменяется троеточием (...), не выходя за рамки блока. Это удобно для заголовков, превью и адаптивных карточек в UI.

CodeBase | Frontend | #CSS

⚙️ Что такое свойство flex-grow в CSS и зачем оно используется?

Свойство flex-grow определяет, как свободное пространство внутри контейнера делится между дочерними элементами.

Оно задаёт коэффициент роста: чем больше значение, тем больше элемент занимает места.

➡️ Пример:

<div class="container">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
</div>

<style>
  .container {
    display: flex;
    width: 300px;
    border: 1px solid #ccc;
  }
  .item {
    padding: 10px;
    color: white;
  }
  .item1 { flex-grow: 1; background: #007bff; }
  .item2 { flex-grow: 2; background: #28a745; }
  .item3 { flex-grow: 1; background: #dc3545; }
</style>

🗣 В этом примере у второго элемента flex-grow: 2, поэтому он занимает в два раза больше места, чем соседние блоки.

CodeBase | Frontend | #CSS