国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

減小字體大小如何導(dǎo)致高度增加?
P粉947296325
P粉947296325 2023-11-23 12:42:17
[CSS3討論組]

我有一個(gè)具有特定行高的塊,我在其中插入帶有 ::before 偽元素的內(nèi)容。

.block::before {
  content:'text here';
}

這個(gè)效果很好。但是,如果我也給內(nèi)容設(shè)置較小的字體大小

.block::before {
  font-size:.6em;
  content:'text here';
}

方塊實(shí)際上變得更高了。這是為什么?


.container {
    display:inline-block;
}
.lorem, .ipsum, .dolor, .sit {
    line-height:3em; border:1px solid green
}
.ipsum:before {
    content:'world!';
}
.sit:before {
    font-size:.6em;
    content:'world!';
}
<div class="container">
    <div class="lorem">Hello</div>
</div>
<div class="container">
    <div class="ipsum"></div>
</div>
<hr style="clear:both"/>
<div class="container">
    <div class="dolor">Hello</div>
</div>
<div class="container">
    <div class="sit"></div>
</div>


頂行沒有字體大小更改,底行有。

現(xiàn)在我發(fā)現(xiàn)一個(gè)可能的解決辦法就是將偽元素的line-height設(shè)置為0。或者到1em?;蛘呱踔恋?normal。那么發(fā)生了什么?通過將字體大小設(shè)置為 .6em 是否將 line-height 設(shè)置為一些奇怪的值?為什么?

PS 雖然這看起來像是重復(fù)的(請參閱右側(cè)的列表),但到目前為止我讀過的答案都沒有解釋為什么設(shè)置 line-height:normal 可以解決問題。一定發(fā)生了一些事情,隱式地將行高設(shè)置為更大的值。這就是我想要找出的答案。


P粉947296325
P粉947296325

全部回復(fù)(2)
P粉714844743

編輯:這個(gè)問題最近引起了很多新的關(guān)注,因此這里進(jìn)行了更新以使其更有用。


Alohci 的解決方案是正確的,但對于更傾向于圖形化的人來說可能不是絕對清楚。

所以請?jiān)试S我用圖片來澄清一下解決方案。

首先,line-height 繼承為其計(jì)算的大小,因此雖然它是以 em 單位指定的,但子級將繼承以像素為單位的值。例如,如果字體大小為 20px 且行高為 3em,則行高將為 60 像素,即使對于具有不同字體大小的后代(除非他們指定其自己的行高)。

現(xiàn)在我們假設(shè)字體帶有 1/4 下降部。也就是說,如果您有 20px 字體,則下降部分為 5 像素,上升部分為 15 像素。然后將剩余的行高(在本例中為 40 像素)在基線上方和下方均分,如下所示。

對于較小字體(0.6em 或 12 像素)的塊,行高的剩余量為 60-12 或 48 像素,它也被平均劃分:基線上方 24 個(gè),基線下方 24 個(gè)。

然后,如果我們將兩種字體組合在同一基線上,您將看到行高沒有以相同的方式劃分,因此包含塊的總高度會增加,即使兩個(gè)行高都是 60 像素。

希望這能解釋一切!

P粉470645222

.lorem、.ipsum、.dolor 和 .sit 框的高度都是它們包含的單行框的高度。

每個(gè)行框的高度是該行的支柱和該行中的文本的基線之上的高度+基線之下的最大高度的最大值。因?yàn)橹е臀谋驹诨€上對齊。

為了清楚起見,下面的高度(以em為單位)是指整個(gè)容器(即body元素)的字體大小

在 .ipsum 中(字體大小為 1em),支柱和文本的基線以上高度為 1em(上半部領(lǐng)先)+ 13/16em(上升部分,大約),高度基線以下是 1em(半行前)+ 3/16em(下降部分,大約)+ 1em(下半行前),總共 3em。

在.sit(字體大小為0.6em)中,基線以上的高度是[1em(上半部前導(dǎo))+ 13/16em(上升部分,大約)支柱]和[1.2]中的最大值em(上半部分領(lǐng)先)+ 0.6 x 13/16em(上升部分,大約)],基線以下的高度是[1em(下半部分領(lǐng)先)+ 3/16em(上升部分)中的最大值下降部分,大約)用于支柱]和[1.2em(下半部前導(dǎo))+ 0.6 x 3/16em(下降部分,大約)用于文本]。

對其進(jìn)行評估并轉(zhuǎn)換為小數(shù),得出基線以上 1.8125em,基線以下 1.3125em,總計(jì) 3.125em,大于 .ipsum 的 3em。

最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng):公益在線php培訓(xùn),幫助PHP學(xué)習(xí)者快速成長!
關(guān)注服務(wù)號 技術(shù)交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時(shí)隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://www.miracleart.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號