首頁 > web前端 > css教學 > 主體

必須掌握的css屬性--lineheight

零下一度
發布: 2017-05-10 11:57:11
原創
1808 人瀏覽過

1,行高的定義

#行高是指行間的距離,也就是基準之間的距離,而只有兩行文字才會存在兩個基線,那麼為什麼單行文字還具有行高?我們懷著這個疑問往下看。

2,行內框盒子模型

#

這是一個單行文字,這裡有一個內容區標籤。

必須掌握的css屬性--lineheight

#圖一

「內容區域」 (content area )是圍繞文字的盒子,我們可以看做是滑鼠在選取文字區域的大小,它的大小只和font-size有關,可以看做是圖一中的文字被滑鼠選取的區域,也就是選取的「個單行文字」的區域。

「內嵌盒子」(inline boxs)不會讓文字成塊顯示,而是排列成一行。由內聯元素包裹的文字如span標籤包裹的“內容區”,可以稱之為“內聯盒子”,而沒有內聯元素包裹的部分,我們可以看做是“匿名內聯盒子」。 「內嵌盒子」可以看做圖一中span標籤內的「內容區」區域,而「匿名內嵌盒子」則可以看做紅色虛線包裹的內容。

“行框盒子”(line boxs),每一行都是一個“行框盒子”,行框盒子由一個個匿名和非匿名內聯盒子組成。可以看做圖一中最外側紅色實線包裹的區域。

「包含盒子」(containing box),此盒子由一個個「行框盒子組成」。

3,行高的高度機制

行高影響無所不在,即使是單行文字也不例外。

單行文字的高度表現只是受到line-height的影響,而主要是受到內容區域和行間距的影響。

單行文字行高:

line-height = 內容區域高度+ 行間距高度

那麼:

行間距= line-height - 內容區域高度

我們平常看到的文字上部與「行框盒子」的頂部之間的距離就是半行間距。

4,行高的單位

(1),number

例如:

line-height:2;
font-size:20px;
登入後複製

那麼此時文字佔據的高度為20*2=40px

(2),length

例如:

font-size:20px;
line-height:20px;
line-height:2em;
line-height:3rem;
line-height:3pt;
登入後複製

以px為單位有一個固定的值,而其餘的則需要結合瀏覽器預設尺寸進行換算或是body的font-size屬性來計算。

(3)

<p>
    文字文字
    <p>这是p标签</p>
</p>
p{
font-size:20px;
line-height:150%;
}
p{
font-size:50px;
}
登入後複製

那麼「文字文字」的行高為30px,內部p標籤行高也是30px,而不會根據子元素重新計算行高。

意思是說當設定行高為百分比的時候,父元素根據font-size計算的行高繼承給子元素,子元素不會根據font-size重裝計算行高,一般不常用。

(4),normal

根據瀏覽器預設line-height屬性來設定行高。

(5),inherit

行高繼承IE8+

繼承父元素的行高設置,通常是應用在一些input和button標籤。

5,line-height的應用

(1),消除容器中圖片與底部的間距

必須掌握的css屬性--lineheight

圖二

產生原因:

內嵌元素預設基線對齊,空白標籤內含有空白幽靈節點,相當於圖片和一個文字對齊,根據vertical-align:baseline,所以圖片底部有間距。

這裡的幽靈空白節點我們可以理解成一個字母c,因為是基線對齊,且父元素沒有設定固定高度,所以父元素高度由內容填充,由於c要與圖片基線對齊,所以就會在下邊緣。

當父元素設定固定的高度時,單純p內包含圖片和字母c,預設圖片與文字基線對齊,圖三中c就相當於幽靈空白節點。

必須掌握的css屬性--lineheight

圖三

消除方法

1,讓圖片塊狀化

#2,圖片vertical-align:bottom

#

3,让匿名空白节点line-height:0

(2),小图标大文字

<i class=&#39;icon&#39;></i>
<span>这是span标签内的文字</span>
span{
line-height:30px;
vertical-align:middle;
}
i{
vertical-align:middle;
}
登入後複製

(3),图片水平垂直居中

必須掌握的css屬性--lineheight

图三

必須掌握的css屬性--lineheight

图四

原理:

空白p内存在空白幽灵节点(看不见摸不着但存在空白元素中,例如图四中的)。

当设置text-align的时候,内联元素文字和图片会居中显示,我们让空白幽灵节点的行高与p高度一致,这样就可以实现垂直居中,图片和幽灵空白节点默认基线对齐,这时图片将偏上显示,我们设置图片的vertical-align为middle就可以实现图片近似居中的效果了。

如果想让图片完全垂直居中,我们可以让p的font-size:0,原因是不同字体的显示效果不同,有的下沉,有的刚好中线对齐,当font-size:0的时候,文字就变成一个点了,也就不存在不同字体的差异了。

(4),多行文本垂直居中

必須掌握的css屬性--lineheight

图五

必須掌握的css屬性--lineheight

图六

原理:

我们可以把span看做是图片,这样原理就和图片垂直居中原理大同小异了。就是需要将span的元素display设置成inline-block,并且重置line-height和text-align。

为何display不能是inline属性,个人观点,如果还是inline元素的话,由于此时父元素的line-height过高,子元素设置的行高很小就没有作用(因为line-height达不到父元素行高的高度,所以看上去好像是无效的),类似于margin中的由于浮动或者绝对定位的无效的原因,我在另外margin篇有介绍,css中margin的深入了解,如果有兴趣可以去看看,如果设置子元素line-height设置很大的话是有作用的,所以只能让span元素为inline-block元素,inline-block具有包裹性,所以呈现出图六效果。

如果容器是自适应高度的,无法获得高度,那么我们可以让外部容器为表格元素居中。

【相关推荐】

1. 免费css在线视频教程

2. css在线手册

3. php.cn独孤九贱(2)-css视频教程

以上是必須掌握的css屬性--lineheight的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板