text-indent屬性
text-indent屬性是用來定義首行文本內容之前的縮進量。
比如中文，咱們小時候寫作文，一個段落的開頭，一般是空兩個字，那麼空出來兩個字符就叫縮進了兩個字符。
縮進兩個字符在CSS中應該這樣寫：
indent這個單詞就是縮進的意思。
em表示字符寬度。
只要你給p標籤設置了text-indent屬性，那麼每一個段落的開頭的文字就會縮進2個字符。
在實際工作中，實現一個段落的首行文字縮進，就是使用text-indent屬性，而不是轉義字符
line-height屬性
line-height屬性用於定義行高。
行高就是一行文字的高度。
行高，你可以這樣理解：
你可以把上一行文字的頂部，到下一行文字的頂部之間的距離，看做行高。
也可以把上一行文字的底部，到下一行文字的底部之間的距離，看做行高。
也可以把一行文字，加上上面和下面的空白看做一行的行高。
line-height屬性的3種寫法
1、line-height屬性值的單位可以是px。
比如：
2、line-height屬性值也可以沒有單位的數值，這個數值就表示字號的倍數。這種寫法是最推薦的寫法。
比如：
就表示行高是字號的1.5倍。
假如說你的字號是20像素，那麼line-height：1.5就表示行高是30像素。
3、line-height屬性值也可以百分數，這個百分數也表示字號的倍數。
比如：
就表示行高是字號的150%，也是1.5倍。
現在我在vscode和瀏覽器中演示一下行高屬性。我創建一個叫"段落和行相關屬性.html"的文件，代碼如下：
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>段落和行相關屬性</title><style>p {font-size: 20px;line-height: 30px; }</style></head><body><p> 君不見，黃河之水天上來，奔流到海不復回。 君不見，高堂明鏡悲白髮，朝如青絲暮成雪。 人生得意須盡歡，莫使金樽空對月。 天生我材必有用，千金散盡還復來。 烹羊宰牛且為樂，會須一飲三百杯。 岑夫子，丹丘生，將進酒，杯莫停。 與君歌一曲，請君為我傾耳聽。 鐘鼓饌玉不足貴，但願長醉不復醒。 古來聖賢皆寂寞，惟有飲者留其名。 陳王昔時宴平樂，鬥酒十千恣歡謔。 主人何為言少錢，徑須沽取對君酌。 五花馬，千金裘， 呼兒將出換美酒，與爾同銷萬古愁。</p></body></html>
瀏覽器中效果如下(為了顯示清晰，我只截取了一部分頁面)：
代碼中p標籤的字號是20像素，行高是30像素，現在我把字號調大一點，變成50像素，即：
p {font-size: 50px;line-height: 30px; }
那麼在瀏覽器中，效果如下：
我們看到，字都重疊了。
這是因為：行高只有30像素，而字的大小是50像素，字已經超過行高了，所以會重疊。
此時，我們只要把line-heght的值寫成小數或者分數，也就是line-height屬性值的第2種和第3種寫法，就不會出現上面的問題。因為第2種和第3種寫法都表示行高是字號的倍數。
最推薦使用第2種寫法。因為小數比分數寫起來方便嘛。
我用第2種寫法改一下：
p {font-size: 50px;line-height: 1.5; }
文字就不會重疊了：
單行文本垂直居中
如何設置一個內容垂直居中呢？
只需要設置行高=盒子高就行了。
關於盒子模型，後面我們會了解。
我們先把任何一個HTML標籤元素看作一個盒子(容器)就行。
所謂的內容垂直居中，就是一個盒子裡面的東西，從上下方向看位於盒子的中間。
對於單行文本，當我們把行高設置為等於文本所在的這個盒子的高度時，那麼這個文本，自然就在垂直方向上居中了。
比如一個p標籤中，有四個字"行勝於言"，當我們把這個p標籤的行高的數值，設置為這個p標籤的高度時，"行勝於言"這四個字就在垂直方向居中了。
要設置文本水平方向居中，有一個屬性text-align，設置text-align：center;
就可以了。
align這個單詞表示對齊的意思。text-align就是文字的對齊方式。center就是中間的意思。
我繼續在"段落和行相關屬性.html"中寫代碼進行演示：
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>段落和行相關屬性</title><style>p {font-size: 20px;line-height: 1.5; }.box {/* 盒子寬度300px */width: 300px;/* 盒子高度200px */height: 200px;background-color: orange;font-size: 20px;/* 文字顏色設為白色 */color: #fff;/* 文字水平居中 */text-align: center;/* 垂直居中，行高等於盒子高即可 */line-height: 200px; }</style></head><body><p> 君不見，黃河之水天上來，奔流到海不復回。 君不見，高堂明鏡悲白髮，朝如青絲暮成雪。 人生得意須盡歡，莫使金樽空對月。 天生我材必有用，千金散盡還復來。 烹羊宰牛且為樂，會須一飲三百杯。 岑夫子，丹丘生，將進酒，杯莫停。 與君歌一曲，請君為我傾耳聽。 鐘鼓饌玉不足貴，但願長醉不復醒。 古來聖賢皆寂寞，惟有飲者留其名。 陳王昔時宴平樂，鬥酒十千恣歡謔。 主人何為言少錢，徑須沽取對君酌。 五花馬，千金裘， 呼兒將出換美酒，與爾同銷萬古愁。</p><divclass="box"> 行勝於言</div></body></html>
在瀏覽器中效果如下：
font合寫屬性
我們知道，文本的屬性，包括font-size、font-family、font-style、font-weight、line-height等幾種。
我們可以用font來一次性表示以上幾種屬性，這就是font合寫屬性。
也就是說，我們要設置文字的加粗、傾斜、字號大小、行高、字體這些屬性時，用font屬性就可以一次性把它們全部設置好。
語法如下：
這就是font合寫屬性，一次性就可以設置好5條屬性，如果要設置加粗、傾斜、字號大小、行高、字體這5條屬性，用這種合寫方式比單獨一條一條寫肯定方便多了。
注意：
1、字號和行高是寫在一起的，中間用斜槓/隔開，其他屬性之間用空格隔開。
2、font屬性值順序：加粗和傾斜寫在最前面，他倆誰打頭都可以，然後是字號和行高，最後是字體。
接下來我繼續在"段落和行相關屬性.html"中演示font合寫屬性，代碼如下：
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>段落和行相關屬性</title><style>p {font-size: 20px;line-height: 1.5; }.box {/* 盒子寬度300px */width: 300px;/* 盒子高度200px */height: 200px;background-color: orange;font-size: 20px;/* 文字顏色設為白色 */color: #fff;/* 文字水平居中 */text-align: center;/* 垂直居中，行高等於盒子高即可 */line-height: 200px; }.para {font: bold italic 20px/1.5"微軟雅黑"; }</style></head><body><p> 君不見，黃河之水天上來，奔流到海不復回。 君不見，高堂明鏡悲白髮，朝如青絲暮成雪。 人生得意須盡歡，莫使金樽空對月。 天生我材必有用，千金散盡還復來。 烹羊宰牛且為樂，會須一飲三百杯。 岑夫子，丹丘生，將進酒，杯莫停。 與君歌一曲，請君為我傾耳聽。 鐘鼓饌玉不足貴，但願長醉不復醒。 古來聖賢皆寂寞，惟有飲者留其名。 陳王昔時宴平樂，鬥酒十千恣歡謔。 主人何為言少錢，徑須沽取對君酌。 五花馬，千金裘， 呼兒將出換美酒，與爾同銷萬古愁。</p><divclass="box"> 行勝於言</div><pclass="para"> 那些看似不起波瀾的日復一日會在某天讓你看到堅持的意義。</p></body></html>
在瀏覽器中效果如下：
實際工作中，font合寫屬性非常實用。