cari

Rumah  >  Soal Jawab  >  teks badan

Tingkah laku pelik dengan font-size:0px - Stack Overflow

Terdapat dua elemen img span dalam p.

1. Tetapkan saiz fon:0px

pada 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>

Simpan sebagai car1.html, dan hasil larian ialah 0.

2. Tetapkan saiz fon:0px

pada dua elemen anak 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>

Simpan sebagai car2.html, dan hasil larian ialah 6px.
Bagaimana untuk menerangkan tingkah laku ini?

怪我咯怪我咯2736 hari yang lalu776

membalas semua(2)saya akan balas

  • 巴扎黑

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

    Ini ialah kesan saiz fon pada teg img. Semakin besar saiz fon p lapisan luar yang mengelilingi elemen img, semakin besar margin bawahnya. Sebagai elemen sebaris, span tidak setinggi img dan boleh diabaikan. Perbezaan ketinggian antara e1 dan e2 ialah ruang antara img dan p. (Sudah tentu anda perlu mengulas keluar sempadan, dan hanya apabila p font-size:0 anda boleh mendapatkan e1-e2 sama dengan 0).

    balas
    0
  • 淡淡烟草味

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

    Tegaskan satu perkara: kes 1 hendaklah 2

    Tiga mata: Ketinggian
    1.p disokong oleh 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. Secara lalai, ketinggian baris ialah biasa (1.1-1.2 ditentukan oleh penyemak imbas), yang ditentukan oleh saiz fon

    3.offsetHeight juga termasuk sempadan🎜 🎜Jadi, mari kita lihat: 🎜Kes 1: Tetapkan font-size:0 dalam elemen induk p pada masa ini, span diwarisi font-size:0, tetapi sempadan atas dan bawah ialah 2px, jadi p's offsetHeight=tinggi kandungan + sempadan, ketinggian kandungan=img's offsetHeight+span's 2px, jadi e1. offsetHeight-e2.offsetHeight= 2 adalah betul🎜Kes 2: Tetapan font-size:0; img dan span pada anak elemen masing-masing dan Sama seperti di atas, tetapi font-s p lalai kepada 16px line-height nilai ditentukan oleh penyemak imbas Jadi ketinggian kandungannya berubah dan nilai akhir ditentukan oleh penyemak imbas. 🎜

    balas
    0
  • Batalbalas