前言:平常寫css習慣性的寫line-height: 1.5em
,也見過類似line-height: 1.5
,line-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採用二進位製包來安裝,...