資訊專欄INFORMATION COLUMN
摘要：給一個內聯元素設置背景，這背景所占的區域就可以看成內容區域。看了很多文章最后總結和整理了這些，下一篇介紹說說在內聯元素中的作用。
在前端開發中，似乎控制不同大小文字之間，或者文字與圖標之間對齊總是不那么得心應手，總覺得少了點什么，這其中其實跟CSS中幾種跟內聯元素相關的屬性有很大的關系，從我的感覺看，平時遇到的30%的css問題都是由于搞不清這幾種屬性的關系有關。這里第一篇文章先介紹字體，掌握相關概念。
技術是以目的為導向的，那么先來拋出一個問題，前端開發中我們使用font-size來設置文字的大小，但檢查元素后發現內聯元素的高好像大多數時間并不是我們設置的font-size大小，這是為什么哪？
這里面涉及到瀏覽器的影響，字體的設計等方面的知識。尤其是字體設計是一門高深的學問，而我們只是為了開發網頁中控制文字大小和對齊，所以這里我們只取我們需要的部分，下面先介紹字體概念。
字體相關概念我們先來了解文字的各個概念。圖看起來更直觀，所以我簡單畫了個圖。
基線對照著圖，可以看出基線是位于字母x下方的那條線，所有字符都基于這條線進行定位。這應該大家比較常見，畢竟vertical-align的默認值就是baseline，指的就是這條線。
em-boxem-box可能比較少見，但大家一定知道單位em。1em跟該元素的font-size大小相同。還是以圖為例如果設置font-size: 20px，那么em-box的高度就為20px。
content-area這是一個很重要的概念，content-area翻譯成中文是內容區域，這里圖中沒有標出，因為通常默認情況下，content-area與line-height是一樣高的。給一個內聯元素設置背景，這背景所占的區域就可以看成內容區域。
大多數情況下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-heightx-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高度的一半對齊。
這句話里有幾個關鍵的部分一定要弄明白該元素的中心點、父元素的基線和基線加上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則是相對于根元素的字體大小進行計算。
其他應用 神奇的font-size: 0font-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在內聯元素中的作用。在這篇文章中如有錯誤或我與大家理解不一致的地方，歡迎指出，感謝~。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52196.html
摘要：內聯盒子的高度由決定，限制包含盒子的高度，兩者一致，即把內聯盒子安放在包含盒子內，排除其他外界干擾。這時候由內聯盒子模型可知，行間距是等分的，中間部分是，達到看似居中的效果。可以得到結論和設置一致，并非是完全垂直，除非為。 張鑫旭的CSS深入理解之line-height學習筆記 line-height的定義 行高：兩行文字基線之間的距離 為何是基線：基線是定義所有字線的根本 不同字體...
摘要：給一個內聯元素設置背景，這背景所占的區域就可以看成內容區域。看了很多文章最后總結和整理了這些，下一篇介紹說說在內聯元素中的作用。 在前端開發中，似乎控制不同大小文字之間，或者文字與圖標之間對齊總是不那么得心應手，總覺得少了點什么，這其中其實跟CSS中幾種跟內聯元素相關的屬性有很大的關系，從我的感覺看，平時遇到的30%的css問題都是由于搞不清這幾種屬性的關系有關。這里第一篇文章先介紹字...
摘要：但實質上，只要是內聯元素，這兩個元素都會同時在起作用。而解決方案可以有以下幾種元素不使用基線對齊，可以改為對齊元素塊狀化設置為設置為總結講解了的各類屬性值及其效果起作用的前提是內聯元素與都是同時作用在內聯元素上的 前言 vertical-align用來指定行內元素（inline）或表格單元格（table-cell）元素的垂直對齊方式。也就是說，對于塊級元素，vertical-align...
摘要：常見問題這一部分我們來說一說常見的內聯元素的一些問題。通過設置為，或者使用屬性，都可以達到去除內聯元素之間的間隙的目的。 showImg(https://segmentfault.com/img/remote/1460000014515131?w=1280&h=608); 上一篇文章我們討論了font-size，這一篇來說另一個與文字關系密切的屬性line-height。這里涉及到了內...
閱讀 3581·2023-04-26 02:55
閱讀 2849·2021-11-02 14:38
閱讀 4135·2021-10-21 09:39
閱讀 2842·2021-09-27 13:36
閱讀 3943·2021-09-22 15:08
閱讀 2643·2021-09-08 10:42
閱讀 2802·2019-08-29 12:21
閱讀 667·2019-08-29 11:22
