Вопрос с собеседования · Frontend
Какие CSS-свойства наследуются и как работают inherit, initial и unset?
JuniorВёрстка и CSS
Ещё спрашивают так:
- Почему цвет текста передаётся детям, а рамка — нет?
Коротко
Наследуются в основном свойства текста: color, font-*, line-height, text-align, visibility, cursor. Не наследуются свойства блока: margin, padding, border, background, width, display, position. Ключевые слова: inherit — взять значение родителя, initial — начальное значение свойства по спецификации, unset — inherit для наследуемых и initial для остальных, revert — откат к стилям браузера.
- Наследованное значение слабее любого правила, нацеленного на сам элемент
- Поэтому
body { color: #333 }задаёт цвет всему тексту - all: unset — сбросить всё у компонента
Подробно
Кнопки и поля форм по умолчанию не наследуют шрифт — частая причина «другого шрифта» в формах; лечится font: inherit.
Что хотят услышать
- Какие свойства наследуются.
- inherit, initial, unset.
- Наследование слабее прямых правил.
Проверьте себя
Один верный вариант. Подумайте, потом откройте ответ.
Показать варианты и ответ
- ✓В основном наследуется текст (color, font), а margin и border — нет; inherit берёт родительское
- ✗margin и padding наследуются от родителя, а color и font — нет; inherit сбрасывает к значению по умолчанию
- ✗Наследованное значение сильнее правила, заданного самому элементу
- ✗initial всегда означает значение родителя, unset — значение браузера
Связанные вопросы
Партнёр платформы
Разбор собеседования
Разбор собеседования с sotto
После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.