recherche

Maison  >  Questions et réponses  >  le corps du texte

Comportement étrange avec font-size:0px

Il y a deux éléments img span dans un p.

1. Définir la taille de la police : 0px

sur p 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title> relationship between height  and font-size </title>
    <style type="text/css">
        *{
            margin:0px;
            border:0px;
            box-sizing:border-box;
        }
        p{
            border:1px solid black;
            font-size:0px;
        }
        img{
            border:1px solid red; 
        }
        span{
            border:1px solid blue;             
        }
    </style>  
</head>
<body>
    <p>
        <img src="https://i.stack.imgur.com/abMWp.jpg" alt=""><span>it is a car</span>
    </p>
    <script language="JavaScript">
        var e1=document.getElementsByTagName("p")[0];
        var e2=document.getElementsByTagName("img")[0];
        alert("Target height is "+(e1.offsetHeight-e2.offsetHeight).toString());
    </script>
</body>
</html>

Enregistrez-le sous car1.html et le résultat est 0.

2. Définissez font-size:0px

sur les deux éléments enfants de p 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title> relationship between height  and font-size </title>
    <style type="text/css">
        *{
            margin:0px;
            border:0px;
            box-sizing:border-box;
        }
        p{
            border:1px solid black;
        }
        img{
            border:1px solid red; 
            font-size:0px;
        }
        span{
            border:1px solid blue;  
            font-size:0px;           
        }
    </style>  
</head>
<body>
    <p>
        <img src="https://i.stack.imgur.com/abMWp.jpg" alt=""><span>it is a car</span>
    </p>
    <script language="JavaScript">
        var e1=document.getElementsByTagName("p")[0];
        var e2=document.getElementsByTagName("img")[0];
        alert("Target height is "+(e1.offsetHeight-e2.offsetHeight).toString());
    </script>
</body>
</html>

Enregistrez-le sous car2.html, et le résultat d'exécution est 6px.
Comment expliquer ce comportement ?

怪我咯怪我咯2736 Il y a quelques jours775

répondre à tous(2)je répondrai

  • 巴扎黑

    巴扎黑2017-05-19 10:20:44

    C'est l'effet de la taille de la police sur la balise img. Plus la taille de police p de la couche externe entourant l’élément img est grande, plus la marge inférieure sera grande. En tant qu'élément en ligne, span n'est pas aussi élevé que img et peut être ignoré. La différence de hauteur entre e1 et e2 est l'espace entre img et p. (Bien sûr, vous devez commenter la bordure, et ce n'est que lorsque p font-size:0 que vous pouvez obtenir e1-e2 égal à 0).

    répondre
    0
  • 淡淡烟草味

    淡淡烟草味2017-05-19 10:20:44

    Soulignez une chose : le cas 1 devrait être le cas 2

    Trois points : La hauteur de
    1.p est prise en charge par line-height. line-height撑起。
    2.默认情况下，line-height为normal(1.1-1.2由浏览器决定)，又是由font-size决定
    3.offsetHeight还包括border

    所以，我们再来看：
    情况1：在父元素p设置font-size:0;此时，span继承font-size:0,但border上下和2px，所以，p的offsetHeight=内容高度+border,内容高度=img的offsetHeight+span的2px，所以e1.offsetHeight-e2.offsetHeight=2才对
    情况2：在子元素上分别设置font-size:0;img和span的情况和上述一样，但是p的font-size默认为16px;line-height2. Par défaut, line-height est normal (1.1-1.2 est déterminé par le navigateur), qui est déterminé par font-size.

    3.offsetHeight inclut également une border🎜 🎜Alors, regardons : 🎜Cas 1 : définissez font-size:0 dans l'élément parent p à ce moment-là, span hérite ; font-size:0, mais border haut et bas font 2 pixels, donc offsetHeight=hauteur du contenu de p + border, content height = offsetHeight de img + 2px de span, donc e1. offsetHeight-e2.offsetHeight= 2 est correct🎜Cas 2 : définition de font-size:0 ; img et span sur l'enfant éléments respectivement et Identique à ci-dessus, mais la font-size de p est par défaut 16px la line-height La valeur est déterminée par le navigateur. Ainsi, la hauteur de son contenu change et la valeur finale est déterminée par le navigateur. 🎜

    répondre
    0
  • Annulerrépondre