Что делает свойство display: none?

CSS свойство display: none

Основной эффект

display: none полностью скрывает элемент из потока документа (document flow). Это значит, что элемент не занимает никакого пространства на странице — как будто его вообще нет в HTML.

Чем отличается от других способов скрытия

/* display: none — элемент УДАЛЁН из потока */
.hidden-none {
  display: none; /*占 0 пикселей */
}

/* visibility: hidden — элемент скрыт но занимает пространство */
.hidden-visibility {
  visibility: hidden; /* Занимает место, как будто прозрачный */
}

/* opacity: 0 — элемент прозрачный но интерактивный */
.hidden-opacity {
  opacity: 0; /* Можно клинуть, занимает место */
}

/* transform: scale(0) — трансформирует но занимает место */
.hidden-transform {
  transform: scale(0);
}

Практический пример:

<div class="container">
  <div class="box box1">Box 1</div>
  <div class="box box2">Box 2 (display: none)</div>
  <div class="box box3">Box 3</div>
</div>

<style>
.box { width: 100px; height: 100px; }
.box2 { display: none; } /* Box 2 исчезает, остаются 1 и 3 рядом */
</style>

Визуальное отличие

Исходный макет:
┌─────┐ ┌─────┐ ┌─────┐
│ B1  │ │ B2  │ │ B3  │
└─────┘ └─────┘ └─────┘

После display: none на B2:
┌─────┐ ┌─────┐
│ B1  │ │ B3  │
└─────┘ └─────┘

После visibility: hidden на B2:
┌─────┐ ┌─────┐ ┌─────┐
│ B1  │ [empty] │ B3  │
└─────┘ └─────┘ └─────┘

После opacity: 0 на B2:
┌─────┐ (невидимо) ┌─────┐
│ B1  │ B2      │ B3  │
└─────┘ └─────┘ └─────┘

Использование в HTML/CSS

<div id="menu" class="menu">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</div>

<style>
/* На мобилях скрывать меню */
.menu { display: flex; }

@media (max-width: 768px) {
  .menu {
    display: none; /* Меню исчезает на малых экранах */
  }
  
  .menu.active { /* Но можно показать при нажатии */
    display: flex;
  }
}
</style>

JavaScript взаимодействие

const element = document.getElementById('modal');

// Скрыть
element.style.display = 'none';

// Показать
element.style.display = 'block'; // или 'flex', 'grid', и т.д.

// Toggle
function toggleElement(el) {
  if (el.style.display === 'none') {
    el.style.display = 'block';
  } else {
    el.style.display = 'none';
  }
}

// Более правильный способ — использовать класс
function toggleElement(el) {
  el.classList.toggle('hidden');
}

// CSS
.hidden { display: none; }

Производительность

// display: none — перестраивает макет (reflow)
// Когда элемент удаляется из потока — браузер пересчитывает layout

element.style.display = 'none'; // ← Тяжелая операция (reflow)

// visibility: hidden — быстрее (repaint)
// Только перерисовка, без пересчёта layout
element.style.visibility = 'hidden'; // ← Более быстро (repaint)

// Лучшая практика для анимаций:
// Используй transform (вообще не трогает layout)
@keyframes fadeOut {
  to { transform: translateX(-100%); opacity: 0; }
}

Практические примеры

1. Прячущийся меню

<button id="toggleBtn">Menu</button>
<nav id="menu" class="menu">
  <a href="#">Home</a>
  <a href="#">About</a>
</nav>

<script>
const btn = document.getElementById('toggleBtn');
const menu = document.getElementById('menu');

btn.addEventListener('click', () => {
  menu.style.display = menu.style.display === 'none' ? 'block' : 'none';
});
</script>

<style>
.menu { display: none; }
.menu.open { display: block; }
</style>

2. Условное отображение

<div id="notification" class="notification hidden">
  Ошибка при загрузке!
</div>

<script>
fetch('/api/data')
  .catch(error => {
    const notification = document.getElementById('notification');
    notification.classList.remove('hidden');
    notification.textContent = error.message;
    
    // Скрыть через 3 секунды
    setTimeout(() => {
      notification.classList.add('hidden');
    }, 3000);
  });
</script>

<style>
.hidden { display: none; }
</style>

3. Адаптивный дизайн

.sidebar { display: block; }
.main-content { width: 75%; }

@media (max-width: 768px) {
  .sidebar { display: none; } /* Скрыть на мобиле */
  .main-content { width: 100%; }
}

@media (max-width: 480px) {
  .header-logo { display: none; } /* Только на очень малых */
  .header-menu { display: flex; } /* Меню гамбургер */
}

Альтернативы display: none

/* Если нужна анимация скрытия */
.fade-out {
  animation: fadeOut 0.3s ease-out forwards;
}

@keyframes fadeOut {
  from {
    opacity: 1;
    visibility: visible;
  }
  to {
    opacity: 0;
    visibility: hidden; /* Скрыть после анимации */
  }
}

/* Для интерактивности */
.interactive-hide {
  pointer-events: none; /* Отключить клики */
  opacity: 0.5; /* Но видно */
}

/* Для SEO (скрыть визуально но не от поисковиков) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

Важные моменты

// 1. Элемент с display: none НЕ получает события
const hidden = document.querySelector('.hidden');
hidden.addEventListener('click', () => {
  console.log('Не сработает'); // Событие не триггерится
});

// 2. display: none влияет на layout родителя
const parent = document.querySelector('.flex-container');
// Если убрать дочерний элемент — макет пересчитается

// 3. display: none vs display: block — разные типы
document.querySelector('span').style.display = 'block';
// span изменит box-model на блочный

// 4. display: none не наследуется (как большинство свойств)
.parent { display: none; }
.child { display: block; } // Всё равно скрыто!
// Потому что родитель скрыт

Выводы

1. display: none — полностью скрывает элемент, удаляя его из потока
2. Отличие от visibility: hidden — не занимает место
3. Отличие от opacity: 0 — не интерактивный и не занимает место
4. Производительность — вызывает reflow, используй для стабильных скрытий
5. Адаптивный дизайн — основной способ скрывать элементы на разных экранах
6. Лучшая практика — используй класс CSS вместо style.display