行框基線位置確定(line box 基線)

2022-04-03 17:28:01 字數 737 閱讀 9770

在設定vertical-align屬性(只有inline元素有效,對inline-block和block元素無效)時有乙個屬性值:baseline,那麼這個基線是什麼,怎麼確定。

這個基線就是其所在行的line box基線。設定vertical-align:baseline 屬性就是設定其本身元素的inline box(行內框)的基線與行框的基線對其。這裡我們是確定的行框的基線,知道行框基線,那行內框基線就知道了。

有這樣乙個關係

line-height,font-size

丨丨 決定

丨inline box 的高度

丨丨 line box 中的所有 inline box 中最高的 inline box 的頂部 和最低的 inline box 的底部高度之差就是 line box 的高度

丨line box 高度

丨丨 在line box 中直接寫乙個字母 x (這個字母不包含在其他標籤裡面),x的底部位置就是 line box 的基線位置丨丨

丨 知道了line box 基線,因為inline box 不設定vertical-align 情況下,預設基線是與 line box 基線對齊的,所以就知道了 inline box 的基線。(如果設定了vertical-align 

丨其他屬性值,那麼基線的位置會相對line box 有所調整

inline box 基線(有些標籤的基線也不是這樣確定的,如img標籤的基線是的底部,textarea標籤的基線也是底部)

參考文章:

CSS 行內框 行框 行高

css 行內框 行框 行高 內容區頂線和底線包含的區域 行內框每個行內元素會生成乙個行內框,行內框是乙個瀏覽器渲染模型中的乙個概念,無法顯示出來,在沒有其他因素影響的時候 padding等 行內框等於內容區域。設定行高時行內框高度不變,半行距分別增加 減少到行框的上下兩邊。簡單說來,行內框就是行內元...

瀏覽器各種位置的確定

通過在短時間內增加高度逐步顯示隱藏元素的函式 function slidedown elem pos 1 10 通過在短時間內增加透明度逐步顯示隱藏元素的函式 function fadein elem pos 1 10 獲取滑鼠游標相對於整個頁面的當前位置 function getx e funct...

SIFT解析(二)特徵點位置確定

影象的尺度空間就是 二維高斯函式與原始影象卷積運算後的結果,尺度空間的表示式 lowe在 中闡述了為什麼使用差分高斯金字塔 1 差分高斯影象可以直接由高斯影象相減獲得,簡單高效 2 差分高斯函式是尺度規範化的高斯拉普拉斯函式的近似,而高斯拉普拉斯函式的極大值和極小值點是一種非常穩定的特徵點 與梯度特...