Какое свойство display будет иметь outer div

Что проверяют

Вопрос обычно идёт с куском разметки, и проверяют не список значений display, а умение отличить значение по умолчанию от вычисленного. Интервьюеру важно, знаете ли вы, что display может поменяться без явного правила. Следом часто спрашивают, как это проверить в браузере.

Как отвечать

Начните с базы: у div в стилях браузера по умолчанию display: block, и если в задаче больше ничего нет, ответ block. Содержимое на это не влияет: div со строчными детьми или со span внутри остаётся блочным.

Затем пройдитесь по случаям, когда вычисленное значение другое:

• явное правило: display: flex, grid, inline-block из вашего CSS или из класса фреймворка вроде Tailwind;
• блокификация: если внешний div сам является flex- или grid-элементом, плавает (float) или позиционирован через position: absolute или fixed, его внешний тип становится блочным. Заданный inline-block превратится в block, а inline-flex в flex;
• display: contents: сам блок не рендерится, дети встают в поток его родителя;
• display: none: элемент выпадает из отрисовки, размеров у него нет.

Хорошо добавить про двухсловный синтаксис: display описывает внешнее поведение (как блок стоит среди соседей) и внутреннее (как раскладывает детей). block это block flow, inline-block это inline flow-root, flex это block flex. Так проще объяснить, почему inline-flex снаружи ведёт себя как строчный элемент, а внутри как flex.

Проверка: DevTools, вкладка Computed, или getComputedStyle(el).display в консоли.

Где спотыкаются

Отвечают «зависит от содержимого». Дети не меняют display родителя, его меняет только CSS.

Путают значение из стилей с вычисленным. Написали inline-block, а у плавающего элемента в Computed стоит block, и это не баг.

Считают, что display: flex меняет и то, как внешний div стоит среди соседей. Снаружи он остаётся блочным, flex касается только его прямых детей.