深刻理解-CSS內聯元素之font-size
在前端開發中，彷佛控制不一樣大小文字之間，或者文字與圖標之間對齊老是不那麼駕輕就熟，總以爲少了點什麼，這其中其實跟CSS中幾種跟內聯元素相關的屬性有很大的關係，從個人感受看，平時遇到的30%的css問題都是因爲搞不清這幾種屬性的關係有關。這裏第一篇文章先介紹字體，掌握相關概念。css
技術是以目的爲導向的，那麼先來拋出一個問題，前端開發中咱們使用font-size來設置文字的大小，但檢查元素後發現內聯元素的高好像大多數時間並非咱們設置的font-size大小，這是爲何哪？html
這裏面涉及到瀏覽器的影響，字體的設計等方面的知識。尤爲是字體設計是一門高深的學問，而咱們只是爲了開發網頁中控制文字大小和對齊，因此這裏咱們只取咱們須要的部分，下面先介紹字體概念。前端
字體相關概念
咱們先來了解文字的各個概念。圖看起來更直觀，因此我簡單畫了個圖。git
基線
對照着圖，能夠看出基線是位於字母x下方的那條線，全部字符都基於這條線進行定位。這應該你們比較常見，畢竟vertical-align的默認值就是baseline，指的就是這條線。github
em-box
em-box可能比較少見，但你們必定知道單位em。1em跟該元素的font-size大小相同。仍是以圖爲例若是設置font-size: 20px，那麼em-box的高度就爲20px。瀏覽器
content-area
這是一個很重要的概念，content-area翻譯成中文是內容區域，這裏圖中沒有標出，由於一般默認狀況下，content-area與line-height是同樣高的。給一個內聯元素設置背景，這背景所佔的區域就能夠當作內容區域。post
大多數狀況下content-area於em-box的高度不一樣，conent-area的高度受到font-family和font-size的影響，有時候即便font-size一致可能覺得字體不一樣致使content-area也不同，這是在字體設計的時候就決定了的。而em-box只受font-size影響。這也就解釋了爲何咱們有時候檢查元素看到的高度與實際字體設置大小不同的問題。測試
半行距
先看行距怎麼算，行距 = line-height - font-size。半行距就是將行距一分爲二，一份加在em-box的上面，一份加在下面，就構成了完整的文字高度。字體
x-height
x-height顧名思義就是x字符高度的意思，1ex就是x-height的值，一般沒什麼做用，可是對於咱們理解概念有很大幫助，css中vertical-align: middle的解釋就是Aligns the middle of the element with the baseline plus half the x-height of the parent，意思就是將該元素的中心點與父元素基線加上x-height高度的一半對齊。ui
這句話裏有幾個關鍵的部分必定要弄明白該元素的中心點、父元素的基線和基線加上x-height高度的一半，咱們經常使用veritcal-align: middle出錯，每每就是這幾個點沒有搞清楚，這裏先試着理解，之後的文章會詳細說明。
如下部分是介紹字體單位和一些理解，若是已經瞭解能夠直接跳過，別浪費時間，時間寶貴~
度量單位
字體的大小在css中用font-size來表示，它的度量單位有不少，主要分爲三大類：關鍵詞類型、數值類型、百分比類型。
關鍵詞類型
關鍵詞類型分爲絕對尺寸和相對尺寸。因爲使用的較少，沒必要記憶，因此這裏僅僅羅列出來。
絕對尺寸：xx-small、x-small、small、medium、large、x-large、xx-large。
相對類型：smaller、larger。
數值類型
數值類型在平時使用較多，而數值類型的單位經常使用的有px、em和rem，可能偶爾會用到ex其餘基本用不到，再也不列舉。px表示像素，em是相對於父元素的字體進行計算，而rem則是相對於根元素<html>的字體大小進行計算。
其餘應用
神奇的font-size: 0
font-size: 0這種寫法很經常使用，在之前的Chrome中會限制font-size小於12px而且大於0的時候按照12px計算，但我最近在最新版的Version 65.0.3325.181 (Official Build) (64-bit)Chorme下測試，發現已經沒有這個限制了（不知道何時修改掉的-_-）。使用font-size: 0讓字體大小變爲0，一般也會使得line-hight變爲0，這常常能夠解決line-block元素出現的空隙問題，這個問題具體的緣由咱們後面再說。
看了不少文章最後總結和整理了這些，下一篇介紹line-height說說line-height在內聯元素中的做用。在這篇文章中若有錯誤或我與你們理解不一致的地方，歡迎指出，感謝~原文連接。
- 1. 深刻理解-CSS內聯元素之line-height
- 2. 深刻理解-CSS內聯元素之font-size
- 3. 玩轉CSS中塊元素、內聯元素、內聯塊元素
- 4. css盒模型和塊級、行內元素深刻理解
- 5. html/css內聯元素和塊元素
- 6. CSS 塊狀元素和內聯元素
- 7. css內聯元素與塊元素
- 8. css塊級元素、內聯元素
- 9. 『HTML&CSS』塊元素和內聯元素
- 10. 深刻理解css之BFC
- 更多相關文章...
- • jQuery Mobile CSS 類 - jQuery Mobile 教程
- • CSS 指南 - 網站建設指南
- • 互聯網組織的未來：剖析GitHub員工的任性之源
- • 三篇文章瞭解 TiDB 技術內幕——說存儲
-
每一个你不满意的现在，都有一个你没有努力的曾经。