简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Comportement étrange avec font-size:0px
怪我咯
怪我咯 2017-05-19 10:18:44
0
2
739

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 ?

怪我咯
怪我咯

走同样的路，发现不同的人生

répondre à tous(2)
巴扎黑
巴扎黑2017-05-19 10:20:44 2 plancher

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).

Comme +0
Ajouter une réponse
淡淡烟草味
淡淡烟草味2017-05-19 10:20:44 1 plancher

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. 🎜
Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！