Frontend | Вопросы собесов

В каком случае функция меняет контекст ? Спросят с вероятностью 3% Контекст выполнения функции определяется значением ключевого слова this. Контекст может изменяться в зависимости от способа вызова функции. Рассмотрим основные случаи, когда контекст функции меняется: 1️⃣Вызов функции как метода объекта Когда функция вызывается как метод объекта, контекст (this) ссылается на этот объект.

const obj = {
  name: 'Alice',
  greet: function() {
    console.log(this.name);
  }
};

obj.greet(); // 'Alice'

В этом примере this внутри функции greet ссылается на объект obj. 2️⃣Вызов функции без контекста (как обычная функция) Когда функция вызывается как обычная функция (не как метод объекта), контекст (this) ссылается на глобальный объект (window в браузере или global в Node.js). В строгом режиме (strict mode) контекст будет undefined.

function globalFunction() {
  console.log(this);
}

globalFunction(); // В нестрогом режиме: window (в браузере), в строгом режиме: undefined

3️⃣Вызов конструктора (с использованием new) Когда функция вызывается с использованием ключевого слова new, она работает как конструктор, и контекст (this) ссылается на новый объект, созданный этой функцией.

function Person(name) {
  this.name = name;
}

const person = new Person('Bob');
console.log(person.name); // 'Bob'

4️⃣Явное задание контекста с помощью call, apply и bind Позволяют явно задать контекст (this) для функции. ✅`call`: вызывает функцию с указанным контекстом и аргументами. ✅`apply`: вызывает функцию с указанным контекстом и аргументами в виде массива. ✅`bind`: возвращает новую функцию, которая при вызове имеет указанный контекст. Пример:

function greet() {
  console.log(this.name);
}

const person1 = { name: 'Charlie' };
const person2 = { name: 'Dave' };

greet.call(person1); // 'Charlie'
greet.apply(person2); // 'Dave'

const boundGreet = greet.bind(person1);
boundGreet(); // 'Charlie'

5️⃣Стрелочные функции Не имеют своего собственного контекста (this). Вместо этого они наследуют контекст из внешней функции, в которой были объявлены. Это поведение называется "лексическим this".

const obj = {
  name: 'Eve',
  greet: function() {
    const arrowFunction = () => {
      console.log(this.name);
    };
    arrowFunction();
  }
};

obj.greet(); // 'Eve'

В этом примере this внутри стрелочной функции ссылается на объект obj, потому что стрелочная функция была объявлена внутри метода greet этого объекта. 6️⃣Методы как коллбеки Когда методы объектов передаются как коллбеки, контекст может измениться. Это часто происходит, если метод используется вне контекста своего объекта.

const obj = {
  name: 'Frank',
  greet: function() {
    console.log(this.name);
  }
};

setTimeout(obj.greet, 1000); // undefined или ошибка, так как this ссылается на глобальный объект или undefined в строгом режиме

Чтобы сохранить контекст, можно использовать bind:

setTimeout(obj.greet.bind(obj), 1000); // 'Frank'

Функция меняет контекст (this) в зависимости от способа ее вызова. Контекст может быть объектом, если функция вызывается как метод; новым объектом, если функция вызывается как конструктор; глобальным объектом или undefined, если функция вызывается как обычная функция; явно заданным при использовании call, apply или bind; или унаследованным из внешней функции в случае стрелочных функций. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

Для чего нужен оператор spread ? Спросят с вероятностью 7% Оператор spread (...) используется для разворачивания (распространения) элементов массивов или свойств объектов. Он позволяет удобным образом копировать массивы и объекты, объединять их, передавать элементы массивов в функции и многое другое. Примеры: 1️⃣Копирование массива

const originalArray = [1, 2, 3];
const copiedArray = [...originalArray];

console.log(copiedArray); // [1, 2, 3]

Используя оператор spread, мы создаем копию массива originalArray. Изменения в copiedArray не будут затрагивать originalArray. 2️⃣Объединение массивов

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const mergedArray = [...array1, ...array2];

console.log(mergedArray); // [1, 2, 3, 4, 5, 6]

Оператор spread позволяет легко объединять несколько массивов в один. 3️⃣Копирование объекта

const originalObject = { a: 1, b: 2 };
const copiedObject = { ...originalObject };

console.log(copiedObject); // { a: 1, b: 2 }

С помощью оператора spread можно копировать свойства одного объекта в другой. 4️⃣Объединение объектов

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const mergedObject = { ...obj1, ...obj2 };

console.log(mergedObject); // { a: 1, b: 2, c: 3, d: 4 }

Оператор spread позволяет объединять несколько объектов в один. 5️⃣Передача элементов массива в качестве аргументов функции

const numbers = [1, 2, 3];
const sum = (a, b, c) => a + b + c;

console.log(sum(...numbers)); // 6

Здесь оператор spread используется для передачи элементов массива numbers в функцию sum в качестве отдельных аргументов. Почему это важно? ✅Удобство и читаемость кода: Оператор spread упрощает код, делая его более читаемым и понятным. ✅Эффективность: Он позволяет легко манипулировать массивами и объектами без необходимости использования сложных методов и циклов. ✅Непрямое копирование: Оператор spread создает неглубокие копии (shallow copies) массивов и объектов, что предотвращает нежелательные изменения исходных данных. Оператор spread (...) используется для разворачивания массивов и объектов, что позволяет легко копировать, объединять и передавать данные. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

Как увеличить в размере при наведении элемент, не сдвигая соседние ? Спросят с вероятностью 7% Чтобы увеличить элемент в размере при наведении, не сдвигая при этом соседние элементы, можно использовать CSS свойство transform с функцией scale. Это позволяет изменять размер элемента, не влияя на его положение и соседние элементы, так как трансформация происходит в контексте самого элемента и не меняет его фактические размеры в документе. Пример использования

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Увеличение при наведении</title>
    <style>
        .container {
            display: flex;
            gap: 10px;
        }
        .item {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            text-align: center;
            line-height: 100px;
            transition: transform 0.3s;
        }
        .item:hover {
            transform: scale(1.2); /* Увеличение размера при наведении */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</body>
</html>

Объяснение ✅`transition: transform 0.3s;`: Это свойство добавляет плавный переход для любых изменений, связанных с трансформацией элемента. В данном случае, это применимо к изменению масштаба (transform: scale(1.2)), которое происходит при наведении. ✅`transform: scale(1.2);`: Эта строка кода увеличивает размер элемента на 20% при наведении (hover). Значение 1.2 означает увеличение на 20% по обеим осям (X и Y). ✅Контейнер с `display: flex;` иак увеличить в Используется для демонстрации того, что элементы остаются на своих местах и не сдвигаются при увеличении одного из них. gap добавляет пространство между элементами. Почему это важно? ✅Эффективность пользовательского интерфейса: Увеличение элементов при наведении может служить для привлечения внимания пользователя или для улучшения взаимодействия, например, при работе с интерактивными элементами. ✅Стабильность макета: Применение трансформации с transform: scale позволяет изменять размер элемента без изменения его фактического размера и расположения в документе, что сохраняет стабильность макета и не нарушает расположение соседних элементов. ✅Плавные анимации: Использование transition делает анимацию плавной и приятной для глаз, улучшая общее восприятие интерфейса. Чтобы увеличить элемент при наведении, не сдвигая соседние элементы, используйте CSS свойство transform: scale вместе с transition для плавного перехода. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

Flexbox свойство отвечающее за перенос элементов на новую строку ? Спросят с вероятностью 7% Свойство Flexbox, которое отвечает за перенос элементов на новую строку, называется flex-wrap. Оно позволяет управлять тем, как элементы в контейнере flex будут обрабатываться, если они не помещаются в одну строку. Значения свойства ✅`nowrap` (значение по умолчанию): Все элементы будут располагаться в одной строке, независимо от их количества и размера. Они могут выходить за пределы контейнера. ✅`wrap`: Элементы будут переноситься на новую строку, если они не помещаются в одну. ✅`wrap-reverse`: Элементы также будут переноситься на новую строку, но строки будут расположены в обратном порядке.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Пример flex-wrap</title>
    <style>
        .container {
            display: flex;
            flex-wrap: wrap; /* Применение flex-wrap */
            width: 300px;
            border: 2px solid black;
        }
        .item {
            flex: 1 1 100px;
            margin: 5px;
            background-color: lightblue;
            text-align: center;
            padding: 20px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>
</body>
</html>

В этом примере контейнер .container имеет свойство flex-wrap: wrap, что позволяет элементам .item переноситься на новую строку, если они не помещаются в одну. Контейнер имеет фиксированную ширину 300px, поэтому элементы автоматически переносятся на следующую строку, когда их суммарная ширина превышает эту ширину. Почему это важно? ✅Адаптивный дизайн: Свойство flex-wrap делает контейнер гибким, что особенно важно для адаптивного дизайна, когда элементы должны корректно отображаться на различных устройствах и экранах. ✅Управление пространством: Оно позволяет лучше управлять пространством внутри контейнера, предотвращая переполнение и выход элементов за его пределы. ✅Удобство использования: Использование flex-wrap упрощает разработку, так как автоматизирует перенос элементов и устраняет необходимость в сложных медиа-запросах. flex-wrap — это свойство Flexbox, которое управляет переносом элементов на новую строку. Значение wrap позволяет элементам переноситься на следующую строку, если они не помещаются в одну. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

Разбираем как решать задачи на LeetCode ➖Примеры решений ➖Пояснения Всё здесь ➡️ Frontend | LeetCode

🔥Тесты для подготовки к собеседованию🔥 Выбери своё направление: 1. Frontend 2. Python 3. Java 4. Тестировщик QA 5. Data Science 6. DevOps 7. C# 8. С/C++ 9. Golang 10. PHP 11. Kotlin 12. Swift

Какие псевдоэлементы знаешь и используешь ? Спросят с вероятностью 7% Псевдоэлементы позволяют добавлять специфические элементы и стили к определённым частям HTML-элементов, не изменяя саму HTML-разметку. Они часто используются для стилизации, добавления декоративных элементов или изменения содержимого. Основные псевдоэлементы 1️⃣::before 2️⃣::after 3️⃣::first-line 4️⃣::first-letter 5️⃣::selection Описание и примеры использования 1️⃣`::before` и `::after`: Эти псевдоэлементы позволяют добавлять содержимое до и после содержимого выбранного элемента. Их часто используют для декоративных целей.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Пример ::before и ::after</title>
    <style>
        .button {
            position: relative;
            display: inline-block;
            padding: 10px 20px;
            background-color: #3498db;
            color: #fff;
            text-transform: uppercase;
            text-decoration: none;
            font-family: Arial, sans-serif;
        }
        .button::before, .button::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 2px;
            background-color: #fff;
            transition: all 0.3s;
        }
        .button::before {
            top: 0;
            left: 0;
        }
        .button::after {
            bottom: 0;
            right: 0;
        }
        .button:hover::before {
            width: 0;
        }
        .button:hover::after {
            width: 0;
        }
    </style>
</head>
<body>
    <a href="#" class="button">Кнопка</a>
</body>
</html>

В этом примере ::before и ::after используются для добавления анимационных линий к кнопке. 2️⃣`::first-line`: Этот псевдоэлемент позволяет стилизовать первую строку текста внутри блока.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Пример ::first-line</title>
    <style>
        p::first-line {
            font-weight: bold;
            color: red;
        }
    </style>
</head>
<body>
    <p>Это пример параграфа. Первая строка этого текста будет стилизована жирным шрифтом и красным цветом.</p>
</body>
</html>

3️⃣`::first-letter`: Этот псевдоэлемент позволяет стилизовать первую букву блока текста.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Пример ::first-letter</title>
    <style>
        p::first-letter {
            font-size: 2em;
            color: blue;
            float: left;
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <p>Это пример параграфа. Первая буква этого текста будет увеличена и окрашена в синий цвет.</p>
</body>
</html>

Почему это важно? ✅Стилизация без изменения HTML: Псевдоэлементы позволяют добавлять и стилизовать части содержимого без необходимости изменять HTML-разметку. ✅Декоративные эффекты: С их помощью можно создавать сложные визуальные эффекты и улучшать пользовательский интерфейс. ✅Удобство и гибкость: Псевдоэлементы облегчают реализацию многих задач, таких как добавление иконок, создания кастомных подчеркиваний и т.д. Псевдоэлементы добавляют и стилизуют части содержимого элементов. Основные псевдоэлементы: ::before, ::after, ::first-line, ::first-letter и ::selection. Они позволяют улучшать дизайн и удобство интерфейсов без изменения HTML-кода. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

Что знаешь о приоритете селекторов ? Спросят с вероятностью 7% Приоритет селекторов (также известный как специфичность селекторов) определяет, какие стили будут применяться к элементу, если на него действуют несколько правил с различными селекторами. Специфичность основана на типах селекторов и их количественном присутствии в одном CSS-правиле. Как она вычисляется? Специфичность выражается четырьмя уровнями: A, B, C, D. Чем выше значения, тем более специфичный селектор. ✅A: Инлайновые стили (например, style="color: red;") имеют самую высокую специфичность. ✅B: Количество ID-селекторов в селекторе (например, #header). ✅C: Количество классов, атрибутов и псевдоклассов (например, .class, [type="text"], :hover). ✅D: Количество тегов и псевдоэлементов (например, div, h1, ::before). Рассмотрим несколько примеров и определим их специфичность: 1️⃣#main-content — (0, 1, 0, 0) 2️⃣.article p — (0, 0, 1, 1) 3️⃣header h1 span — (0, 0, 0, 3) 4️⃣div#main .content .text — (0, 1, 2, 1) Чем выше значения специфичности, тем выше приоритет стиля. Если два селектора имеют одинаковую специфичность, то стиль, который объявлен позже, будет применён. Пример

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Пример специфичности</title>
    <style>
        p {
            color: black; /* (0, 0, 0, 1) */
        }
        .text {
            color: blue; /* (0, 0, 1, 0) */
        }
        #highlight {
            color: red; /* (0, 1, 0, 0) */
        }
        p#highlight {
            color: green; /* (0, 1, 0, 1) */
        }
    </style>
</head>
<body>
    <p class="text" id="highlight">Этот текст будет зелёным.</p>
</body>
</html>

В этом примере на <p> элемент действует несколько селекторов с разной специфичностью: 1️⃣p имеет специфичность (0, 0, 0, 1) 2️⃣.text имеет специфичность (0, 0, 1, 0) 3️⃣#highlight имеет специфичность (0, 1, 0, 0) 4️⃣p#highlight имеет специфичность (0, 1, 0, 1) Поскольку p#highlight имеет наивысшую специфичность (0, 1, 0, 1), он применяет стиль цвета зелёный. Почему это важно? ✅Управление конфликтами стилей: Знание специфичности помогает правильно управлять стилями и избегать конфликтов. ✅Чтение и поддержка кода: Более специфичные селекторы позволяют писать CSS, который легко поддерживать и расширять. ✅Эффективность разработки: Понимание специфичности позволяет создавать более предсказуемый и стабильный код. Специфичность селекторов определяет, какие CSS-стили будут применяться к элементу. Специфичность основывается на типах селекторов и их количестве. Чем более специфичный селектор, тем выше его приоритет. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

За что отвечает z-index ? Спросят с вероятностью 7% z-index — это CSS-свойство, которое определяет порядок расположения элементов по оси z (перпендикулярно экрану). Это свойство используется для управления тем, какие элементы будут отображаться поверх других, когда они перекрываются. Как он работает? ✅Контекст наложения (stacking context): Чтобы z-index работал, элемент должен иметь установленное значение position, отличное от static (например, relative, absolute, fixed или sticky). Без этого z-index не будет применяться. ✅Числовое значение: z-index принимает целые числа, включая отрицательные. Элементы с более высоким значением z-index будут отображаться поверх элементов с более низким значением. Пример

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Пример z-index</title>
    <style>
        .box {
            position: absolute;
            width: 100px;
            height: 100px;
        }
        .box1 {
            background-color: red;
            z-index: 1;
            top: 50px;
            left: 50px;
        }
        .box2 {
            background-color: blue;
            z-index: 2;
            top: 80px;
            left: 80px;
        }
    </style>
</head>
<body>
    <div class="box box1"></div>
    <div class="box box2"></div>
</body>
</html>

В этом примере у нас есть два элемента, которые перекрываются. Красный квадрат имеет z-index: 1, а синий квадрат — z-index: 2. Поскольку значение z-index у синего квадрата выше, он будет отображаться поверх красного. Почему это важно? ✅Управление перекрытиями: Важен для создания сложных интерфейсов, где элементы могут перекрываться. Это часто встречается в модальных окнах, всплывающих подсказках, выпадающих меню и т.д. ✅Визуальная иерархия: Он позволяет разработчикам управлять визуальной иерархией, гарантируя, что более важные элементы остаются видимыми и доступны пользователям. z-index определяет, какой элемент будет находиться поверх другого при их перекрытии. Чем выше значение z-index, тем ближе к пользователю будет элемент. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

Какой смысл замыканий, если бы не было функций высшего порядка ? Спросят с вероятностью 3% Замыкания (closures) представляют собой мощную концепцию, которая позволяет функции "запоминать" и сохранять доступ к лексическому окружению, в котором она была создана, даже после завершения выполнения этой функции. Часто используются в комбинации с функциями высшего порядка, но они полезны и сами по себе, даже если бы функции высшего порядка не существовали. Рассмотрим, почему замыкания важны и какие задачи они решают. Основные сценарии использования замыканий 1️⃣Сохранение состояния ✅Замыкания позволяют сохранить состояние между вызовами функции. Это полезно для создания функций с "памятью".

      function createCounter() {
     let count = 0;
     return function() {
       count++;
       return count;
     };
   }

   const counter = createCounter();
   console.log(counter()); // 1
   console.log(counter()); // 2
   console.log(counter()); // 3
   

В этом примере функция createCounter создает счетчик, который сохраняет свое состояние между вызовами. 2️⃣Инкапсуляция данных ✅Замыкания позволяют скрывать данные и делать их недоступными снаружи функции, предоставляя только ограниченный интерфейс для взаимодействия с этими данными.

      function createPrivateCounter() {
     let count = 0;
     return {
       increment: function() {
         count++;
       },
       getValue: function() {
         return count;
       }
     };
   }

   const privateCounter = createPrivateCounter();
   privateCounter.increment();
   console.log(privateCounter.getValue()); // 1
   console.log(privateCounter.count); // undefined (count недоступен)
   

Здесь мы инкапсулируем переменную count и предоставляем методы для ее изменения и получения значения. Почему замыкания полезны даже без функций высшего порядка 1️⃣Лексическое окружение ✅Замыкания используют лексическое окружение, что позволяет функции доступ к переменным, определенным в области видимости, в которой она была создана.

      function outer() {
     let outerVariable = 'I am outside!';
     function inner() {
       console.log(outerVariable);
     }
     inner();
   }

   outer(); // 'I am outside!'
   

Здесь функция inner имеет доступ к переменной outerVariable, даже если она вызывается вне ее лексической области видимости. 2️⃣Создание частных данных ✅Замыкания позволяют создавать частные данные и методы, что особенно важно для модульного и безопасного программирования.

      function Person(name) {
     let _name = name;
     return {
       getName: function() {
         return _name;
       },
       setName: function(newName) {
         _name = newName;
       }
     };
   }

   const person = Person('John');
   console.log(person.getName()); // 'John'
   person.setName('Doe');
   console.log(person.getName()); // 'Doe'
   console.log(person._name); // undefined (_name недоступен)
   

В этом примере _name является частной переменной и доступна только через методы getName и setName. Замыкания полезны не только в контексте функций высшего порядка, но и сами по себе. Они позволяют сохранять состояние, инкапсулировать данные и создавать функции с предустановленными параметрами. Замыкания используют лексическое окружение, что позволяет функции доступ к переменным из области видимости, в которой она была создана, даже после завершения выполнения этой области. Это делает замыкания мощным инструментом для структурирования и безопасности кода. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

Из чего строится размер элементы ? Спросят с вероятностью 7% Размер элемента определяется комбинацией нескольких свойств, которые задают его ширину, высоту, отступы, поля и рамки. Эти свойства можно сгруппировать в следующие категории: 1️⃣Content (Содержимое): ✅`width`: задает ширину содержимого элемента. ✅`height`: задает высоту содержимого элемента.

        .element {
        width: 200px;
        height: 100px;
    }

2️⃣Padding (Внутренние отступы): ✅`padding`: задает пространство между содержимым элемента и его границей (рамкой).

        .element {
        padding: 10px; /* Внутренние отступы со всех сторон */
    }

3️⃣Border (Рамка): ✅`border`: задает толщину и стиль рамки вокруг содержимого и внутреннего отступа.

        .element {
        border: 2px solid black; /* Толщина, стиль и цвет рамки */
    }

4️⃣Margin (Внешние отступы): ✅`margin`: задает пространство между элементом и соседними элементами.

        .element {
        margin: 20px; /* Внешние отступы со всех сторон */
    }

Совокупность всех этих свойств определяет общий размер элемента: ✅Размер содержимого (width + height) ✅Внутренние отступы (padding) ✅Рамка (border) ✅Внешние отступы (margin) Полная модель: ✅Content: фактическое содержимое элемента. ✅Padding: пространство вокруг содержимого. ✅Border: рамка вокруг padding. ✅Margin: пространство вокруг border, отделяющее элемент от других элементов. Box Model (Модель коробки): Существует понятие "модель коробки" (box model), которая объединяет все вышеуказанные элементы для расчета общего размера и пространства, занимаемого элементом. Пример

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Пример Box Model</title>
    <style>
        .element {
            width: 200px; /* Ширина содержимого */
            height: 100px; /* Высота содержимого */
            padding: 10px; /* Внутренние отступы */
            border: 2px solid black; /* Рамка */
            margin: 20px; /* Внешние отступы */
        }
    </style>
</head>
<body>
    <div class="element">Пример элемента</div>
</body>
</html>

Рассчет общего размера элемента: ✅Content: 200px (width) x 100px (height) ✅Padding: 10px со всех сторон (добавляет 20px к ширине и 20px к высоте) ✅Border: 2px со всех сторон (добавляет 4px к ширине и 4px к высоте) ✅Margin: 20px со всех сторон (не влияет на размер самого элемента, но влияет на его позиционирование относительно других элементов) Итоговый размер элемента, включая padding и border: ✅Ширина: 200px (width) + 20px (padding) + 4px (border) = 224px ✅Высота: 100px (height) + 20px (padding) + 4px (border) = 124px Box-sizing: Позволяет изменять расчет размеров элемента. Значение border-box включает padding и border в свойства width и height.

.element {
    box-sizing: border-box;
    width: 200px;
    height: 100px;
    padding: 10px;
    border: 2px solid black;
}

В этом случае ширина и высота элемента будут равны 200px и 100px соответственно, и padding и border будут включены в эти размеры. Размер элемента строится из содержимого (width, height), внутренних отступов (padding), рамки (border) и внешних отступов (margin). Эти свойства вместе формируют модель коробки (box model), которая определяет общий размер и расположение элемента на странице. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

Для чего служат vh, vw при указании размеров ? Спросят с вероятностью 7% vh (viewport height) и vw (viewport width) — это единицы измерения, которые используются для указания размеров элементов относительно размеров области просмотра (viewport). Эти единицы особенно полезны при создании адаптивных и отзывчивых дизайнов, так как они позволяют легко масштабировать элементы в зависимости от размеров окна браузера. Определения: ✅`vh` (viewport height): 1 vh равен 1% от высоты области просмотра. ✅`vw` (viewport width): 1 vw равен 1% от ширины области просмотра. Примеры: 1️⃣Указание высоты элемента в `vh`:

        .full-height {
        height: 100vh; /* Элемент будет занимать 100% высоты области просмотра */
    }

В этом примере элемент с классом full-height всегда будет занимать всю высоту области просмотра, независимо от высоты окна браузера. 2️⃣Указание ширины элемента в vw:

        .full-width {
        width: 100vw; /* Элемент будет занимать 100% ширины области просмотра */
    }

В этом примере элемент с классом full-width всегда будет занимать всю ширину области просмотра, независимо от ширины окна браузера. 3️⃣Создание адаптивного текста:

        .responsive-text {
        font-size: 2vw; /* Размер шрифта будет 2% от ширины области просмотра */
    }

В этом примере размер шрифта элемента с классом responsive-text будет изменяться в зависимости от ширины окна браузера, что может быть полезно для создания адаптивных заголовков. Преимущества: ✅Адаптивность: Эти единицы позволяют легко адаптировать элементы к различным размерам экранов без необходимости использовать медиа-запросы. ✅Процентное соотношение: Основываются на процентах, что делает их удобными для создания элементов, занимающих определённую долю области просмотра. ✅Простота в использовании: Легко понять и применять, особенно для быстрого создания отзывчивых дизайнов. Пример с vh и vw:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Пример использования vh и vw</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
        }

        .header {
            height: 10vh; /* Высота заголовка - 10% от высоты области просмотра */
            background-color: #4CAF50;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .main {
            height: 80vh; /* Высота основного контента - 80% от высоты области просмотра */
            background-color: #f4f4f4;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3vw; /* Размер шрифта - 3% от ширины области просмотра */
        }

        .footer {
            height: 10vh; /* Высота подвала - 10% от высоты области просмотра */
            background-color: #333;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
    <div class="header">
        Заголовок
    </div>
    <div class="main">
        Основной контент
    </div>
    <div class="footer">
        Подвал
    </div>
</body>
</html>

vh и vw в CSS используются для указания размеров элементов относительно высоты и ширины окна браузера. Это позволяет создавать адаптивные дизайны, которые автоматически подстраиваются под размеры экрана. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых