成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

淺談line-height

zombieda / 1141人閱讀

摘要：與高度由上面的內(nèi)容可以總結(jié)出的高度取決與其下屬的中最高的元素。的最終表現(xiàn)是通過實現(xiàn)的，而無論所占據(jù)的高度是多少無論比文字大還是比文字小，其占據(jù)的空間都是與文字內(nèi)容公用水平中垂線的。

基礎知識

有4種模型，分別是

塊，塊盒模型 containing boxing,包括line

行內(nèi)盒模型 inline boxing ,包含content

行模型 line boxing,包含inline,line高度是由最高的inline元素決定.

內(nèi)容區(qū)域 content area

這部分內(nèi)容可以著重看 這里有詳細的介紹。

line-height與line boxes高度

由上面的內(nèi)容可以總結(jié)出line boxes 的高度取決與其下屬的inline boxes 中最高的元素。

對于像input這樣的元素,在不同瀏覽器上line-height屬性表現(xiàn)是不同,參考Line-Height Doesn’t Work As Expected On Inputs
垂直居中的特性 
行高還有一個特性，叫做垂直居中性。line-height的最終表現(xiàn)是通過line boxes實現(xiàn)的，而無論line boxes所占據(jù)的高度是多少（無論比文字大還是比文字?。?，其占據(jù)的空間都是與文字內(nèi)容公用水平中垂線的。  ----張鑫旭的博文

我們經(jīng)?？吹揭环N垂直居中的方法,那就是讓height和line-height 相同

    text-vertical{
        height:30px;
        line-height:30px;
    }

其實在這里起作用的是line-height , 只要設置好了line-height ,在不設置height 的情況下一個div 的高度就是他的line-height 的值

結(jié)果如圖:在chrome的測試下

line-height與line boxes高度 by wangjojo (@wweggplant) on CodePen.

多行文字垂直居中

在看了張鑫旭大神的博文后, 發(fā)現(xiàn)不使用最后的i標簽也是可以做到垂直居中的,可能是他當時寫那篇文章的時間太久,瀏覽器的更新問題等, 在最新版本的測試下,不必使用i標簽,只使用line-height 就能解決問題,如果發(fā)現(xiàn)舊瀏覽器不支持,可以采用他博客中提到的方法.

多行文字居中,添加i方式 by wangjojo (@wweggplant) on CodePen.

行高在文章中的應用

line-height賦值方式px/em、百分值、normal、數(shù)值、inherit繼承。px/em和inherit沒什么好說的, normal與數(shù)值1.2等價 ,所以下面重點說說百分比和數(shù)值兩種賦值方式的區(qū)別.

line-height百分比

line-height百分比賦值的結(jié)果是當前line-height的值乘以這個百分比數(shù)值得到的.demo如下:

line-height賦值方式 by wangjojo (@wweggplant) on CodePen.

外層的 div.wrap 的 line-height 計算結(jié)果是 20px*150% = 24px;

內(nèi)部的h1標簽和 p標簽的通過繼承得到 line-height:150% 然后最后的結(jié)果仍然是24px

在line-height采用百分比的情況下,line-height的最終值h就是當前line-height乘以這個百分比計算得出.并且這個值會繼承下去,后代的元素繼承得到的值也是h

line-height純數(shù)值

外層的 div.wrap-line-height-number 的 line-height 計算結(jié)果是 30px*1.5 = 45px;

內(nèi)部的h1標簽和 p標簽的通過繼承得到 line-height:1.5


h1的line-height是 16px*1.5 = 24px


p 的line-height是 12px*1.5 = 16px

可以把line-height采用數(shù)值形式當作一種倍數(shù)的繼承, 后代的元素都會繼承這個倍數(shù),并受這幾數(shù)值的影響,得到最后的值

line-height與vertical-align關系(有空再寫) 總結(jié)

4種box模型以及各自的含義

line-height與line box的關系

文字垂直居中

line-height賦值形式采用數(shù)值或者是百分比時各自的代表的含義

參考

深入了解css的行高Line Height屬性——沁園春

css行高line-height的一些深入理解及應用——張鑫旭

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/49919.html

相關文章

  • 淺談line-height

    摘要：與高度由上面的內(nèi)容可以總結(jié)出的高度取決與其下屬的中最高的元素。的最終表現(xiàn)是通過實現(xiàn)的，而無論所占據(jù)的高度是多少無論比文字大還是比文字小，其占據(jù)的空間都是與文字內(nèi)容公用水平中垂線的。 基礎知識 有4種模型，分別是 塊，塊盒模型 containing boxing,包括line 行內(nèi)盒模型 inline boxing ,包含content 行模型 line boxing,包含inline...

    leeon 評論0 收藏0

  • 淺談CSS3 box-sizing 屬性 有趣的盒模型

    摘要：盒模型的組成大家肯定都懂，由里向外盒模型是有兩種標準的，一個是標準模型，一個是模型。指定元素的寬度和高度最小最大屬性適用于的寬度和高度。盒模型的組成大家肯定都懂，由里向外content,padding,border,margin. 盒模型是有兩種標準的，一個是標準模型，一個是IE模型。 ?從上面兩圖不難看出在標準模型中，盒模型的寬高只是內(nèi)容（content）的寬高， 而在IE模型中盒模型...

    K_B_Z 評論0 收藏0

  • 移動端H5頁面中1px邊框的幾種解決方法

    問題提出 這是一個比較老的問題了，我第一次注意到的時候，是UI設計師來找我麻煩，emmm那時候我才初入前端職場，啥也不懂啊啊啊啊啊，情形是這樣的：設計師拿著手機過來：這些邊框都粗了啊，我的設計稿上是1px的我：？？？？我寫的是1px呀，不信你看。（說著拿出了css代碼設計師：不對啊我眼睛看來這個邊框比我設計稿上粗很多，看起來好奇怪（emmm果然像素眼我：那我把它改成0.5px你看看（邊說邊改了代碼...

    enda 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<