Die visibilityEigenschaft teilt dem Browser nur mit, ob ein Element angezeigt werden soll oder nicht. Es ist entweder sichtbar ( visible- Sie können es sehen) oder unsichtbar ( hidden- Sie können es nicht sehen).
Die displayEigenschaft teilt dem Browser mit, wie ein Element gezeichnet und angezeigt werden soll, wenn überhaupt - ob es als inlineElement (dh es fließt mit Text und anderen Inline-Elementen) oder als blockElement auf Ebene (dh es hat Höhen- und Breiteneigenschaften ) angezeigt werden soll Sie können einstellen, es ist schwimmfähig, usw.) oder ein inline-block(dh , es wie ein Block - Box fungiert , sondern inline statt gelegt) und einige andere ( list-item, table, table-row, table-cell, flex, etc.).
Wenn Sie ein Element auf setzen , display: blockaber auch festlegen visibility: hidden, behandelt der Browser es weiterhin als Blockelement, außer Sie sehen es einfach nicht. So ähnlich wie Sie eine rote Box auf eine unsichtbare Box stapeln: Die rote Box sieht aus, als würde sie in der Luft schweben, wenn sie in Wirklichkeit auf einer physischen Box sitzt, die Sie nicht sehen können.
Mit anderen Worten bedeutet dies, dass Elemente, bei displaydenen dies nicht der Fall ist, noneden Fluss von Elementen auf einer Seite weiterhin beeinflussen, unabhängig davon, ob sie sichtbar sind oder nicht. Felder, die ein Element mit umgeben display: none, verhalten sich so, als wäre dieses Element nie vorhanden (obwohl es im DOM verbleibt).