line-height、height、font-size · (。＿。） ?＿學習計劃走起

### **line-height** 、 **height** 、**font-size** #### 定義方式 ``` body { line-height: normal; // (1.2) line-height: inherit; line-height: 120%; // font-size * 120% line-height: 25px; line-height: 1.5; // font-size * 1.5 } ``` CSS中起高度作用的應該就是`height`以及`line-height`了！如果一個標簽沒有定義`height`屬性(包括百分比高度)，那么其最終表現的高度一定是由`line-height`起作用。 ``` <!DOCTYPE html> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> * { margin: 0; padding: 0; } body { margin-top: 30px; } .box1, .box2 { margin-top: 30px; font-size: 14px; border: 1px solid #cccccc; } .box1 { line-height: 0; } .box2 { line-height: 1.5; } .parent-box { margin-top: 30px; font-size: 10px; line-height: 150%; /*line-height: 1.5;*/ } .son-box { font-size: 30px; } .mulit-line { margin-top: 30px; line-height: 150px; border:1px dashed #cccccc; } .mulit-line span { font-size: 12px; display: inline-block; vertical-align: middle; line-height: 1.4em; } </style> </head> <body>  <div class="box1"> line-height 1 </div> <div class="box2"> line-height 2 </div>  <div class="parent-box"> 我是父文本 <p class="son-box"> 我是子文本 </p> </div>  <p class="mulit-line"> <span>這里是高度為150像素的標簽內的多行文字，文字大小為12像素。<br />這里是第二行，用來測試多行的顯示效果。</span> </p> </body> </html> ``` #### 行高、行距、半行距、內容區、行內框、行框 ![](https://img.kancloud.cn/51/6c/516cb1ca96af97660814f11934c6b350_739x350.png) **行高：** 指上下文本行的基線間的垂直距離； **行距：** 指一行底線到下一行頂線的垂直距離； **半行距：** 行距的一半； **內容區：** 底線和頂線包裹的區域，即圖中深灰色背景區域。 **行內框：** 每個行內元素會生成一個行內框，行內框是一個瀏覽器渲染模型中的一個概念，無法顯示出來，在沒有其他因素影響的時候（padding等），行內框等于內容區域，而設定行高時行內框高度不變，半行距【分別增加/減少到內容區域的上下兩邊。 **行框（line box）：** 是指本行的一個虛擬的矩形框，是瀏覽器渲染模式中的一個概念，并沒有實際顯示。行框高度等于本行內所有元素中行內框最大的值（以行高值最大的行內框為基準，其他行內框采用自己的對齊方式向基準對齊，最終計算行框的高度），當有多行內容時，每行都會有自己的行框。 ![](https://img.kancloud.cn/f3/09/f309fa18714e7ba7031d43b5426b2a21_640x295.png) #### 文本垂直居中 * 單行文本把`line-height`設置為`box`的大小可以實現單行文字的垂直居中。 * 多行文本對于高度固定的`div`，里面文字多行顯示，可以借助于`line-height`來實現，設置多行文本`inline-block`作為一個整體即可。