基線、底線、頂線、中線

zxhaaa 發布于2019-04-23 13:33 / 3533人閱讀

摘要：基線底線頂線中線頂線中文漢字的的上端沿中線橫過英文字母的中間的線基線并不是漢字文字的下端沿，而是英文字母的下端沿底線中文漢字的下端沿內容區指底線和頂線包裹的區域行內元素可以通過屬性顯示出來，實際中不一定看得到，但確實存在。

基線、底線、頂線、中線、vertical-align 頂線：中文漢字的的上端沿；中線：橫過英文字母x的中間的線；基線（base line）并不是漢字文字的下端沿，而是英文字母“x”的下端沿；底線：中文漢字的下端沿；內容區：指底線和頂線包裹的區域（行內元素display：inline可以通過background-color屬性顯示出來），實際中不一定看得到，但確實存在。內容區的大小依據font-size的值和字數進行變化。行高（line-height）：包括內容區與以內容區為基礎對稱拓展的空白區域，我們稱之為行高。一般情況下，也可以認為是相鄰文本行基線間的距離。行距：指相鄰文本行間上一個文本行底線和下一文本行頂線之間的距離。當然，我更愿意認為是（上文本行行高-內容區高度）/2+（下文本行行高-內容區高度）/2。行內框：是一個瀏覽器渲染模型中的一個概念，無法顯示出來，但是它又確實存在，它的高度就是行高指定的高度。行框（line box）：同行內框類似的概念，行框是指本行的一個虛擬的矩形框，也是瀏覽器渲染模式中的一個概念。行框高度等于本行內所有元素中行內框最大的值（以行高值最大的行內框為基準，其他行內框采用自己的對齊方式向基準對齊，最終計算行框的高度）。 ? vertical-align 此處需要特別注意的是：垂直對齊屬性只對文本有效（是指包含了#Text節點的元素節點才能正確地處理vertical-align屬性）。同時，該屬性不能繼承。只有元素屬于inline或是inline-block ，vertical-align屬性才會起作用。基線對齊（vertical-align : baseline）使元素的基線同基準元素（取行高最高的作為基準）的基線對齊頂端對齊（vertical-align : top）是將元素的行內框的頂端與行框的頂端對齊底端對齊（vertical-align : bottom）與頂端對齊（vertical-align : top）相反中間對齊（vertical-align : middle）通常使用在圖片上，將圖片的垂直方向的中線與文本行的中線（文字元素的行內框中線）對齊。文本頂端對齊（vertical-align : text-top）是將元素行內框的頂端同行框的頂線對齊文本底端對齊（vertical-align : text-bottom）是將元素行內框的底端同行框的底線對齊上標（vertical-align:super）使元素的基線相對于基準元素的基線升高；下標（vertical-align:sub）使元素的基線降低，移動的幅度CSS規范中沒有規定，由瀏覽器來決定。長度值和百分比值和上下標類似，可使元素的基線相對于基準元素的基線升高（正值）或者降低（負值）。 CSS 關鍵字 unset 是關鍵字 initial 和 inherit的組合。如果有繼承父級樣式，則將該屬性重新設置為繼承的值，如果沒有繼承父級樣式，則將該屬性重新設置為初始值。換句話說這個unset關鍵字會優先用inherit的樣式，其次會應該用initial的樣式。

GPU云服務器云服務器底線基線管理基線檢查基線配置

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/2029.html

Vertical-Align: 你應該知道的事情

摘要：引言說起大家都知道他是用在對相鄰的文字和內聯元素上，比如常見的將一個圖標和相鄰的文字居中對齊。每個內聯元素也有其自己的基線，頂線和底線。內聯元素的基線位置低于行框的基線。內聯元素的基線相對于行框基線移動相應于行高百分比的數值。平時遇到vertical-align時候會有各種抓狂的時刻，調來調去雖然也弄好了但是心里面一直很虛，因為一直沒有透徹理解過這個屬性，搜索時候發現了一篇很棒的文章...

yacheng 2019-08-30 15:54 評論0 收藏0
「前端早讀君008」新手必踩坑之display: inline-block

摘要：中線基線頂線底線中線基線頂線底線是文本的幾個基本線，其對應位置如下圖基線小寫英文字母的下端沿。中線小寫英文字母的中間。將元素的基線與其父元素的下標基線對齊。將元素的基線對準給定長度高于其父元素的基線。今日勵志語往日不可追，來日猶可期，祝大家2019年繼往開來迷之間隙我們創建一個導航列表，并將其列表 item 設置為 inline-block，主要代碼如下：我我 ...

sevi_stuo 2019-08-30 15:55 評論0 收藏0
CSS：理解行高 line-height

摘要：行高行距半行距從上到下四條線分別是頂線，中線，基線，底線。行高指文本行基線間的垂直距離。上圖任意兩條相同顏色的垂直距離也是行高。父元素不同的行高單位影響子元素的繼承。行高、行距、半行距 showImg(https://segmentfault.com/img/bVAdEh); 從上到下四條線分別是頂線，中線，基線，底線。行高指文本行基線間的垂直距離。上圖任意兩條相同顏色的垂直距...

rickchen 2019-08-29 11:06 評論0 收藏0
【學習筆記】行高 line-height 的基本概念

摘要：整理一下關于行高的一些基本概念。行框的高度是這一行行內框的最高點到最低點的距離。所以在沒有設置固定高度的元素中，高度是由這個元素中所有行框高度疊加而成的。提示有種說法是行框的高度等于這一行中行內框中最大的，這種說法是錯誤的。整理一下關于行高的一些基本概念。原文鏈接：http://www.zengkan.win/?p=84 1.定義每個文本行中可以看做有四條線：頂線，中線，基線和底線...

littleGrow 2019-08-30 13:19 評論0 收藏0