Властивості CSS: Дисплей проти видимості

У чому різниця між властивостями дисплей та видимість?

visibilityВластивість тільки говорить браузеру , потрібно чи відображати елемент чи ні. Він або видимий ( visible- ви його бачите), або невидимий ( hidden- ви не бачите його).

displayВластивість повідомляє браузеру , як малювати і показати елемент, якщо взагалі - чи повинен він буде відображатися в якості inlineелемента (тобто вона тече з текстом і іншими малими елементами) або block-рівнем елемента (тобто має ширину і висоту властивості, ви можете встановити, це сплавний, і т.д.), або inline-block(тобто він діє як блок коробки , але укладають рядний , а) і деякі інші ( list-item, table, table-row, table-cell, flexі т.д.).

Коли ви встановлюєте елемент, display: blockале також його встановлюєте visibility: hidden, браузер все ще розглядає його як елемент блоку, за винятком того, що ви просто не бачите його. Начебто, як ви складаєте червоний ящик поверх невидимої скриньки: червона скринька виглядає так, ніби вона плаває в повітрі, коли насправді вона сидить поверх фізичної коробки, яку ви не бачите.

Іншими словами, це означає, що елементи, displayякі не є none, все одно впливатимуть на потік елементів на сторінці, незалежно від того, видимі вони чи ні. Коробки, що оточують елемент display: none, поводяться так, ніби цього елемента ніколи не було (хоча він залишається в DOM).

видимість: приховано;

• елемент не буде пофарбований ТА НЕ отримує події клацання / дотику, але простір, який він займає, все ще зайнятий
• оскільки він все ще є для цілей компонування, ви можете виміряти його, не видно
• зміна вмісту все одно коштуватиме поновлення / компонування сторінки
• видимість успадковується, тож це означає, що ви можете зробити підлеглих дітей видимими, надаючи їм видимість: видимі;

дисплей: немає;

• зробить елемент не брати участь у потоці / макеті
• може (залежно від використовуваного веб-переглядача) вбивати флеш-фільми та рамки кадрів (які після повторного показу перезавантажуватимуться / перезавантажуватимуться), хоча ви можете не допустити цього до iframes
• елемент не займе місця. для цілей компонування це як би не існує
• змусить деякі браузери / пристрої (як-от iPad) безпосередньо забирати пам'ять, що використовується цим елементом, спричиняючи невеликі хитки, якщо під час переходу між анімацією перемикатися на жодне та інше значення

додаткові примітки:

• зображення із прихованим вмістом: у всіх популярних браузерах зображення все ще завантажуються, хоча вони знаходяться в будь-якому елементі з видимістю: приховано; або дисплей: немає;
• шрифти в прихованому вмісті: браузери веб-кайтів (Chrome / Safari) можуть затримати завантаження користувацьких шрифтів, які використовуються лише у прихованих елементах, у тому числі через видимість або показ. Це може призвести до вимірювання елементів, які все ще використовують резервний шрифт, поки не буде завантажений спеціальний шрифт.

display: жоден елемент не видаляє елемент з потоку html, тоді як видимість: приховано не.

дисплей: немає; видалить з DOM елементи візуального стилю / фізичного простору, тоді як видимість: приховано; не видалить елемент, а просто приховає його. Таким чином, div, що займає 300px вертикального простору у вашому DOM, ВИНАГИ буде займати 300px вертикальної ширини при встановленні на видимість: приховано; але коли встановлено для відображення: немає; це візуальні стилі і простір, який він займає, приховано, і простір потім "звільняється" через відсутність кращого слова.

[РЕДАКТУВАННЯ] - Нещодавно я писав вище, і про те, чи я недостатньо обізнаний чи у мене поганий день, я не знаю, але реальність полягає в тому, що цей елемент НІКОЛИ не видаляється з ієрархії DOM. Усі стилі відображення на рівні блоку повністю "приховані" при використанні дисплея: немає, тоді як з видимістю: приховано; сам елемент прихований, але він все ще займає візуальний простір у DOM. Я сподіваюся, що це все прояснить