深入理解 font-size
1、廣義上的 font-size
用于設置 字體大小，輔以單位控制，實質上是控制 字符框 的高度。
2、狹義上的 font-size
2.1、字體的基線
line-height : 意為 行高 ，content-area (內容區域)，被 font-family 、 font-size 共同影響（元素看到的高度與實際字體設置大小不一樣的原因）
em box : 意為 字體框 ，僅被 font-size 影響，即 1 em = font-size: 1px ; ，等同于 font-size
x-height : 意為 x 的 字符高度** ，用于理解概念， x-height = 1 ex ; 在 CSS 中，vertical-align: middle ; 將該 元素的中心 與 父元素基線 加上 x-height 高度的一半 對齊
baseline : 意為 基線 ，即 vertical-align 的 默認值
半行距：計算公式為 行距 = line-height - font-size
2.2、font-size 的基本單位類型
2.2.1、關鍵詞類型
-
絕對尺寸：xx-small 、x-small 、small 、medium 、large 、x-large 、xx-large
-
相對尺寸：smaller 、larger
2.2.2、數值類型
- px ： 像素
- em : 相對于 父元素 的字體大小進行計算
- rem : 相對于 根元素 的字體大小進行計算
2.2.3、百分比類型
- % ：其百分比取值是基于 父對象 中字體的尺寸
3、深入理解 line-height
3.1、含義
意為 行高 ，其 默認值 為 normal = content-area 的區域高度相同
3.2、影響
line-height 的大小受 font-family 、 瀏覽器的影響
3.3、單位
本質上是繼承的類型不同
-
% ：繼承的是計算后的值
-
em：繼承的是計算后的值
-
px： 繼承的是計算規則，是 像素點，而不是 長 或者 高
3.4、內聯盒模型的相關概念
匿名內聯盒子：anonymous inline box ，沒有標簽包裹的文字默認自己形成一個盒子
內聯盒子：inline box ，通常由一些標簽包裹形成，例如最常見的標簽包裹的文字會形成內聯盒子
行框盒子：line box ( ) ，它是由單行內聯元素形成的一個區域，注意是每一行都會形成，如果文字由五行，就會形成5個行框。行框的高度基本上是由行框內行高最大的內聯盒子決定的。還會受 vertical-align 的影響
包含塊：container-box ，在內聯元素中，包含塊是由行框組成的，也就是包裹在所有行框外面的那層盒子
3.5、常見問題
3.5.1、display ：inline-block 元素間的空隙
通常使設置 font-size: 0 ; 或者使用 letter-spacing 屬性達到去除邊框的目的
可知 font 標簽真正僅實現兩個屬性：color 、face
以下列代碼為例：
<div class="container"><h2>1. 元素間的間隙</h2><div class="box"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div></div><h2>2. 父元素底部的間隙</h2><div class="box"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><span>x</span></div><h2>3. inline-block元素中有文字</h2><div class="box"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item"></div><span>x</span></div> </div> .box {border: 1px solid; }.item {display: inline-block;background-color: red;width: 100px;height: 50px; }span {background-color: blue;color: white; }3.5.2、父容器最底端也有一個空隙
是由 stcuct 造成的，實際上是增加了一個 struct行高，所以會顯得 略高
struct：幽靈空白節點，意為 支柱。每一個行框開始的位置都有一個寬度為0，并且行高和字體大小都與該元素相同的內聯盒子，這個盒子即為 “支柱”
4、深入理解 vertical-align
4.1、含義
設置元素的上下垂直對齊方式。
該屬性定義 行內元素的基線 相對于 該元素所在行的基線 的垂直對齊。允許指定 負長度值 和 百分比值 。這會使元素降低而不是升高。在表單元格中，這個屬性會設置單元格框中的單元格內容的對齊方式。
影響 inline-level元素 和 table-cell元素 垂直方向上的布局.
4.2、vertical-align 的屬性值
| baseline | 默認。元素放置在父元素的基線上。 |
| sub | 垂直對齊文本的下標。 |
| super | 垂直對齊文本的上標 |
| top | 把元素的頂端與行中最高元素的頂端對齊 |
| text-top | 把元素的頂端與父元素字體的頂端對齊 |
| middle | 把此元素放置在父元素的中部。 |
| bottom | 把元素的頂端與行中最低的元素的頂端對齊。 |
| text-bottom | 把元素的底端與父元素字體的底端對齊。 |
| length | |
| % | 使用 “line-height” 屬性的百分比值來排列此元素。允許使用負值。 |
| inherit | 規定應該從父元素繼承 vertical-align 屬性的值。 |
4.3、常見問題
兩個div 都設置 display：inline-block，正常顯示；但是在第二個div中加一個塊級元素或者內聯元素，顯示就變了個樣，為什么？
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Test</title><style type="text/css">div{width: 100px;height: 100px;border:1px solid red;display: inline-block;vertical-align: top;}</style></head><body><div></div><div>第二個</div></body> </html>設置div元素的CSS樣式時，加入 vertical-align: top; 就能達到我們想要的效果。
總結
以上是生活随笔為你收集整理的深入理解 font-size的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 手机端预览pdf的那些事
- 下一篇： 数据科普：定价模型与平价关系式（投资必知