我們知道行高是可以繼承的並且行高的單位有四種情況。 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無法調整...