CSS line-height的如何繼承的問題
發(fā)布時間：2020-08-18 16:31:27 作者：Milk595 
我要評論
我要評論這篇文章主要介紹了CSS line-height的如何繼承的問題，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
Line-height的如何繼承？
- 寫具體數(shù)值，如30px,則繼承該值（比較好理解）寫比例，如2/1.5,則繼承該比例（比較好理解）
- 比如body中l(wèi)ine-height設為2，則p標簽繼承l(wèi)ine-height為2,則算出來的p標簽line-height為font-size * 2 =32px;
- 寫百分比，比如200%，則繼承計算出來的值(考點)—當前的font-size * 200% 例子中：20 * 200% = 40px;
核心代碼演示：
初始化
<style>
body{
font-size: 20px;
}
p {
background-color: #ccc;
font-size: 16px;
}
</style>
</head>
<body>
<p>這是一行文字</p>
</body>
寫具體數(shù)值
body{
font-size: 20px;
line-height: 50px;
}
p {
background-color: #ccc;
font-size: 16px;
}
寫比例
body{
font-size: 20px;
line-height: 1.5;
}
p {
background-color: #ccc;
font-size: 16px;
}
寫百分比 先算后繼承！
body{
font-size: 20px;
line-height: 200%;
}
p {
background-color: #ccc;
font-size: 16px;
}
到此這篇關于CSS line-height的如何繼承的問題的文章就介紹到這了,更多相關CSS line-height繼承內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
相關文章
css中一些常用的font-size字體單位和line-height詳解
這篇文章主要介紹了css中一些常用的font-size字體單位和line-height的相關知識，給大家提到了px(pixel)像素的一些小知識，本文通過實例代碼相結合給大家介紹的非常詳細，感2020-05-20
這篇文章主要介紹了深入理解CSS中的line-height的使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學2019-08-12
關于css中l(wèi)ine-height(行高)設置無效的問題的解決方法
這篇文章主要介紹了關于css中l(wèi)ine-height(行高)設置無效的問題的解決方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-29深入理解CSS行高line-height與文本垂直居中的原理
本文詳細介紹了CSS行高屬性line-height與文本垂直居中的原理，通過本文的介紹相信對大家以后使用line-height和設置文本垂直居中會更加熟練，有需要的可以參考借鑒。下面一2016-08-12淺談css中vertical-align和line-height的用法
下面小編就為大家?guī)硪黄獪\談css中vertical-align和line-height的用法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧，祝大家游戲愉快2016-07-27- 下面小編就為大家?guī)硪黄媪私鈉ss行高line-height的用法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-25
- line-height對于頁面中字體的行距等排版方面的效果至關重要,這里為大家整理了CSS中的line-height行高屬性學習教程,包括line-height的各種取值設定等方面,需要的朋友可以參2016-06-06
- 這篇文章主要介紹了CSS中的line-height屬性的使用技巧,文中同時給出了line-height使用中經(jīng)常出現(xiàn)的文字重疊問題的解決方法,需要的朋友可以參考下2016-02-02
- 這篇文章主要介紹了CSS中行高line-height屬性的一些使用技巧,包括為每行文本指定不同顏色和文本中間添加線時用到的一些操作方法,需要的朋友可以參考下2015-08-21
- 本文從line-height的定義、line-height的理解、line-height的應用3個方面詳細為大家介紹了line-height，非常的詳細，有需要的朋友可以參考下2014-10-22
