国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

從一個內(nèi)聯(lián)元素布局引發(fā)對line-height的探討

seal_de / 3169人閱讀

摘要:從一個內(nèi)聯(lián)元素布局引發(fā)對的探討一前言這個屬性對于各位前端的小伙伴來說并不陌生。對于塊級元素,它指定元素行盒的最小高度。對于非替代的元素,它用于計算行盒的高度。如存在屬性的六總結(jié)以上就是本人對行內(nèi)布局以及的一些思考總結(jié)。

從一個內(nèi)聯(lián)元素布局引發(fā)對line-height的探討 一、前言

line-height這個屬性對于各位前端的小伙伴來說并不陌生。在之前寫頁面的時候碰到過一個該屬性相關(guān)的問題,在查閱資料后決定跟大家分享一下我所理解的line-height。所講述的內(nèi)容不一定都是正確的,僅供參考。

二、line-height 定義 文檔規(guī)范

line-height CSS 屬性用于設(shè)置多行元素的空間量,如多行文本的間距。對于塊級元素,它指定元素行盒(line boxes)的最小高度。對于非替代的 inline 元素,它用于計算行盒(line box)的高度。

屬性值
屬性 描述
normal 默認值。合理的行間距。根據(jù)瀏覽器和字體"font-family"不同而不同。
number 設(shè)置數(shù)值,此數(shù)值會與當前的字體尺寸相乘來設(shè)置行間距。
length 設(shè)置固定的行間距。
% 基于當前字體尺寸的百分比間距。
inherit 規(guī)定應(yīng)該從父元素繼承l(wèi)ine-height屬性的值
三、遇到的問題

相信大家都有寫過這樣一個布局 一個大標題,然后接著一個小標題,需要垂直居中

.title {
    font-size: 20px;
    line-height: 20px;
}

.sub-title {
    font-size: 14px;
    line-height: 20px;
}

大標題 小標題

兩個相鄰的內(nèi)聯(lián)元素,字體一大一小。暢想的結(jié)果是兩個 span 的高度都是20px, div的高度也是20px,多么完美,但結(jié)果往往不近人意....

div的高度為22.4 .title 的高度為26.4 .sub-title 的高度為19

那么問題來了:為什么沒有一個元素的高度為20?

然而 規(guī)范 告訴我們,對于非替代的 inline 元素,它用于計算行盒(line box)的高度。

這里引出了兩個概念:替代元素行盒(line-box)

替代元素

替代元素是指內(nèi)容可以替換的元素,實際上就是content box可以被替換的元素。如存在src=""屬性的

  • 六、總結(jié)

    以上就是本人對行內(nèi)布局以及l(fā)ine-height的一些思考總結(jié)。

    另外也可以使用flex布局一把梭,就沒這么多事了~。

    參考

    CSS深入理解vertical-align和line-height的基友關(guān)系

    CSS行高line-height的一些深入理解及應(yīng)用

    文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

    轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/54250.html

    相關(guān)文章

    • 一個內(nèi)聯(lián)元素布局引發(fā)line-height探討

      摘要:從一個內(nèi)聯(lián)元素布局引發(fā)對的探討一前言這個屬性對于各位前端的小伙伴來說并不陌生。對于塊級元素,它指定元素行盒的最小高度。對于非替代的元素,它用于計算行盒的高度。如存在屬性的六總結(jié)以上就是本人對行內(nèi)布局以及的一些思考總結(jié)。 從一個內(nèi)聯(lián)元素布局引發(fā)對line-height的探討 一、前言 line-height這個屬性對于各位前端的小伙伴來說并不陌生。在之前寫頁面的時候碰到過一個該屬性相關(guān)的...

      henry14 評論0 收藏0
    • css文本模型漫游指南

      摘要:默認情況下,行內(nèi)元素不會以新行開始,而塊級元素會新起一行。常見的內(nèi)聯(lián)元素有分類替換元素在中,可替換元素的展現(xiàn)效果不是由來控制的。這些元素是一種外部對象,它們外觀的渲染,是獨立于的。 前言 在寫作本文章前原本打算只是復(fù)習(xí)一下 line-height 和 vertical-height 這兩個屬性而已, 結(jié)果發(fā)現(xiàn)掉進了一個大坑網(wǎng)上有很多篇文章看的我云里霧里的, 最后決定還是從頭來一遍吧, ...

      cncoder 評論0 收藏0
    • css文本模型漫游指南

      摘要:默認情況下,行內(nèi)元素不會以新行開始,而塊級元素會新起一行。常見的內(nèi)聯(lián)元素有分類替換元素在中,可替換元素的展現(xiàn)效果不是由來控制的。這些元素是一種外部對象,它們外觀的渲染,是獨立于的。 前言 在寫作本文章前原本打算只是復(fù)習(xí)一下 line-height 和 vertical-height 這兩個屬性而已, 結(jié)果發(fā)現(xiàn)掉進了一個大坑網(wǎng)上有很多篇文章看的我云里霧里的, 最后決定還是從頭來一遍吧, ...

      Freelander 評論0 收藏0

    發(fā)表評論

    0條評論

    最新活動
    閱讀需要支付1元查看
    <