HTML和CSS進階（1）：深刻line-height

時間 2019-11-18

標籤 html css 進階深刻 line height 欄目 HTML 简体版

原文原文鏈接

在CSS中，咱們可使用line-height屬性來控制文本的行高。不少書稱line-height爲行間距，其實這是很是不嚴謹的叫法。行高，顧名思義就是「一行的高度」，而行間距指的是「兩行文本之間的距離」，二者是徹底不同的概念。這一節，咱們來深刻學習一下line-height屬性。
1、 line-height的定義
在CSS中，line-height還有一個更加準確的定義：兩行文字基線之間的距離。

一、頂線、中線、基線、底線css

基線？這是什麼東西？聽都沒聽過！咱們都用過英文簿，英文簿每一行都有4條線，這4條線分別是：（1）頂線；（2）中線；（3）基線；（4）底線。html

   在CSS中，每一行文字能夠當作一個「行盒子」，而每個行盒子都有4條線：（1）頂線；（2）中線；（3）基線；（4）底線。沒錯，這4條線跟英文簿中的4條線是同樣的道理。
   此外vertical-align屬性中的top、middle、baseline、bottom這4個屬性值分別對應的就是：頂線、中線、基線、底線。小夥伴們確定不由自主地驚歎一聲：噢！原來是這樣一回事！
   注意一下，基線並非行盒子中最下面的線，而是倒數第2條線。由此咱們很清楚地知道line-height究竟指的是什麼。

二、行高、行距與半行距瀏覽器

（1）行高
   行高（即line-height），指的是「兩行基線之間的垂直距離」，請看上圖。
   有些小夥伴就會問了：爲何W3C要這樣去定義line-height呢？直接定義line-height爲2條底線之間的距離豈不是更好理解麼？規則這東西嘛，都是官方定義的，咱們只須要去遵循就好了。這就跟咱們過馬路同樣，不必糾結爲何是「綠燈走紅燈停」，而不是「紅燈走綠燈停」。
（2）行距
   行距，指的是：上一行的底線到下一行的頂線的垂直距離。也就是兩行文字之間的空隙。
（3）半行距
   半行距，很好理解，指的是行距的一半。
   爲何要搞一個半行距出來呢？其實這就是爲了引出在下面所提到的「行框（inline box）」。
  三、內容區與行框
（1）內容區
   內容區，指的是行盒子頂線到底線之間的垂直距離。
（2）行框
   行框，指的是兩行文字「行半距分割線」之間的垂直距離。
2、深刻line-height
  一、height和line-height
   line-height有默認值，當沒有定義line-height屬性時，瀏覽器就會採用默認的line-height值。
一行文字的高度是由line-height決定，而不是由height決定的。例如在p標籤中，一個p標籤的文字能夠有不少行，其中line-height定義的是一行文字的高度，而height定義的是整個段落的高度（p標籤的高度）。
   在CSS中，咱們能夠定義height和line-height這2個屬性值相等，從而來實現單行文字的垂直居中。這是常常使用到的一個技巧，但願你們記住。
   舉例：

<!DOCTYPE html>

<head>

div

{

width:240px;

height:60px;

border:1px solid gray;

font-size:12px;

text-align:center;

}

#div1{line-height:20px;}

#div2{line-height:40px;}

#div3{line-height:60px;}

</style>

</head>

<body>

<div id="div1">height爲50px，line-height爲20px</div>

<div id="div2">height爲50px，line-height爲40px</div>

<div id="div3">height爲50px，line-height爲60px</div>

</body>

</html>

分析：
   爲何定義height和line-height這2個屬性值相等，就能夠實現單行文字的垂直居中呢？從上面這個例子，咱們能夠很直觀而感性地認知。
  二、line-height取值爲百分比值、em值
   當line-height值爲百分比值或者em值時，當前元素的行高是相對於「父元素」的font-size值來計算的。計算公式以下：

line-height = （父元素font-size）×（百分比）

line-height = （父元素font-size）×（em值）

舉例：學習

<!DOCTYPE html>

<head>

body{font-size:30px;}

#outer-box

{

/*父元素行高：30px×150%=45px*/

line-height:150%;

background-color:Red;

color:White;