【温故知新】CSS学习笔记（行高简介）
生活随笔
收集整理的這篇文章主要介紹了
【温故知新】CSS学习笔记（行高简介）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
行高簡介
?
【行高的測量】
真正的行高有如下圖所示的四條線組成（頂線、中線、基線、底線）。
- 頂線：以文字的最高點為準；
- 中線：以文字的最高點和最低點中間取一條線為中線；
- 基線：以文字中最短的底線為基準；
- 底線：以文字的最低點為準；
那么我們所說的行高其實就是基線到基線的距離。區分上面的底線與頂線之間的距離（行距）。
【行高的運用】
我們利用行高最多的一個地方就是讓一行文本在盒子中垂直居中對齊。
其做法就是：文字的行高等于盒子的高度。
?
上距離和下距離總是相等的，因此文字看上去就是垂直居中的。
【樣例代碼】
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>行高介紹</title><style>div {height: 50px;width: 200px;background-color: lightblue;line-height: 50px;text-align: center;}</style> </head><body><div>行高介紹</div> </body> </html>總結：
- 如果行高等于Height高度，文字會垂直居中；
- 如果行高大于Height高度，文字會偏下；
- 如果行高小于Height高度，文字會偏上；
?
【行高運用擴展】
并不是所有的垂直居中都可以利用行高等于Height高度來解決，比如下圖的例子，由于素材圖片有一個小三角，若利用行高等于Height高度來實現，則看上去略顯別扭，因為盒子的高度是從頂部到小三角底部來計算的，這就需要我們進行調試，選取合適的行高。
【樣例代碼】
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>導航欄測試</title><style>a {width: 120px;height: 58px;background-color: pink;display: inline-block;background-image: url(images/bg.png);text-align: center;line-height: 50px;color: #fff;text-decoration: none;}</style> </head> <body><a href="#">導航欄</a><a href="#">導航欄</a><a href="#">導航欄</a><a href="#">導航欄</a> </body> </html>?
?
總結
以上是生活随笔為你收集整理的【温故知新】CSS学习笔记（行高简介）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【温故知新】CSS学习笔记（显示模式简介
- 下一篇： CSS 基本样式