CSS——對height和line-height的理解
阿新 • • 發佈：2018-12-13
ref 之間 -c blog oct 一個 nbsp 變化 set
最近在做CSS界面時經常遇到line-height和height這兩個屬性，一直沒搞很明白，今天靜下心來好好網上查閱了一下，算是有所領悟。https://blog.csdn.net/a2013126370/article/details/82786681這個博主寫的很不錯，至少讓我對line-height和height的理解更深刻了，值得借鑒。
一、一些基本概念
1.行高是指文本行基線間的垂直距離。
2.行距是上行的底線和下一行頂線之間的距離。
我個人理解，可以得出以下結論：
1. 在沒有設置div的height屬性時，div的高度是根據line-height的大小而變化，並不受font-size的影響。
2. height是用來設置元素的高度，比如img的高度、div的高度等。line-height 屬性是用來設置行間的距離（行高），兩者並不是同一個概念。
二、代碼實例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>sdds</title> <style> html,body,div{ margin: 0; padding: 0; border: 0; } .bg0{ width: 200px; height: 45px; line-height: 100px; background-color: red; font-size: 10px; word-wrap:break-word; } .bg1{ width: 200px; height: 10px; background-color: green; } .bg2{ width: 200px; height: 45px; background-color: yellow; } .bg3{ width: 200px; height: 55px; background-color: blue; } </style> </head> <body> <div class="bg0">上海大學SHU(Shanghai University)是一所211大學</div> <div class="bg1"></div> <div class="bg2"></div> <div class="bg3"></div> </body> </html>
運行結果：
結論：可以看出，黃色背景div和藍色背景div的height加起來就是類名為bg0的div的所設置的line-height=100px，而第一部分紅色div設置的height=45px，是line-height減去fontsize後在除以2得到的，即(100-10)/2=45px。
CSS——對height和line-height的理解