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

資訊專欄INFORMATION COLUMN

CSS行高（line-height）及文本垂直居中原理

233jl / 1552人閱讀

摘要：默認情況下一行文本的行高分為上間距，文本的高度，下間距，并且上間距是等于下間距的，所以文字默認在這一行中是垂直居中的。

在CSS中，line-height 屬性設置兩段段文本之間的距離，也就是行高，如果我們把一段文本的line-height設置為父容器的高度就可以實現(xiàn)文本垂直居中了，比如下面的例子：


    
    
       
       Document
       


   

       文本垂直居中原理

這樣，span標簽中的文字就相對于div垂直方向居中了，想要文本水平居中設置text-align：center即可。

那么，它怎么就垂直居中了？為了弄清楚它，下面我們先來看幾個概念。

1. 行框

在瀏覽器中，會將給每一段文本生成一個行框，行框的高度就是行高。行框由上間距、文本高度、下間距組成，上間距的距離與下間距的距離是相等的。

默認情況下一行文本的行高分為：上間距，文本的高度，下間距，并且上間距是等于下間距的，所以文字默認在這一行中是垂直居中的。

2. 文本中的幾條線

幾條線與行高的關系圖解：

文本的行高也可以看成是基線到基線的距離。

如果一段文本的高度為16px，如果給他設置line-height的高度為200，那么相當于，文本的上下間距的高度增加了，但是文本本身的高度依然是16是不變的，并且一直默認在行框中垂直居中，而上間距和下間距平分了200px的高度并且減去文本本身的高度。所以，容器被這一行文本占滿，而本身文字在自己的一行中是垂直居中的，所以看起來就像是在容器中垂直居中。

3. Chrome瀏覽器的默認值

谷歌瀏覽器字體的默認大小是：16px，字體的最小值為：12px，默認行高為：18px；默認情況下如果沒有給div設置高度，那么這個div的高度會比其中文本的大小大一點（這個大多少現(xiàn)在沒有辦法確定）

4. 行高的單位

px(像素)
設置起來是最直接的，同時也最方便的。

%(百分號)
如果line-height單位設置為%，那么將來在計算的時候，基數(shù)是當前標簽中的文本的字體的大小。
如果是%,%之前的數(shù)據(jù)一定是整數(shù) ：150% ，200%

em
效果跟%是一樣一樣的。
注意：一行em的大小相當于是當前標簽中的font-size的大小。
如果是em,em之前的數(shù)據(jù)一定是：1.2em ,1.5em ,2em

不帶單位
如果不涉及到繼承，那么帶不帶單位（em）都是一樣的效果，但是如果涉及到繼承的話，那么就有很大的區(qū)別了：

如果單位是em，那么將來在繼承的時候，我們的瀏覽器會先將行高對應的具體的數(shù)值計算出來以后再繼承。

如果沒有單位，那么將來在繼承的時候，我們的瀏覽器會先將line-height這個屬性繼承給子元素，再在子元素的font-size來計算。line-height: 1.5;

5. 行高可以被繼承

我們知道，CSS的三大特性是繼承、層疊、優(yōu)先級。line-height也是可以被繼承的，如下面的示例：




    
    Document
    


    

        中國人

在不給div設置行高的情況下，span標簽的文字行高默認為18

接著我們給div設置一個行高等于20px

div {
    line-height: 20px;
}
span {
    display: inline-block;
}

我們再來看看span標簽的的變化

而且，不管我們給行高設置什么單位（px、%、em、不帶單位）都可以被繼承。

6. 行高計算的基數(shù)

如果行高的單位不是px，那么將來行高要進行計算：這個計算需要一個基數(shù)，這個基數(shù)是當前標簽的字體大小，而不是瀏覽器默認字體大小。以上面的例子為例，我們并沒有設置任何字體大小，此時我們把line-height設置為150%，那么文字行高將變?yōu)?4px（16px*1.5=24）。

div {
       line-height: 150%;
}

效果如下

此時我們在給div設置一個font-size等于20px：

div {
   line-height: 150%;
   font-size:20px;
}

那么文字行高將會變成30px，20px*1.5=30px;

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115232.html

相關文章

  • 《CSS世界》筆記三：內聯(lián)元素與對齊

    摘要：上一篇世界筆記二盒模型四大家族下一篇世界筆記四流的保護與破壞寫在前面在頁面布局中，內聯(lián)元素的垂直對齊是比較常見和基礎的布局需求，但是我們往往會因為垂直對齊中的，而頭疼不已。 上一篇：《CSS世界》筆記二：盒模型四大家族下一篇：《CSS世界》筆記四：流的保護與破壞 寫在前面 在頁面布局中，內聯(lián)元素的垂直對齊是比較常見和基礎的布局需求，但是我們往往會因為垂直對齊中的1px，2px而頭疼不已...

    HtmlCssJs 評論0 收藏0

  • 浮動的補充丶文本和字體屬性丶background丶定位

    摘要：英語為了防止用戶電腦里面，沒有微軟雅黑這個字體。因為絕對定位脫離標準流，影響頁面的布局。一丶浮動的補充 　　浮動的特性: 　　　　1.浮動的元素脫標 　　　　2.浮動的元素互相貼靠 　　　　3.浮動的元素有字圍效果 　　　　4.浮動的元素有收縮的效果 　　　　前提是標準文檔流,margin的垂直方向會出現(xiàn)塌陷問題 　　　　如果盒子居中:margin: 0auto;如果盒子浮動了,margin...

    番茄西紅柿 評論0 收藏0

  • CSS居中那些事

    摘要：定寬塊狀元素滿足定寬和塊狀兩個條件的元素是可以通過設置左右值為來實現(xiàn)居中的。設置方法改變塊級元素的為類型設置為行內元素顯示，然后使用來實現(xiàn)居中效果。 做前端這一年多來，其實一直都是偏向于js前后端，css什么的總是抱著夠用就好的心態(tài)，從來沒有系統(tǒng)的學習或總結過，結果現(xiàn)在的水平也一直停留在夠用的階段。感覺作為一名合格的前端工程師，不能讓css成為自己的短板，于是簡單的總結一下，高手繞路。...

    dingding199389 評論0 收藏0

  • 深入理解css之line-height

    摘要：的應用大部分時候，我們設置，都是為了垂直居中對齊。然后我們給設置，這樣我們就可以重置設置的，又因為保持了內聯(lián)特性，因此我們可以設置以及產生，從而實現(xiàn)近似垂直居中對齊。 前言 行高，顧名思義是一行文字的高度，而從規(guī)范上來說則是兩行文字基線之間的距離。行高是作用在每一個行框盒子(line-box)上的，而行框盒子則是由內聯(lián)盒子組成，因此，行高與內聯(lián)元素可以說是非常緊密，行高直接決定了內聯(lián)元...

    miya 評論0 收藏0

  • CSS魔法堂：深入理解line-height和vertical-align

    摘要：下的屬性值詳解以下內容均在中測試默認對齊方式這里作為參考系，而它的就是所要對齊的了。沒有任何變化。那改變又如何呢為了讓的清晰可見，特意添加一個的包裹著。 前言 一直聽說line-height是指兩行文本的基線間的距離，然后又說行高等于行距，最近還聽說有個叫行間距的家伙，@張鑫旭還說line-height和vertical-align基情四射，貴圈真亂啊。。。。。。于是通過本篇來一探究竟...

    avwu 評論0 收藏0

發(fā)表評論

0條評論

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