使用不帶單位的line height

2022-03-14 02:47:11 字數 1173 閱讀 3326

line-height是可以繼承的,所以子元素可以不用重複定義line-height。我們一般也會在後面帶上單位(如:line-height:22px; 或是line-height:1.4em;),但line-height給人帶來麻煩的地方也是這個繼承和後面加的單位。

有的時候,我們為了實現單行文字的垂直居中,會給line-height乙個和height相同的固定的值;有的時候,我們為了調整特定的某段文字的行間距,通常會考慮使用百分比或者相對尺寸的em。或許是習慣,於是我們都習慣了line-height是要有單位的。這些情況下,我們都不需要考慮line-height的繼承,也不會發現任何問題。當然我們在使用line-height繼承的時候,就會發現問題的所在。

例如下面的**:

css:

html:
白培銘先生於2023年出生於中國台灣,畢業於中國台灣省清華大學核物理系,

之後留學於美國加州大學伯克利分校和密西根大學,獲得雙碩士學位。在工作之後,憑著對營銷領域的濃厚興趣,他又考入密執安大學深造。

效果:
白培銘先生於2023年出生於中國台灣,畢業於中國台灣省清華大學核物理系,

之後留學於美國加州大學伯克利分校和密西根大學,獲得雙碩士學位。在工作之後,憑著對營銷領域的濃厚興趣,他又考入密執安大學深造。

你會發現,只要有單位的line-height繼承,都發生了重疊的現象。那到底這是什麼原因導致的呢?

如果line-height屬性值有單位,那麼繼承的值則是換算後的乙個具體的px級別的值(先計算後繼承);而如果屬性值沒有單位,則瀏覽器會直接繼承這個

「因子(數值)」,而非計算後的具體值,此時它的line-height會根據本身的font-size值重新計算得到新的line-height

值(先繼承後計算)。

比如有一div及子元素p,div的line-height為150%,由於預設情況的字型大小為16px,所以div的具體line-height值可換算為

16px * 150% = 24px,由於p的line-height會繼承24px這個換算過後的具體值,此時p又被重新定義為font-

size:30px;字型大小超過了line-height的大小,於是發生重疊。其它單位原理一樣。

原文:

js獲取不帶單位的畫素值

所謂獲取不帶單位的畫素值就是獲取比如元素的寬度 高度 字型大小 外邊距 內邊距等值但是去掉畫素單位。比如 某乙個元素的寬度是100px,現在我要獲取這個這個值但是不帶單位 px 對於這種問題你會怎麼解決?我的解決辦法是 比如通過點選某個按鈕來獲取該值,那麼此時就應該寫個函式,在點選按鈕時再來呼叫該函...

使用不帶頭結點的迴圈鍊錶實現佇列(資料結構)

我使用類模版來完成迴圈鍊錶實現佇列的操作。首先定義乙個結點類node用來儲存結點資訊,然後定義佇列類queue,接下來我們思考 要完成佇列的4個基本操作即 1.判斷佇列是否為空 2.在佇列尾部push進資料 3.從佇列頭部取出資料 4.刪除掉佇列首部的元素 我們這個queue類需要什麼成員變數?答案...

2 5 使用不同的顏色格式

正如我們所見,opencv和ios sdk中對於彩色和灰度影象是有不同的資料格式的,有時我們需要在這些格式之間進行轉換。讓我們從從 中脫離出來,討論一下這些格式之間的差異以及如果不執行正確的轉換可能出現的問題。您可能在很久以前在第一次使用繪圖軟體或者文字處理軟體時選擇自定義的顏色時,就知道了24位r...