Quelles sont les différences entre display:none et visibilité:hidden

Ce que j'ai répondu à l'époque, c'est que les deux peuvent masquer des éléments, mais en définissant l'élément sur display:none après cela, l'espace de flux de documents précédemment occupé par l'élément sera annulé à en même temps, mais visibility:hidden; fait que l'élément occupe toujours de l'espace même s'il n'est pas affiché.
C'était un entretien téléphonique. Après avoir répondu à la question, l'autre partie n'a pas continué à poser des questions sur les connaissances liées à l'affichage.
En y réfléchissant maintenant, j'ai vraiment de la chance. Si quelqu'un me pose des questions sur les connaissances liées à l'affichage, je dois faire attention à ce à quoi je dois faire attention lorsque j'utilise l'affichage : le bloc en ligne. Je ne pourrai certainement pas me battre.

Il y a quelques jours, lorsque je m'entraînais à écrire la navigation , j'avais toujours besoin de définir certains éléments en ligne ou de niveau bloc en éléments de niveau bloc en ligne, alors j'ai pensé à display:inline-block, mais j'ai trouvé qu'il s'agit d'un
attribut valeur qui a encore une certaine connaissance. Recommandez cet article.

• IE5.5 a commencé à prendre en charge le bloc en ligne, mais vous devez savoir qu'IE5.5 a été officiellement lancé en 2000, mais

  W3C Cet attribut la valeur a été ajoutée au brouillon CSS2.1 en 2002.

• Les éléments de niveau bloc IE 5.5, 6, 7, 8 (Q) ont une prise en charge incomplète du bloc en ligne. Si vous souhaitez obtenir des effets similaires, vous devez le configurer pour qu'il s'affiche. :inline d'abord. Ensuite, utilisez zoom:1 pour déclencher

  (c'est la raison du bug dans le hasLayoutnavigateur IE , j'en parlerai en détail). Pour les éléments en ligne dans IE 5.5, 6, 7 et 8 (Q), si vous souhaitez obtenir l'effet de bloc en ligne, il vous suffit de définir directement cette valeur d'attribut ou d'utiliser zoom:1, etc.

• Les éléments suivants sont destinés aux navigateurs IE 5.5, 6, 7, 8 (Q)

• Inline element display:inline-block

  Il vous suffit d'effectuer display:inline-block ou zoom:1; sur l'élément en ligne pour déclencher hasLayout, puis vous pouvez définir la largeur et la hauteur de l'élément en ligne.
  display:inline-block;
  
  zoom:1;*Ajouter
  devant le zoom consiste à rendre cet attribut reconnu uniquement par le navigateur IE. Il existe d'autres moyens. Voici une explication détaillée*

• Affichage de l'élément au niveau du bloc :inline-block

  L'élément au niveau du bloc déclenche hasLayout via display:inline-block, ce qui ne fait pas le niveau du bloc élément sans rupture de ligne. C'est aussi une manifestation d'un support incomplet. La méthode pour compenser est la suivante :
  
  display:inline; zoom:1;Convertissez-le d'abord en un élément en ligne, puis créez-le. avoir une mise en page.
  

• Combiné avec les navigateurs modernes, lorsque nous voulons convertir un élément en un élément de niveau bloc en ligne, tout ce que nous devons faire est de :

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

  ;*zoom:1[Un autre problème causé par les éléments en ligne] est qu'il y aura une certaine marge vide entre les éléments en ligne. C'est pourquoi.
  Je ne l'ai pas compris quand j'ai écrit le dernier message, mais après avoir lu le blog que je viens de recommander, je le comprends.
  Le navigateur restitue les éléments en ligne comme s'il rendait les mots d'un paragraphe, ou le mot , lorsque nous écrivons, il y a un espace entre bonjour et mon pote,
  

         <p>hello buddy</p>

  in Lors de l'écriture d'éléments en ligne, chaque élément en ligne sera généralement enveloppé de sauts de ligne

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

  Normalement, pour plusieurs caractères d'espacement consécutifs (espaces, sauts de ligne, retours chariot, etc.), la navigation Le processeur combinera les en un seul caractère d'espacement.

• Comment supprimer l'espace blanc entre les éléments en ligne

• Utilisez

  font-size< sur l'élément parent de l'inline element 🎜>:0px;

  Sauf pour les versions antérieures à IE6, 7 et safri5, cette méthode peut être utilisée pour supprimer l'espace blanc des éléments en ligne.

           font-size:0px;

Effectuez un
• letter-spacing

  sur l'élément parent de l'élément en ligne. Cette méthode peut supprimer l'espace blanc entre les éléments en ligne dans les versions antérieures à safri5. L'espace blanc entre les éléments en ligne est lié à la taille de la police. Plus la taille de la police est grande, plus l'espace est grand. Lorsque la valeur absolue de la valeur négative de l'espacement des lettres est supérieure à la taille de l'espace, les éléments en ligne internes le seront. chevaucher.
  
  

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

Effectuer
• un espace blanc sur l'élément parent de l'élément en ligne
  La méthode d'écriture ci-dessus est fondamentalement compatible avec tous les navigateurs.

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

  Il convient de noter que afin d'éviter les conflits entre l'espacement des lettres et l'espacement des mots dans IE6 et 7, l'espacement des lettres doit être piraté.

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

        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视频教程

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!