CSS基礎:你必須要知道的行高屬性 line-height

来源:https://www.cnblogs.com/wmbuke/archive/2023/11/10/17824246.html
-Advertisement-
Play Games

作者:WangMin 格言:努力做好自己喜歡的每一件事 對於初學CSS的同學來說,會有很多屬性相關的疑問,行高屬性 line-height一定是其中一個,因為它是CSS中非常重要的一個屬性,這個屬性改變元素在網頁中的行高,讓你的網頁看起來更加整潔,美觀。 什麼是行高? CSS中的行高(line-he ...


作者:WangMin
格言:努力做好自己喜歡的每一件事

對於初學CSS的同學來說,會有很多屬性相關的疑問,行高屬性 line-height一定是其中一個,因為它是CSS中非常重要的一個屬性,這個屬性改變元素在網頁中的行高,讓你的網頁看起來更加整潔,美觀。

什麼是行高?

CSS中的行高(line-height)是指網頁中每行文字之間的距離,就是對於同一行內的不同內容,行高決定它們之間的間距。

換一句話來說,在CSS中包括文字的每一行不是只有文字的高度,其實還有上間距、下間距,所以行高指的是文字的高度+上下間距。

合理設置文字行高不僅能夠讓網頁更加美觀與整潔,還能夠增加用戶的視覺與閱讀體驗,在大段文字中,合適的行高可以讓用戶閱讀起來更加舒適。

你可能還是不明白行高是什麼?下麵我通過幾圖來仔細給大家講一下吧!

那麼在學習行高之前,我們就必須要知道在文本中存在有四條線: 頂線、中線、基線、底線,之後才能真正的去理解line-height屬性的含義! 如下圖:

頂線,在中文漢字的頂部位置就是頂線的位置!就是圖中綠色線條所在的位置

中線,css中有一個概念叫x-height,意思是小寫字母x的高度! 在css中,有些屬性值的定義就和這個x-height有關, 最有代表性的就是vertical-align的屬性值middle。這裡的middle就是中間的意思,指的其實就是基線 往上1/2的位置,也就是小寫x字母的中間交叉點那個位置!這裡橫過小寫英文字母x中間交叉點的線就是中線。就是圖中藍色線條所在的位置

基線,要瞭解基線 ,需要知道在英文中的26個字母當中 ,有一個小寫的x字母在CSS中是相當特殊的,基線就是小寫x字母的下邊緣(線) ! 就是圖中紅色線條所在的位置

底線,在中文漢字的底部位置 就是底線的位置 !就是圖中紫色線條所在的位置

那麼從上圖中我們就可以看到其實行高指的是上下文本行的兩條基線之間的距離,即圖中兩條紅線之間的距離。

看到這裡你應該明白行高了吧!接下來就一起來看看它在CSS中是如何表示的,以下是它的幾種表示方式。

設置字體的行高的方法

1、使用像素(px)單位設置行高

使用像素單位設置行高是最常見的方法,也是最容易理解的。可以通過以下方式來設定行高

<style>
p{
  font-size: 16px;
  line-height: 32px;
}
</style>

設置行高之前:

設置行高之後:

你可以看到每行文字之間明顯出現了一定的距離,對比之下,一定是設置行高之後文字看起來更加清晰。

在上述例子中,字體大小font-size為16px,行高line-height為32px,也就是說一行文字的高度為32個像素。用這種方式設置行高時,行高最好是文字大小的2倍。當然這不是強制性的,你可以根據自己的需求來調整。

這個設置可以適用於大多數情況下,但是需要註意的是,在不同的字體類型和字體大小的情況下,可能顯示出不同的效果。這裡我並沒有設置字體類型,預設字體類型是' 微軟雅黑 '。

但這種方式有一個缺點,當文字大小發生較大的改變時,固定的行高會讓文字之間看起來會很緊湊,如下:

<style>
p{
  font-size: 20px;
  line-height: 16px;
}
</style>

這個時候以下幾種方式就可以解決這個問題,一起往下看吧!

2、使用百分比(%)單位設置行高

使用百分比單位可能更加靈活,它可以自適應不同的字體大小。在下麵的案例中,我們設置字體大小為20px,行高為150%:

<style>
p{
  font-size: 20px;
  line-height: 150%;
}
</style>

這裡的行高150%的意思是相當於將行高設置為字體大小的1.5倍,即20 * 1.5 = 30px。那麼行高200%就相當於行高是字體大小的2倍,即行高 = 字體大小 * 2。

以這種方式設置行高時,常常行高設置為150%或者200%,即 line-height: 150%; 或 line-height: 200%;

這種方法可以確保每個字體大小的行高都相同,並適用於任何比例。

3、使用單位 em 設置行高

使用em單位是讓行高基於當前元素文字大小來設置,因為em單位是相對於當前元素的字體大小設置的,行高會隨著字體大小改變。下麵的案例設置line-height為1.5個em

<style>
p{
  font-size: 16px;
  line-height: 1.5em;
}
</style>

在這種情況下,當文字大小為16px時,行高為 16 * 1.5 = 24px。但是當你改變字體大小時時,例如font-size: 20px;line-height也會相應發生變化,為20 * 1.5 = 30px。

一般情況下,設置line-height的值為1.5 em ~ 2 em 比較合適。

用這種方式設置行高時,實際行高 = 字體大小 * em單位前面的數值。它的效果跟第二種方式是一樣的。

4、使用無單位數值設置行高

使用無單位的數字設置行高其實是最靈活的方法,它也可以自適應任何字體大小的文本。在下麵的案例中,我們將line-height設置為1.5

<style>
p{
  font-size: 16px;
  line-height: 1.5;
}
</style>

其實這種方式更第二、三種方式是一樣的,這裡的行高將是字體大小的1.5倍,當字體大小為16px時,行高為 16 * 1.5 = 24px。使用這種方式是最靈活和最可維護的設計方法之一,它可以適用於大多數情況。一般情況下,設置line-height的值為1.5 ~ 2 比較合適

在上述第二、三、四種設置行高的方式中,字體大小是影響文字高度的關鍵因素,當文字大小發生改變時,相應的行高也會發生改變。也就是說我們通過設置字體的大小,可以間接地控制文字的高度

需要註意的兩點:

1)如果不設置行高,則會應用預設的行高,這個值可以因不同瀏覽器而異。

2)行高不能為負值。

以上四種方法都有各自的優缺點,你可以根據實際情況來選擇。不管你使用哪一種方法,都需要按照設計要求來修改line-height值,從而達到更好的文本排版效果。


以上僅是個人見解,若有不足之處歡迎在下方評論指出,那就先分享到這裡!!

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 近幾年IT界軟硬體“國產化”搞得很密集,給很多公司帶來了商機。但是有些公司拿國外的代碼改改換個皮膚,就是“自主知識產權”的國產軟體,光明正大賣錢,這個有點...,還經常有醜聞露出,譬如某星瀏覽器、C某-IDE... 話不多說,最近有個項目需要國產化改造,業主方推薦了國產資料庫 瀚高資料庫,我們原來用 ...
  • 本文分享自華為雲社區《淺析KV存儲之長尾時延問題,華為雲 GeminiDB Redis 探尋行業更優解決方案!》,作者:華為雲資料庫GaussDB NoSQL團隊。 目前,KV存儲的廣泛使用極大程度上源於快速訪問的業務需求,而這種業務通常對時延敏感度高,在較好的平均性能下,還需要解決特定場景下的性能 ...
  • 在之前的實時湖倉系列文章中,我們已經介紹了實時湖倉對於當前企業數字化轉型的重要性,實時湖倉的功能架構設計,以及實時計算和數據湖結合的應用場景。 在本篇文章中,將介紹袋鼠雲數棧在構建實時湖倉系統上的探索與落地實踐,及未來規劃。 數棧為什麼選擇實時湖倉 數棧作為一個數據開發平臺,在未引入實時湖倉之前提供 ...
  • 資料庫底層實現博大精深,本文所述,根據線上場景進行了一些研究和探討,希望能為相關場景提供一些啟示。文章中難免會有不足之處,希望讀者能給予寶貴的意見和建議 ...
  • 前言 近期接到一個關於谷歌EDLA認證的需求,我負責的是谷歌原生桌面佈局的修改,通過研究源碼,將涉及到了一些修改思路發出來,大家可以參考一下有沒有對你有用的信息。主要修改內容有: 1、搜索欄、底部導航欄未居中 2、中部應用未按要求排布,詳情請參考摹客 3、在原生Google桌面未添加中性S-writ ...
  • 使用不可信的數據,通過調用不安全的遞歸函數來暴露預設原型 原型污染:基礎 什麼是原型污染? 原型污染是一種針對JavaScript運行時的註入攻擊。通過原型污染,攻擊者可以控制對象屬性的預設值,從而篡改應用程式的邏輯並可能導致服務被拒絕,甚至在某些極端情況下遠程執行代碼。 現在,你是不是滿腦子充滿了 ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 記錄一下在公司遇到的一些功能,以及相關實現 以上的內容我花了一周時間去實現的,自己也覺得時間很長,但主要因為很少使用ECharts,導致使用的過程中大部分的時間都在查文檔。 對於上面的這些功能點,其實算是寫了兩遍吧,這周一開了個Code ...
  • 1、業務背景 使用vue+element開發報表功能時,需要列表上某列的超鏈接按鈕彈窗展示,在彈窗的el-table列表某列中再次使用超鏈接按鈕點開彈窗,以此類推多表格彈窗嵌套,本文以彈窗兩次為例 最終效果如下示例頁面 2、具體實現和問題拋出 <template> <div class="el_ma ...
一周排行
    -Advertisement-
    Play Games
  • 在C#中使用SQL Server實現事務的ACID(原子性、一致性、隔離性、持久性)屬性和使用資料庫鎖(悲觀鎖和樂觀鎖)時,你可以通過ADO.NET的SqlConnection和SqlTransaction類來實現。下麵是一些示例和概念說明。 實現ACID事務 ACID屬性是事務處理的四個基本特征, ...
  • 我們在《SqlSugar開發框架》中,Winform界面開發部分往往也用到了自定義的用戶控制項,對應一些特殊的界面或者常用到的一些局部界面內容,我們可以使用自定義的用戶控制項來提高界面的統一性,同時也增強了使用的便利性。如我們Winform界面中用到的分頁控制項、附件顯示內容、以及一些公司、部門、菜單的下... ...
  • 在本篇教程中,我們學習瞭如何在 Taurus.MVC WebMVC 中進行數據綁定操作。我們還學習瞭如何使用 ${屬性名稱} CMS 語法來綁定頁面上的元素與 Model 中的屬性。通過這些步驟,我們成功實現了一個簡單的數據綁定示例。 ...
  • 是在MVVM中用來傳遞消息的一種方式。它是在MVVMLight框架中提供的一個實現了IMessenger介面的類,可以用來在ViewModel之間、ViewModel和View之間傳遞消息。 Send 接受一個泛型參數,表示要發送的消息內容。 Register 方法用於註冊某個對象接收消息。 pub ...
  • 概述:在WPF中,通過EventHandler可實現基礎和高級的UI更新方式。基礎用法涉及在類中定義事件,併在UI中訂閱以執行更新操作。高級用法藉助Dispatcher類,確保在非UI線程上執行操作後,通過UI線程更新界面。這兩種方法提供了靈活而可靠的UI更新機制。 在WPF(Windows Pre ...
  • 概述:本文介紹了在C#程式開發中如何利用自定義擴展方法測量代碼執行時間。通過使用簡單的Action委托,開發者可以輕鬆獲取代碼塊的執行時間,幫助優化性能、驗證演算法效率以及監控系統性能。這種通用方法提供了一種便捷而有效的方式,有助於提高開發效率和代碼質量。 在軟體開發中,瞭解代碼執行時間是優化程式性能 ...
  • 概述:Cron表達式是一種強大的定時任務調度工具,通過配置不同欄位實現靈活的時間規定。在.NET中,Quartz庫提供了簡便的方式配置Cron表達式,實現精準的定時任務調度。這種靈活性和可擴展性使得開發者能夠根據需求輕鬆地制定和管理定時任務,例如每天備份系統日誌或其他重要操作。 Cron表達式詳解 ...
  • 概述:.NET提供多種定時器,如System.Windows.Forms.Timer適用於UI,System.Web.UI.Timer用於Web,System.Diagnostics.Timer用於性能監控,System.Threading.Timer和System.Timers.Timer用於一般 ...
  • 問題背景 有同事聯繫我說,在生產環境上,訪問不了我負責的common服務,然後我去檢查common服務的health endpoint, 沒問題,然後我問了下異常,timeout導致的System.OperationCanceledException。那大概率是客戶端的問題,會不會是埠耗盡,用ne ...
  • 前言: 在本篇 Taurus.MVC WebMVC 入門開發教程的第四篇文章中, 我們將學習如何實現數據列表的綁定,通過使用 List<Model> 來展示多個數據項。 我們將繼續使用 Taurus.Mvc 命名空間,同時探討如何在視圖中綁定並顯示一個 Model 列表。 步驟1:創建 Model ...