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

資訊專欄INFORMATION COLUMN

深入理解css之line-height

miya / 668人閱讀

摘要：的應(yīng)用大部分時候，我們設(shè)置，都是為了垂直居中對齊。然后我們給設(shè)置，這樣我們就可以重置設(shè)置的，又因為保持了內(nèi)聯(lián)特性，因此我們可以設(shè)置以及產(chǎn)生，從而實現(xiàn)近似垂直居中對齊。

前言

行高，顧名思義是一行文字的高度，而從規(guī)范上來說則是兩行文字基線之間的距離。行高是作用在每一個行框盒子(line-box)上的，而行框盒子則是由內(nèi)聯(lián)盒子組成，因此，行高與內(nèi)聯(lián)元素可以說是非常緊密，行高直接決定了內(nèi)聯(lián)元素的高度（注意：這里的內(nèi)聯(lián)元素不包括替換元素）；對于塊級元素和替換元素，行高是無法決定最終高度的，只能決定行框盒子的最小高度。

x、x-height以及ex

字母x在css里面扮演著一個很重要的角色，因為字母x的下邊緣就是基線所在的位置。而x-height指的就是字母x的高度，ex是一個尺寸單位，其大小是相對字母x的來計算的，即1ex就表示1個字母x的高度。如下圖所示：

我們在平時的開發(fā)中很少用到ex，因為ex是個相對單位。對于相對的東西，我們總是感覺很難控制，但這并不表明ex就一點用處都沒有。我們可以利用ex就是一個x-height的特性來實現(xiàn)圖標與文字的垂直居中，這樣如論字體大小如何變化，都不會影響垂直居中的效果。代碼如下：

.icon-arrow {
    display: inline-block;
    width: 20px;
    height: 1ex;
    background: url(down.png) no-repeat center;
    background-size: contain;
}


    我是一段文本

效果如下：

line-height的屬性值

normal

數(shù)字

長度

百分比

normal

normal為line-height的默認值，但并不是一個固定的值，而是會受font-family的影響，對于“微軟雅黑”，其值為1.32；而對于“宋體”，其值為1.141。由于不同操作系統(tǒng)，不同瀏覽器所使用的字體不一樣，所以最終line-height的具體值會不一樣，因此這個屬性作用不大。

數(shù)字

我們可以設(shè)置line-height: 1.5。其意思是說line-height的最終大小為 1.5* font-size，一般建議使用該值來設(shè)置line-height。

長度

長度用的最多的就是px與em，em跟數(shù)字一樣，都是相對于font-size來計算的。

百分比

百分比也是相對于font-size來計算的。

相信細心的小伙伴已經(jīng)發(fā)現(xiàn)了，數(shù)字，em以及百分比都是相對于font-size來計算的，既然這樣，為什么還要多此一舉設(shè)置另外兩個屬性呢。原因就在于它們的繼承方式是不一樣的。對于數(shù)字，父元素設(shè)置了1.5，則子元素也是會繼承1.5。但如果父元素設(shè)置的是1.5em，假設(shè)父元素font-size是20px，則父元素line-height是30px，同時子元素的line-height也是30px，也就是說子元素繼承的是父元素計算后的line-height值。因此，這也是為什么上面推薦使用數(shù)字而不是em或百分比的原因了。

行距與半行距

很多開發(fā)人員開還原設(shè)計圖的時候，往往沒有考慮到行距的影響，因此開發(fā)出來的頁面很多時候都與設(shè)計圖不符合，總會差那么幾個像素。那么什么是行距呢，我們可以想象一下在文字排版的時候，如果行與行之間的間距為0，則文字是會緊緊貼在一起的，因此，行距就是用來協(xié)助排版的。行距的計算為：line-height - em-box，em-box指的是1em的大小，因此行距可以表示為：line-height - font-size，假設(shè)line-height為1.5，font-size為20，則行距為：
1.5*20 - 20 = 10，則最終行距為10，而這個行距會平均作用于文字的上邊和下邊。但em-box我們是無法感知這個盒子在哪的，而內(nèi)容區(qū)域我們則可以理解為我們選中文字后的背景色所在區(qū)域，而當字體是宋體的時候，內(nèi)容區(qū)域和em-box是等高的，因此我們可以利用此揪出ex-box的藏身之處。如下圖所示：

正是因為行距的存在，我們給元素設(shè)置margin值時，要減去相應(yīng)的半行距值，這樣才能比較精確地還原設(shè)計圖。

line-height的應(yīng)用

大部分時候，我們設(shè)置line-height，都是為了垂直居中對齊。但這里的居中，只能說是近似居中，從上面的圖可以看出：行距是上下均分的，但是內(nèi)容區(qū)域不是，一般來說，文字都是偏下的。我們平時設(shè)置字體一般都是12-20像素，這么小的像素值，給出line-height值后，由于上下相差不大，因此感覺上是垂直居中的。line-height除了可以作為單行文本的居中對齊外，多行文本也是可以的，代碼如下：

.box {
    width: 400px;
    line-height: 400px;
    padding: 0 10px;
    border: 1px solid #ccc;

}
.text {
    display: inline-block;
    line-height: 1.3;
    font-size: 14px;
    vertical-align: middle;
}


    這是一段很長很長的文字，這是一段很長很長的文字，這是一段很長很長的文字，這是一段很長很長的文字，這是一段很長很長的文字

效果如下：

前面的文章有說過，每一個行框盒子前面都有一個看不見的，規(guī)范稱之為“strut”的東西。我們給.box設(shè)置了line-height為400px，則這個“strut”的line-height也會繼承為400px。然后我們給.text設(shè)置inline-block，這樣我們就可以重置.box設(shè)置的line-height，又因為ineline-block保持了內(nèi)聯(lián)特性，因此我們可以設(shè)置vertical-align以及產(chǎn)生“strut”，從而實現(xiàn)近似垂直居中對齊。

總結(jié)

介紹了字母x在css中的地位以及ex的應(yīng)用

line-height各種不同的屬性值以及數(shù)字、em和百分比的不同之處

行距在line-height的作用

line-height實現(xiàn)單行垂直居中和多行垂直居中

參考：
《css世界》
https://developer.mozilla.org...

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

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

相關(guān)文章

  • 【學(xué)習(xí)筆記】CSS深入理解之line-height

    摘要：內(nèi)聯(lián)盒子的高度由決定，限制包含盒子的高度，兩者一致，即把內(nèi)聯(lián)盒子安放在包含盒子內(nèi)，排除其他外界干擾。這時候由內(nèi)聯(lián)盒子模型可知，行間距是等分的，中間部分是，達到看似居中的效果。可以得到結(jié)論和設(shè)置一致，并非是完全垂直，除非為。 張鑫旭的CSS深入理解之line-height學(xué)習(xí)筆記 line-height的定義 行高：兩行文字基線之間的距離 為何是基線：基線是定義所有字線的根本 不同字體...

    Stardustsky 評論0 收藏0

  • 【前端Talkking】CSS系列——CSS深入理解之line-height

    摘要：按照定義來解釋，就是兩行文字之間基線之間的距離。了解完基線的定義后，我們接著來聊行高。上面我們說過，行高就是兩條基線的之間的距離，如下圖所示。 1.寫在前面 兩個多周的時間沒有寫文章了，手好癢好癢，趁著公司在裝修，從上周末到本周都在家辦公，同時公司的項目并不緊急，于是抽著時間梳理了一下CSS中關(guān)于行高line-height的理解，今天發(fā)布出來，大家準備好了嗎？ 2.基本概念 2.1行高...

    peixn 評論0 收藏0

  • 深入理解css之vertical-align

    摘要：但實質(zhì)上，只要是內(nèi)聯(lián)元素，這兩個元素都會同時在起作用。而解決方案可以有以下幾種元素不使用基線對齊，可以改為對齊元素塊狀化設(shè)置為設(shè)置為總結(jié)講解了的各類屬性值及其效果起作用的前提是內(nèi)聯(lián)元素與都是同時作用在內(nèi)聯(lián)元素上的 前言 vertical-align用來指定行內(nèi)元素（inline）或表格單元格（table-cell）元素的垂直對齊方式。也就是說，對于塊級元素，vertical-align...

    cgh1999520 評論0 收藏0

  • 【學(xué)習(xí)筆記】CSS深入理解之vertical-align

    摘要：上例中，左邊盒子的基線為其底邊緣，右邊盒子的基線為的基線將右邊盒子的行高設(shè)置為，即這個的高度為，位置處于中間。 vertical-align的值 線類：baseline（默認）, top, bottom, middle 文字類：text-top, text-bottom 上標下標類：sub, super 數(shù)值：1px, 1em - 在baseline對齊的基礎(chǔ)上上下偏移一定數(shù)值 百分...

    ermaoL 評論0 收藏0

發(fā)表評論

0條評論

miya

男|高級講師

TA的文章

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