Was sind die Unterschiede zwischen display:none und Visibility:hidden?

Was ich damals geantwortet habe, war, dass beide Elemente ausblenden können, aber wenn das Element auf display:none gesetzt wird, wird der zuvor vom Element belegte Dokumentflussraum gelöscht gleichzeitig, aber visibility:hidden; sorgt dafür, dass das Element auch dann noch Platz einnimmt, wenn es nicht angezeigt wird.
Es war ein Telefoninterview, nachdem ich die Frage beantwortet hatte, fragte die andere Partei nicht weiter nach anzeigebezogenem Wissen.
Wenn ich jetzt darüber nachdenke, habe ich wirklich Glück, wenn mich jemand nach Wissen zum Thema Anzeige fragt, muss ich darauf achten, worauf ich bei der Verwendung von Anzeige achten muss: Inline-Block. Ich werde definitiv nicht kämpfen können.

Vor ein paar Tagen, als ich das Schreiben der Navigation geübt habe, musste ich immer einige Inline-Elemente oder Elemente auf Blockebene auf Inline-Elemente auf Blockebene setzen. Also habe ich an display:inline-block gedacht, aber ich habe festgestellt, dass dies ein
Attributwert ist, über den noch einiges bekannt ist. Empfehlen Sie diesen Artikel.

• IE5.5 hat begonnen, Inline-Block zu unterstützen, aber Sie müssen wissen, dass IE5.5 offiziell im Jahr 2000 eingeführt wurde, aber

  W3C Dieses Attribut Der Wert wurde dem CSS2.1-Entwurf im Jahr 2002 hinzugefügt.

• IE 5.5, 6, 7, 8 (Q) Block-Level-Elemente unterstützen Inline-Block nur unvollständig. Wenn Sie ähnliche Effekte erzielen möchten, müssen Sie sie auf „Anzeige“ einstellen :inline zuerst. Verwenden Sie dann zoom:1, um

  auszulösen (dies ist der Grund für den Fehler im hasLayoutIE-Browser , darüber werde ich ausführlich schreiben). Wenn Sie für Inline-Elemente in IE 5.5, 6, 7 und 8 (Q) den Effekt eines Inline-Blocks erzielen möchten, müssen Sie diesen Attributwert nur direkt festlegen oder zoom: 1 usw. verwenden.

• Das Folgende gilt für IE 5.5, 6, 7, 8 (Q) Browser

• Anzeige des Inline-Elements:inline-block

  Sie müssen nur display:inline-block oder zoom:1; für das Inline-Element ausführen, um hasLayout auszulösen, und dann können Sie die Breite und Höhe des Inline-Elements festlegen.
  display:inline-block;
  
  zoom:1;*Das Hinzufügen von
  vor zoom bewirkt, dass dieses Attribut nur vom IE-Browser erkannt wird. Es gibt andere Möglichkeiten. Hier ist eine detaillierte Erklärung*

• Elementanzeige auf Blockebene:inline-block

  Element auf Blockebene löst hasLayout über display:inline-block aus, wodurch die Blockebene nicht erreicht wird -Element verfügen über die Funktion des Nicht-Zeilenumbruchs. Dies ist auch ein Ausdruck unvollständiger Unterstützung. Die Methode, dies auszugleichen, ist:
  
  display:inline; zoom:1;Konvertieren Sie es zuerst in ein Inline-Element und erstellen Sie es dann ein Layout haben.
  

• Wenn wir in Kombination mit modernen Browsern ein Element in ein Inline-Block-Level-Element konvertieren möchten, müssen wir nur Folgendes tun:

   `display:inline-block;`/*兼容现代浏览器，IE6、7 行内元素*/
   `*display:inline;`/*兼容IE6、7块级元素*/

  ;*zoom:1[Ein weiteres Problem, das durch Inline-Elemente verursacht wird] besteht darin, dass zwischen Inline-Elementen ein gewisser Leerraum vorhanden ist.
  Ich habe es nicht verstanden, als ich die letzte Notiz geschrieben habe, aber nachdem ich den Blog gelesen habe, den ich gerade empfohlen habe, verstehe ich es.
  Der Browser stellt Inline-Elemente so dar, als würde er die Wörter in einem Absatz oder das Wort wiedergeben. Wenn wir schreiben, gibt es ein Leerzeichen zwischen Hallo und Kumpel,
  

         <p>hello buddy</p>

  Beim Schreiben von Inline-Elementen wird jedes Inline-Element üblicherweise mit Zeilenumbrüchen umbrochen

         <span>hello</span>
         <span>buddy</span>

  Normalerweise wird bei mehreren aufeinanderfolgenden Leerzeichen (Leerzeichen, Zeilenvorschübe, Wagenrückläufe usw.) das Durchsuchen Der Prozessor wird kombiniert sie in ein einzelnes Leerzeichen um.

• So entfernen Sie Leerzeichen zwischen Inline-Elementen

• Verwenden Sie

  font-size< für das übergeordnete Element der Inline element 🎜>:0px;

  Außer bei Versionen vor IE6, 7 und safri5 kann diese Methode verwendet werden, um den Leerraum von Inline-Elementen zu entfernen.

           font-size:0px;

Führen Sie
• letter-spacing

  für das übergeordnete Element des Inline-Elements durch. Diese Methode kann den Leerraum zwischen den Inline-Elementen in Versionen vor safri5 entfernen . Der Leerraum zwischen Inline-Elementen hängt von der Schriftgröße ab. Je größer die Schriftgröße, desto größer ist die Lücke. Wenn der Absolutwert des negativen Werts des Buchstabenabstands größer ist als die Lückengröße, ist dies bei internen Inline-Elementen der Fall überlappen.
  
  

          letter-spacing:-2px;//这个2px等于元素之间的间隙

Führen Sie
• Leerzeichen für das übergeordnete Element des Inline-Elements aus
  Die obige Schreibmethode ist grundsätzlich kompatibel mit alle Browser.

   font-size:0;/* 所有浏览器 */
  letter-spacing:-5px;/* Safari 等不支持字体大小为 0 的浏览器 */
  `*letter-spacing:normal;`
  word-spacing:-1px;/* IE6、7 */

  Es ist zu beachten, dass zur Vermeidung von Konflikten zwischen Buchstabenabständen und Wortabständen in IE6 und 7 die Buchstabenabstände gehackt werden müssen.

• 由于这些文本属性都会继承下去，造成行内元素内部的文字内容受到影响，所以需要为行内元素内部重新设置字体属性值。

        font-size: 12px; letter-spacing: normal; word-spacing: normal;

  刚才推荐的那篇文章，总结了代码如下：
  .dib-wrap修饰行内元素的父级元素，.dib修饰行内元素，另外需要注意由于 inline-block 具有 inline 元素的特性，在垂直方向上很多时候我们并不希望元素以「vertical-align:baseline」方式来呈现，所以在「.dib-wrap」中统一重置为「vertical-align:top」即可

        .dib-wrap {
        font-size:0;/* 所有浏览器 */
        *word-spacing:-1px;/* IE6、7 */
        }
        .dib-wrap .dib{
        font-size: 12px;
        letter-spacing: normal;
        word-spacing: normal;
        vertical-align:top;
        }
        @media screen and (-webkit-min-device-pixel-ratio:0){
        /* firefox 中 letter-spacing 会导致脱离普通流的元素水平位移 */
        .dib-wrap{
        letter-spacing:-5px;/* Safari 等不支持字体大小为 0 的浏览器, N 根据父级字体调节*/
        }
        }
        .dib {
        display: inline-block;
        `*display:inline;`
        `*zoom:1;`
        }

【相关推荐】

1. 免费html在线视频教程

2. html开发手册

3. php.cn原创html5视频教程

Das obige ist der detaillierte Inhalt vonWas sind die Unterschiede zwischen display:none und Visibility:hidden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!