CSS中行高的繼承和單位之間的關係

2021-07-22 07:17:08 字數 905 閱讀 5387

我們知道行高是可以繼承的並且行高的單位有四種情況。 1

具體畫素值

如:line-height: 16px;

2 em

em是指當前標籤設定的字型大小,比如當前標籤字型大小是

16px

,那麼2em = 32px;

3  %%與

em一樣都是以當前標籤設定的字型大小為基準,比如當前標籤字型大小是

16px

,那麼line-height: 200%; 

則字型大小為

32px;

4什麼單位都不帶。 與

%是一樣的,比如當前標籤字型大小是

16px

,line-height:2;

則字型大小為

32px;

先來看乙個行高正常繼承的例子

看看字型的大小

在父元素裡不管設定line-height:2;line-height:200%; 或者line-height:2em;中其中那一種,都可以發現字型的行高變成40px.

如果我們給子元素div也設定字型為25px,父元素的行高為2em或者200%,行高依然是40px。

.one 

.two

那麼問題來了,如果我們父元素的行高為2(不帶單位),那麼行高是否仍然為40px呢?

.one 

.two

在瀏覽器中我們可以發現行高變成了50px

因此我們在設定行高的時候需要注意一下兩點:

1、在設定行高的時候,如果單位是em或者%,那麼將來行高會先計算出來結果以後再繼承給子元素。

2 、在設定行高的時候,如果單位是沒有單位,那麼將來行高會先繼承給子元素,然後再計算出行高。

css中單位em和rem之間的區別

對於em和rem的區別一句話概括 em相對于父元素,rem相對於根元素。在 css 中,em 是非常有用的單位,因為它可以自動適應使用者所使用的字型。em是自適應當前使用字型大小的,1em等於當前字型大小,2em等於兩倍字型大小 font size 1.子元素字型大小的em是相對于父元素字型大小 2...

CSS單位px em rem及它們之間的換算關係

格言 努力做好自己喜歡的每一件事 國內的設計師大都喜歡用px,而國外的 大都喜歡用em和rem,那麼三者的區別與優勢是什麼?接下來我們就來學習一下吧!單位px em rem分別表示什麼?1 px pixel 相對於顯示器解析度而言,表示 絕對尺寸 並非真正的絕對 實際上就是css中定義的畫素 這裡的...

CSS中em單位和px單位的區別

這裡引用的是jorux的 95 的中國 需要重寫css 的文章,題目有點嚇人,但是確實是現在國內網頁製作方面的一些缺陷。我一直也搞不清楚px與em之間的關係和特點,看過以後確實收穫很大。平時都是用px來定義字型,所以無法用瀏覽器字型放大的功能,而國外大多數 都可以在ie下使用。因為 1.ie無法調整...