您現在的位置是:電腦技術吧?>? 基礎知識 ??>??line-height,line height什么意思??>??正文詳情

line-height,line height什么意思

第五從蕾2019-11-16 05:10:35 人圍觀
簡介line size讓我們回顧一下行高的基本知識:語法:line height:normal |實數|長度|百分比|繼承說明:在元素值中設置行高:normal:default rolineweight

先來回顧一下line-height的基礎知識:  語法: line-height : normal | 實數 | 長度 | 百分比 | inherit  說明: 設置元素中行的高度。

  值: normal:默認行高,一般為1到1.2; 實數:實數值,縮放因子; 長度:合法的長度值,可為負數; 百分比:百分比取值基于元素的字體尺寸。

  初始值: normal  繼承性: 繼承  適用于: 所有元素  媒體: 視覺  計算值: 長度和百分比值為絕對值;其他同指定值。

  CSS中的line-height屬性控制著兩行文本之間的空白多少,通常是會設置成一個無單位數值(比如line-height:1.4),表明其與font-size屬性所構成的比例。

line-height在排版上是非常重要的一個屬性,太低的話,文字的行與行之間會尷尬地擠在一起,太高的話它們又會尷尬地分的太開,無論哪一種都對閱讀不利。

不過你也許早就知道這一點了。

  這篇文章中我們會著重介紹一些技巧,如果你知道(或者能搞清楚)line-height的確切值,你可以做得更有趣 。

  為每一行文本指定不同顏色  不幸的是,我們并沒有::nth-line這個選擇器。

我們也不能指望會靠得住,數不清的原因可能導致文本在某處被斷開。

  有一個辦法,雖然不標準,就是利用元素的背景來充當文字的背景。

  CSS  也有另一個技巧,你可以用linear-gradient()加上色彩點來控制顏色之間不會互相漸變,讓一個顏色結束之后突然開始另一個顏色。

我們假設line-height的值為22px,那我們就可以讓漸變每逢22px斷開一次。

  Sass  CSS Code復制內容到剪貼板  .text {  background-image: linear-gradient(  to bottombottom,  #9588DD,  #9588DD 22px,  #DD88C8 22px,  #DD88C8 44px,  #D3DD88 44px,  #D3DD88 66px,  #88B0DD 66px,  #88B0DD)  }

  兩個技巧結合之后:

  如果你的瀏覽器不支持text的background-clip,比如Firefox,那你就會看到位于文字背后的色彩長條,可能你會覺得這樣看起來很酷甚至會很喜歡,但或許你寧可回到設置文字顏色的老路上來。

如果是后者的話,你可以用@support來設置成:如果瀏覽器支持,css才生效。

  另外,既然你反復的在利用line-height的值,說不定把他變成變量比較好。

在這里我用SCSS,不過哪天可以使用真正的CSS變量那就真的太棒了,這樣在頁面渲染完還可以繼續修改,并且看著它生效。

  Sass  CSS Code復制內容到剪貼板  $lh: 1.4em;  body {  font-size: 1em;  line-height: $lh;  }  @supports (-webkit-background-clip: text) {  p {  -webkit-background-clip: text;  -webkit-text-fill-color: transparent;  background-image: linear-gradient(  to bottombottom,  #9588DD,  #9588DD $lh,  #DD88C8 $lh,  #DD88C8 $lh*2,  #D3DD88 $lh*2,  #D3DD88 $lh*3,  #88B0DD $lh*3,  #88B0DD);  }  }  最簡單的辦法是在最上層的元素中應用這些屬性,這里有個樣例,它的最初幾行是重點。

  Sass  CSS Code復制內容到剪貼板  .text {  -webkit-background-clip: text;  -webkit-text-fill-color: transparent;  background-image: linear-gradient(  to bottombottom,  rgba(white, 0.8),  rgba(white, 0.8) $lh,  rgba(white, 0.6) $lh,  rgba(white, 0.6) $lh*2,  rgba(white, 0.4) $lh*2,  rgba(white, 0.4) $lh*3,  rgba(white, 0.2) $lh*3,  rgba(white, 0.2));  }

  如果我們要操控到最末任意行,這將會更難。

這樣的話,我們就需要色帶從頭開始一路往下,直到倒數的幾行,幸運的是我們可以用calc()來實現。

  Sass  CSS Code復制內容到剪貼板  .text {  -webkit-background-clip: text;  -webkit-text-fill-color: transparent;  background-image: linear-gradient(  to bottombottom,  rgba(white, 0.8),  rgba(white, 0.8) calc(100% - 66px),  rgba(white, 0.6) calc(100% - 66px),  rgba(white, 0.6) calc(100% - 44px),  rgba(white, 0.4) calc(100% - 44px),  rgba(white, 0.4) calc(100% - 22px),  rgba(white, 0.2) calc(100% - 22px),  rgba(white, 0.2));  background-position: bottombottom center;  }

  也有其他辦法可以實現這種效果,比如疊加一層偽元素漸變,并設置pointer-events:none,以免形成干擾。

  文字間的線  我們上面介紹了如何控制漸變色彩點,如果用相似的辦法,我們可以創建以1px為單位的漸變,并重復直到達到line-height。

最簡單的辦法是使用  repeating-linear-gradient來實現,同時也要保證其他元素乖乖就位(比如padding也是基于line-height)。

  Sass  CSS Code復制內容到剪貼板  .parent {  padding: $lh*2;  background: #082838;  background-image: repeating-linear-gradient(  to bottombottom,  rgba(white, 0) 0,  rgba(white, 0) $lh/1em*16px-1,  rgba(white, 0.1) $lh/1em*16px-1,  rgba(white, 0.1) $lh/1em*16px  );  }  為了創造1px的線,我們需要知道line-height以像素為單位的值,然后減1。

減1是為了讓漸變會準確的以已知的line-height來重復,并留出最后1px作為線。

由于我們讓body的font-size為1em,也就是16px,所以line-height的單位被設置為em,你可以通過除去1em來移除單位,然后乘以16px再減1來得到我們需要的數值。

  Position images one-per-line  還有一件知道line-height你可以做的事就是,讓bakcground-size與其匹配,至少在垂直方向上要匹配。

然后你就可以讓背景垂直重復,最終效果就是:一行一個圖片。

  Sass  CSS Code復制內容到剪貼板  .text  background-image: url(image.svg);  background-size: $lh $lh;  background-repeat: repeat-y;  padding-left: $lh*2;  }

版權聲明:本文由 第五從蕾 整理編輯。

原標題:line―height,lineheight居中

轉載注明出處:http://www.dn9ww09s.icu/basics/12729.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • iOS13新功能,ios新功能有哪些

    iOS13新功能,ios新功能有哪些 相關圖片蘋果ios13新功能Ios12的更新主要是為了穩定性維護,但是功能更新很少,但是在Ios12的最新更新中,會有一些主要的Siri升級。Siri是IOS的核心功能之一。在此更新中,新蘋果12.3.1有什么新功...

  • 編程注釋,Java注釋

    編程注釋,Java注釋 相關圖片plc編程中注釋顯示CSS注釋和HTML教程中描述的注釋一樣,在CSS文檔中也起著重要的作用。它們可以幫助我們記住CSS的含義、加載到HTML文檔的位置等。CSS注釋的開頭是/*,c語言如何快速注釋...

  • nrg是什么文件格式,nrg格式文件怎么打開

    nrg是什么文件格式,nrg格式文件怎么打開 相關圖片rar是什么文件格式有些用戶在電腦上看到了NRG文件,但很多人不知道NRG文件是什么,它們對NRG有用的是一種存儲圖像文件。它的對象可以是硬盤或光盤。它們大多用于光盤圖像。著名的...

  • canvas元素有什么用,canvas元素

    canvas元素有什么用,canvas元素 相關圖片canvasHTML5創建畫布元素代碼如下:!--! DOCTYPE聲明必須是HTML文檔的第一行,在HTML標記之前。-- !DOCTYPE html htmlhead canvas怎么用...

  • delphi10,delphi xe4

    delphi10,delphi xe4 相關圖片delphi xe 10Delphi,Delphi xe2,windows下的可視化開發工具,最常用的是Delphi 7,xe2是目前最新的版本,支持Mac下的程序開發。Delphi delphi 安卓...

  • magisk模塊編寫,python模塊有哪些

    magisk模塊編寫,python模塊有哪些 相關圖片python模塊大全印刷媒體(如雜志或報紙)在網站上的最大優勢是頁面和段落布局的靈活性。例如,打印媒體能夠優雅地填充多個列,甚至如下面的屏幕截圖所示的那樣復雜,但是由于w...

  • subtotal中9是什么意思,subtotal用法

    subtotal中9是什么意思,subtotal用法 相關圖片篩選后面怎么顯示數字很多人只把Excel作為一個簡單的輸入函數,他們不知道如何使用這個函數。實際上,使用一些函數可以大大提高效率。本文將與您分享如何使用subtotal函數一些用戶...

  • 抖音怎么更換音樂,抖音如何換自己的音樂

    抖音怎么更換音樂,抖音如何換自己的音樂 相關圖片抖音的音樂怎么找很多人喜歡用自助餐來拍攝小視頻。為了防止小視頻過于單調或使視頻更加有趣,他們會為小視頻設置背景音樂。有時,如果你選擇了錯誤的背景音樂或找到了一個更...

  • 沒有廣告的h5,不帶廣告h5

    沒有廣告的h5,不帶廣告h5 相關圖片h5創意廣告2月中華H5廣告行業精品精選h5廣告怎么投放...

  • adobe acrobat xi pro安裝,pdf最新序列號

    adobe acrobat xi pro安裝,pdf最新序列號 相關圖片adobe安裝序號Adobe Acrobat Xi Pro是Adobe公司Acrobat系列的最新產品,用于編輯PDF,Adobe Acrobat Xi Pro支持將PDF文件轉acrobatpro安裝...

熱評文章

  • 美版卡貼機信號穩定嗎,一張卡貼能用多久

    美版卡貼機信號穩定嗎,一張卡貼能用多久 相關圖片卡貼機能關機嗎當用戶了解到二手iPhone時,應該已經聽說了貼卡機的概念,但有些用戶還是不明白貼卡機是什么意思,貼卡機就是使用手機貼卡的iPhone設備,也就是海外鎖定的iP卡貼機...

  • 可以問siri什么,不能問siri

    可以問siri什么,不能問siri 相關圖片siri的回答Siri是iPhone上的語音助手。你可以很容易地使用語音命令做很多事情。Siri可以發送消息、打電話、查看日歷和執行更多任務,因此iPhone用戶如何使用Sisiri為什么不能連續問...

  • canvas繪制,html繪制到canvas

    canvas繪制,html繪制到canvas 相關圖片canvas繪制矩形首先,在繪圖環境中,繪圖文本提供了兩種在畫布中繪制文本的方法。Stroketext(text,x,y):在(x,y)處繪制空文本Filltext(text,x,canvas清除上一次繪制...

  • 什么是子彈短信怎么用,什么是子彈短信

    什么是子彈短信怎么用,什么是子彈短信 相關圖片子彈短信好用么如今,人們關注的焦點應該是錘子生產的子彈短信。幾天前,我們把微信推到了應用商店的頂端。彈頭信息上有懸掛球的小功能,使用非常方便。不過,也有一些用戶不...

  • 獲取input輸入框的內容,獲取input

    獲取input輸入框的內容,獲取input 相關圖片js獲取input! DOCTYPE htmlhtmlheadmeta charset=UTF-8/titlehtml5獲取輸入內容/Title/headbody input t獲取input輸入框的值...

  • 迅捷pdf轉換器,迅捷pdf在線轉換器

    迅捷pdf轉換器,迅捷pdf在線轉換器 相關圖片pdf轉換器哪個好用我們經常需要將PDF格式轉換為其他常用的可編輯格式。在這個時候,快速的PDF轉換器將幫助我們很多。快速PDF轉換器不斷更新一些新的功能,其中PDF抽取頁面的功能p...

  • 云群組分享拉,百度云群組 拉

    云群組分享拉,百度云群組 拉 相關圖片百度云群組巴拉圈子當你分享你的下載資源時,百度云現在被廣泛使用。雖然很慢,但不容易分享。有很多資源,但它們無法隱藏在快速封面部分。很難想象如何使用它們。我必須表現...

  • 鼠標動畫,鼠標懸停動畫

    鼠標動畫,鼠標懸停動畫 相關圖片ppt鼠標經過觸發動畫通過本例的制作,我們可以加強對前人知識的理解,學會如何將其結合起來達到更好的效果,用簡單的方法創造出酷炫的立體效果,并在本例創作理念的結合中加深...

  • 8x榮耀價格,榮耀 8X

    8x榮耀價格,榮耀 8X 相關圖片榮耀8XMaX參數近日,榮耀在西安的發布會上推出了榮耀8x系列智能手機。榮耀8x零售價1399元,配置麒麟710,支持GPU渦輪黑技術,各方面性能穩定。設計中榮耀8x實體店價格...

  • 樹葉有哪些顏色,樹葉顏色

    樹葉有哪些顏色,樹葉顏色 相關圖片春天的樹葉是什么顏色的一。首先,打開flash,創建一個新的空白flash文檔。默認情況下,所有設置都正常。選擇“線”工具在場景2中繪制線。選擇選擇工具,將鼠標指針放在線中間的任...

關注微信

变脸官网查询