line height 3種設定方式的區別

2021-09-11 14:19:06 字數 1399 閱讀 5114

前言:平常寫css習慣性的寫line-height: 1.5em,也見過類似line-height: 1.5line-height: 150%這種寫法,但是從來沒有想過這三者有什麼區別,最近突然看到有人提到這個問題,很感興趣,於是查資料自己嘗試了一下。

首先有一點要明確的是,line-height是具有繼承性的,如果直接在某個元素上使用line-height,那麼這三種寫法是沒有區別的,比如給所有的p標籤新增行高屬性:

ppp

複製**

最後的效果是一樣的。

這三種方式的區別在於,給父元素設定行高的時候子元素的繼承方式。

假如我們有乙個父div類名為parent1,另乙個父div類名為parent2,均包含了乙個類名為child的子div,html結構如下:

"parent1">

"child">line-height: 1.5em;

"parent2">

"child">line-height: 1.5;

複製**

css如下:

.parent1

.parent2

.child

複製**

此時的頁面如下截圖:

可以看到,當設定line-height: 1.5em時,很明顯子div的文字已經超出自己的行高範圍了,設定line-height: 1.5時子div的文字沒有超出自己的行高。

這是由於css繼承時的計算方式區別造成的,如示例,當我們給類名為parent1的父div設定line-height:1.5em時,該div的font-size為14,此時經過計算父div的line-height為14px*1.5=21px,然後子div的line-height就會繼承21px這個值,而子div的font-size為26px,自然會超出自己的行高範圍。

而當我們給類名為parent2的父div設定line-height:1.5時,子div會直接繼承line-height:1.5,然後計算26px*1.5=39px,不會超出自己的行高範圍。

經過測試line-height: 150%line-height: 1.5em相同,都是先計算然後把固定的行高繼承給子元素,所以我們可以總結一下,繼承line-height的時候,帶單位的先計算再繼承,不帶單位的直接繼承

以上就是我對line-height這個屬性一點淺顯的認識。

LINUX shell 下面呼叫指令碼的3種方式

在linux下,通過指令碼執行一些命令,通常需要執行好幾個指令碼共同完成任務,這裡的呼叫有3種方式 這是最常用的方式,直接通過 path xx.sh 就可以啦。task.sh bin shell export home baijiwei run.sh這裡,task.sh本身啟動了乙個程序,假設程序i...

Linux下切換Python版本的3種方法

在linux下有時候需要使用多個不同版本的python,然而在終端輸入命令python時,不一定是所需要的版本。以下總結幾種切換python版本的方法。方法1 開啟具體的某個python檔案,在第一行處修改如下 將 usr bin python修改為 usr bin python2表示採用pytho...

空間mysql公升級 MySQL公升級的3種方法

mysql資料庫的版本更新很快,新的特性也隨之不斷的更新,更主要的是解決了很多影響我們應用的bug,為了讓我們的mysql變得更美好,我們有必要去給它公升級,儘管你會說它現在已經跑得很好很穩定完全夠用了。下面我們來看看幾種常用的公升級方法。介紹之前,我們先做一些宣告,mysql採用二進位製包來安裝,...