CSSプロパティ：表示と可視性

DisplayプロパティとVisibilityプロパティの違いは何ですか？

このvisibilityプロパティは、要素を表示するかどうかをブラウザに通知するだけです。表示されている（visible- 表示できる）または非表示（- 表示されhiddenない）です。

displayプロパティは、ブラウザに指示どのように描くと、すべての場合には、要素を表示する-それは次のように表示するかどうかinlineの要素か（すなわち、それは、テキストや他のインライン要素をフロー）blockレベルの要素（すなわち、それは、高さと幅のプロパティを持っていますあなたは）それは、などを浮揚可能ですが、設定することができ、またはinline-block（それがブロックボックスのように動作しますが、インライン代わりに敷設された）と他のいくつか（すなわちlist-item、table、table-row、table-cell、flex、など）。

要素をset display: blockだけでなく setに設定してもvisibility: hidden、ブラウザはそれをブロック要素として扱いますが、表示されないだけです。赤いボックスを見えないボックスの上に重ねるようなものです。赤いボックスは、実際には見えない物理的なボックスの上にあるのに、空中に浮いているように見えます。

つまり、これは、要素が表示されているかどうかに関係なく、要素displayがないnone場合でも、ページ内の要素のフローに影響を与えることを意味します。で要素を囲むボックスは、display: noneその要素が存在しなかったかのように動作します（ただし、DOMには残ります）。

可視性：非表示。

• 要素はペイントされず、クリック/タッチイベントを受け取りませんが、それが占めるスペースはまだ占有されています
• レイアウトのためにまだ残っているので、見えなくても測定できます
• コンテンツを変更すると、ページのリフロー/レイアウトに時間がかかります
• 可視性は継承されるため、可視性を与えることでサブチャイルドを可視化できます。

表示：なし。

• 要素がフロー/レイアウトに参加しないようにします
• （使用するブラウザーに応じて）Flashムービーおよびiframeを強制終了できます（再表示/再ロード時に再表示されます）が、iframeで発生しないようにすることはできます。
• 要素はスペースをとりません。レイアウトの目的では、それは存在しないようです
• 一部のブラウザー/デバイス（iPadなど）がその要素で使用されているメモリを直接取り戻すため、アニメーション中に何もない値と他の値を切り替えると、小さな問題が発生します

追加のメモ：

• 非表示のコンテンツ内の画像：すべての一般的なブラウザーで、可視性のある要素内にあるにもかかわらず、画像は引き続き読み込まれます。または表示：なし。
• 非表示コンテンツのフォント： Webkitブラウザー（Chrome / Safari）は、表示や表示など、非表示要素でのみ使用されるカスタムフォントの読み込みを遅らせる可能性があります。これにより、カスタムフォントが読み込まれるまで、フォールバックフォントを使用している要素を測定することがあります。

display：noneはHTMLのフローから要素を削除しますが、visibility：hiddenは削除しません。

表示：なし; DOM要素の視覚スタイル/物理スペースをDOMから削除しますが、visibility：hidden; 要素は削除されませんが、単に非表示になります。したがって、DOMで300ピクセルの垂直方向のスペースを占めるdivは、visibility：hiddenに設定されている場合でも、300ピクセルの垂直方向の幅を占有します。ただし、display：noneに設定すると、それは視覚的なスタイルであり、それが占めるスペースは隠されており、そのスペースはより良い言葉がないために「解放」されます。

[編集]-上記を書いたのはしばらく前のことで、十分な知識がなかったのか、悪い日を過ごしたのかはわかりませんが、実際には、要素がDOM階層から削除されることはありません。display：noneを使用すると、すべてのブロックレベルの表示「スタイル」は完全に「非表示」になりますが、visibility：hiddenを使用すると、要素自体は非表示ですが、それでもDOMの視覚空間を占めます。これで問題が解決することを願っています