Специализация
Python Backend Developer
Java Backend Developer
Node.js Backend Developer
Golang Backend Developer
React Frontend Developer
Выберите навыки
React
JavaScript
Git
Redux
Webpack
Сложность
1-3
4-6
7-8
9-10
Рейтинг вопросов
1
2
3
4
5
Подпишись на React Developer в телеграм
В чем разница между display: none и visibility: hidden?
• display: none полностью удаляет элемент с веб-страницы, как если бы его не существовало. Он не занимает места в макете, и элементы после него сдвигаются, чтобы занять его пространство.
• visibility: hidden скрывает элемент, но оставляет его место на странице. Элемент всё ещё занимает пространство в макете, но не виден пользователю.
Что произойдет, если изменить свойство display на block для элемента <span>?
Элемент <span> станет блочным: будет занимать всю ширину родителя, переноситься на новую строку и сможет иметь ширину/высоту, в отличие от строчного поведения.
Какие есть базовые значения display?
Основные значения:
block — элемент занимает всю ширину, начинается с новой строки.
inline — элемент занимает только необходимую ширину, не переносится.
inline-block — как inline, но с возможностью задавать ширину/высоту.
none — элемент скрыт и не занимает место.
Чем отличается скрытие элементов с помощью opacity, visibility и display: none?
opacity: 0 делает элемент невидимым, но он продолжает занимать место и реагировать на события. visibility: hidden также скрывает элемент, сохраняя его место в layout, но события мыши не срабатывают. display: none полностью удаляет элемент из потока документа, освобождая занимаемое место.
Можно ли анимировать свойства opacity, visibility и display?
opacity и visibility можно анимировать с помощью CSS-переходов и анимаций. display нельзя анимировать напрямую, но можно комбинировать с другими свойствами для создания эффектов появления/исчезновения.
Остается ли элемент в DOM при display: none?
Как ведут себя width и height у строчных элементов?
Как display: inline и display: block влияют на layout?
Как скрытие элемента влияет на DOM и поток документа?
Как скрытые элементы влияют на SEO?
Рейтинг:
5
Сложность:
3
Да, элемент остается в DOM при display: none.
Он просто исключается из layout и не отображается на странице.
Элемент не занимает место и не участвует в рендеринге.
DOM-узел при этом сохраняется.
Рейтинг:
4
Сложность:
5
У строчных элементов свойства width и height не применяются напрямую. Их размер определяется содержимым. Вертикальные размеры зависят от line-height и шрифта. Это часто удивляет начинающих разработчиков. Для управления размерами требуется изменить display.
Рейтинг:
5
Сложность:
4
display: block заставляет элемент начинаться с новой строки и занимать всю доступную ширину. display: inline размещает элемент внутри строки текста. У блочных элементов работают width, height и вертикальные margin. У строчных — размеры зависят от контента. Это ключевое различие в CSS.
Рейтинг:
4
Сложность:
2
Рейтинг:
4
Сложность:
4
Рейтинг:
2
Сложность:
4
Рейтинг:
2
Сложность:
3
Рейтинг:
4
Сложность:
6
Рейтинг:
3
Сложность:
7
Рейтинг:
3
Сложность:
5
