欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS行高line-height的個(gè)人理解

  發(fā)布時(shí)間:2014-01-08 17:25:17   作者:佚名   我要評(píng)論
“行高“顧名思義指一行文子的高度,大家對(duì)CSS行高line-height都有自己的理解,下面為大家介紹下本人自己的理解
一、行高的字面意思

“行高“顧名思義指一行文子的高度。具體來說是指兩行文子間基線間的距離。

基線是在英文字母中用到的一個(gè)概念,我們剛學(xué)英語的時(shí)候使用到的那個(gè)英語本子每行有4條線,其中底部第二條線就是基線,是a,c,z,x等字母的地邊線。

————————頂線(top line)————————————————

——————————中線(middle line)————————————

————————————基線(base line)———————————

———————————————底線(bottom line)——————

vertical-align中有top,middle,baseline,bottom與之是有關(guān)聯(lián)的,但是具體細(xì)節(jié)如何,瀏覽器差異怎樣,我還是不是很清楚。

但是由于中午跟英文長得不一樣,所以基線的說法就像老太太穿線一一對(duì)不上眼。你理解為底線之差也不為不可。只是定義一回事,表現(xiàn)則另一回事。

二、line-height與line boxes高度

先說一個(gè)大家熟知的現(xiàn)象,有一個(gè)空的div,<div></div>,如果沒有設(shè)置至少大于1像素高度height值時(shí),該div的高度就是個(gè)0.如果該div里面打入了一個(gè)空格或是一個(gè)漢字 ,則此div就會(huì)有一個(gè)高度。那么您有沒有思考過,為什么div里面有文字后就會(huì)有高度呢?

這是個(gè)看上去很簡單的問題,是理解line-height非常重要的一個(gè)問題。可能有人會(huì)認(rèn)為是:文子撐開的!文子占據(jù)空間,自然將div撐開。我一開始也是這樣理解的,但是事實(shí)上,深入理解inline模型后,我發(fā)現(xiàn),根本不是文字撐開了div的高度,而是line-height!喲證明很簡單(如下測(cè)試代碼):

css代碼:

復(fù)制代碼
代碼如下:

<!-- lang: css -->
.test1{font-size:20px; line-height:0; border:1px solid #cccccc; backgroud:#eeeeee;}
<!-- lang: css -->
.teset2{fon-size:0; line-height:20px; border:1px solid #cccccc; backgroud:#eeeeee;}

html代碼:

復(fù)制代碼
代碼如下:

<!-- lang: html -->
<div class="test1">測(cè)試1</div>
<!-- lang: html -->
<div class="test2">測(cè)試2</div>

結(jié)果:test1 div有文字大小,但是行高為0,結(jié)果div的高度就是個(gè)0;test2 div文字大小為0,但是有行高,為20像素,結(jié)果div高度就是20像素。這就說明撐開div高度的是line-height不是文字內(nèi)容。

到底這個(gè)line-height行高怎么就產(chǎn)生了高度呢?在linline box模型中,有個(gè)line boxes,這個(gè)是看不見的。line boxes的工作就是包裹每行文字。一行文字一個(gè) line boxes。例如”艾佛森退役"這5個(gè)字,如果它們?cè)谝恍酗@示,你艾佛森再牛,對(duì)不起,只有一個(gè)line boxes罩著你;但是”春哥純爺們“這5個(gè)字,要是豎著寫,一行一個(gè),那真是夠爺們,一個(gè)字罩著一個(gè)line boxes,于是總計(jì)5個(gè)line boxes。line boxes什么特性也沒有,就是高度。所以一個(gè)沒有設(shè)置height屬性的div的高度就是由一個(gè)line boxes的高度堆積而成的。

其實(shí)line boxes不是直接的生產(chǎn)者,屬于中層干部,真正的活兒都是它的手下-inline boxes干的,這些手下就是文字啦,圖片啦,span之類的inline屬性的標(biāo)簽啦。line boxes只是個(gè)考察匯報(bào)人員,考察它的手下誰的實(shí)際line-height值最高,誰最高,它就要誰的值,然后向上匯報(bào),形成高度。例如,<span style="line-height:20px;">取手下line-height<span style="line-height:40px;">最高</span>的值</span>.則line boxes的高度就是40像素了。

相關(guān)文章

  • 深入理解CSS行高line-height與文本垂直居中的原理

    本文詳細(xì)介紹了CSS行高屬性line-height與文本垂直居中的原理,通過本文的介紹相信對(duì)大家以后使用line-height和設(shè)置文本垂直居中會(huì)更加熟練,有需要的可以參考借鑒。下面一
    2016-08-12
  • 全面了解css行高line-height的用法

    下面小編就為大家?guī)硪黄媪私鈉ss行高line-height的用法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2016-06-25
  • CSS中的line-height行高屬性學(xué)習(xí)教程

    line-height對(duì)于頁面中字體的行距等排版方面的效果至關(guān)重要,這里為大家整理了CSS中的line-height行高屬性學(xué)習(xí)教程,包括line-height的各種取值設(shè)定等方面,需要的朋友可以參
    2016-06-06
  • CSS中的line-height行高屬性的使用技巧小結(jié)

    這篇文章主要介紹了CSS中的line-height屬性的使用技巧,文中同時(shí)給出了line-height使用中經(jīng)常出現(xiàn)的文字重疊問題的解決方法,需要的朋友可以參考下
    2016-02-02
  • CSS中行高line-height屬性的一些使用技巧

    這篇文章主要介紹了CSS中行高line-height屬性的一些使用技巧,包括為每行文本指定不同顏色和文本中間添加線時(shí)用到的一些操作方法,需要的朋友可以參考下
    2015-08-21
  • css屬性行高line-height的用法詳解

    本文介紹下css中的line-height屬性的用法,通過實(shí)例學(xué)習(xí)css line-height屬性的具體用法,感興趣的朋友參考下
    2014-08-02
  • CSS line-height行高上下居中垂直居中樣式屬性

    我們?cè)赾ss編寫中需要對(duì)大篇幅的內(nèi)容顯示的更好看,有些間隔,不要在擠在一起難看,就可以使用Line-Height屬性進(jìn)行控制
    2013-07-20
  • 關(guān)于css中l(wèi)ine-height(行高)設(shè)置無效的問題的解決方法

    這篇文章主要介紹了關(guān)于css中l(wèi)ine-height(行高)設(shè)置無效的問題的解決方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-11-29

最新評(píng)論