Вопросы на собеседовании: Фронтенд-разработчик

Эти три типа отображения различаются по потоку и box-поведению.

• Block: занимает всю ширину родителя, начинается с новой строки (div, p, h1).
• Inline: занимает только ширину содержимого, течёт в строке, игнорирует width/height (span, a, strong).
• Inline-block: течёт как inline, но принимает width, height, padding, margin как block.

Специфичность: числовой вес, определяющий, какое CSS-правило побеждает для одного элемента и свойства.

• Считается по четырём категориям: inline-стили, ID, классы и псевдоклассы, теги.
• Каждая категория весомее нижних, поэтому более высокий вес побеждает независимо от порядка объявления.
• !important перекрывает всё, но использовать его стоит крайне редко.

Каждый элемент: прямоугольный блок из четырёх слоёв.

• Content: область с текстом или изображением.
• Padding: прозрачный отступ между содержимым и рамкой.
• Border: сама рамка вокруг padding.
• Margin: внешний отступ, отделяющий элемент от соседей.
• box-sizing: border-box включает padding и border в width и height, это современный дефолт.

Разница в том, остаётся ли элемент в потоке документа.

• position: relative оставляет элемент в потоке, но позволяет сдвигать его через top, right, bottom, left без вытеснения соседей.
• position: absolute убирает его из потока и позиционирует относительно ближайшего предка с position, отличным от static.
• Если такого предка нет, позиционирование идёт относительно начального содержащего блока.

Flexbox: одномерная система компоновки, включаемая через display: flex на контейнере.

• Главная ось: основное направление элементов, задаётся flex-direction, по умолчанию горизонтальна.
• Поперечная ось: перпендикулярна главной.
• justify-content выравнивает по главной оси; align-items: по поперечной.

CSS Grid: двумерная система компоновки для строк и столбцов.

• Вы явно задаёте строки и столбцы контейнера и размещаете элементы в этой сетке.
• Flexbox подходит для одномерных раскладок, где элементы идут в одном направлении: навигация или ряд карточек.
• Grid предпочтителен, когда нужен контроль сразу в двух измерениях: шапка, боковая панель, контент и подвал.

Эти единицы различаются тем, относительно чего они задаются.

• px: абсолютная, не масштабируется с настройками пользователя или браузера.
• em: относительно font-size родителя, может накапливаться при вложенности.
• rem: относительно font-size корневого html, более предсказуема для глобального масштабирования.
• vw и vh: единицы вьюпорта, равные 1% ширины или высоты окна, удобны для полноэкранных блоков.

Стройте mobile-first и постепенно улучшайте для широких экранов.

• Начните с базового мобильного макета, затем добавляйте media queries с min-width для больших экранов.
• Используйте гибкие единицы вроде процентов и rem для ширин и шрифтов.
• Используйте Flexbox или Grid для контейнеров макета.
• Избегайте жёстких ширин и задавайте max-width странице, чтобы контент не выходил за пределы.

Семантический HTML использует элементы, передающие смысл содержимого.

• Применяйте header, nav, main, article, section, footer вместо универсальных div повсюду.
• Браузеры, поисковики и ассистивные технологии читают эти сигналы, чтобы понять структуру документа.
• Это улучшает доступность для скринридеров, поднимает SEO и упрощает чтение кода.

Media queries применяют CSS только при выполнении условия, чаще всего ширины вьюпорта.

• Запрос @media (min-width: 768px) активирует стили только на экранах шириной от 768px.
• Условия можно комбинировать через and или разделять типы носителей print и screen.

z-index управляет порядком наложения позиционированных элементов: выше значение, ближе к зрителю.

• Работает только на элементах с position, отличным от static, и на flex/grid-дочерних.
• Контекст наложения: изолированная группа, внутри которой z-index сравниваются только между собой.
• Поэтому дочерний элемент с огромным z-index не поднимется выше предка с меньшим контекстом.

Все три скрывают элемент, но различаются местом, событиями и доступностью.

• display: none убирает элемент из потока, он не занимает места и недоступен скринридерам.
• visibility: hidden скрывает его визуально, но место в макете сохраняется.
• opacity: 0 делает его прозрачным, но он занимает место, перехватывает клики и остаётся доступным.

Атрибут alt задаёт текстовое описание изображения.

• Оно показывается, если изображение не загрузилось, и зачитывается скринридерами незрячим пользователям.
• Осмысленный alt улучшает доступность и SEO изображений.
• Для чисто декоративных изображений задавайте пустой alt, чтобы скринридеры его пропускали.

Каскад определяет, какое правило применить, когда несколько целятся в один элемент и свойство.

• Сначала оценивается происхождение и важность правил.
• Затем специфичность селекторов.
• Затем порядок в источнике, поэтому при равной специфичности побеждает более позднее правило.

Padding: внутренний отступ элемента, margin: внешний.

• Padding находится между содержимым и рамкой и перенимает фоновый цвет элемента.
• Margin: прозрачный отступ между рамкой и соседними элементами.
• Смежные вертикальные margin у блоков схлопываются до большего значения, чего padding никогда не делает.

Они различаются областью видимости, поднятием и переприсваиванием.

• var имеет функциональную область и поднимается, поэтому к нему можно обратиться до объявления, что порождает баги.
• let и const имеют блочную область и существуют только внутри ближайших фигурных скобок.
• const запрещает переприсваивание привязки, но не делает объекты или массивы неизменяемыми.

Всплытие: то, как событие движется вверх по DOM после срабатывания.

• Сначала вызываются обработчики на целевом элементе, затем на каждом предке вплоть до document.
• Клик по кнопке внутри div также вызывает обработчики клика у div и его предков.
• Остановить можно вызовом event.stopPropagation() внутри обработчика.

Замыкание: функция, сохраняющая доступ к переменным внешней области даже после её завершения.

• Это работает, потому что функции хранят ссылку на окружение, где были созданы.
• Классический пример: фабрика счётчиков, где каждый вызов получает собственную приватную переменную.

=== сравнивает значение и тип, == приводит типы перед сравнением.

• === возвращает true только при точном совпадении значения и типа.
• == сначала приводит типы, поэтому 0 и false или null и undefined могут оказаться равны.
• Используйте === почти везде, чтобы избежать трудноуловимых сюрпризов приведения.

Значение this зависит от того, как вызвана функция, а не где она определена.

• В вызове метода this: это объект перед точкой.
• В самостоятельном вызове в строгом режиме this равно undefined.
• Стрелочные функции не имеют своего this и наследуют его из окружающего лексического окружения.