line-height系列(二)——對行內元素(文字、圖片、兄弟元素)、塊級元素設置line-height後的表現

来源:http://www.cnblogs.com/zeifenbing/archive/2017/01/20/6309490.html
-Advertisement-
Play Games

對圖片設置line-height不會垂直居中,而是有一個規律:圖片底部向上距離行高中垂線6px。多行文字未必中垂線對齊,可能是底線對齊。 ...


》原創文章,轉載請註明來源!

二、對行內元素(文字、圖片、兄弟元素)、塊級元素設置line-height後的表現

  • line-height通過行內元素(文字、圖片等)表現。
  • 文字的line-height能使文字居中,即垂直居中性。
  • 文字的line-heigh可以通過繼承也可以使用內聯得到(內聯優先)。
  • 圖片的line-height不能居中,放映出的特點是圖片底部總是超過行高中垂線6px的距離。
  • 圖片的line-height只能通過繼承得到,內聯設置無效。
  • 同一行的line-height,中垂線對齊(span)/底線對齊(div)。

1,line-height通過行內元素表現。

<div class="number1" style="line-height:150px;">
<div>你好hahahah<br/>這裡是第二段</div>
</div>

 

裡面的行內元素(文字)分別繼承了line-height 150 而當父元素里無任何行內元素時,line-height不起作用。  

2,給圖片設置line-height

在測試過程中,筆者發現一個奇怪的6px現象,雖然估計並沒啥卵用。以下是筆者的觀察得出的結論,歡迎吐槽和批評。   結論: 1,圖片的line-height只能根據繼承得到,寫在內聯里會被覆蓋。 2,給圖片設置line-height並不能使其居中。表現為圖片底部向上總是距離行高中垂線6px。     關於圖片line-height的神秘6px——圖片底部向上到行高中垂線的距離始終為6px   為了對比相同line-height下文字和圖片的高度表現,為各個行內元素都加上了div,因為div都是由內部的行內元素的高度撐起來的,可直觀反映出行內元素的高度。為了橫向對比,display設置為inline-block。(實際代碼中為了避免inline-block存在間距的影響,html代碼是連在一起的)  
<div style="line-height:150px">
<div class="first">你好hahahah</div>
<div class="wraper">
<img src="C:\Users\Administrator\Desktop\桌面\gallery4.jpg" >
</div>
<div class="sec">這裡是第二段</div>
</div>
.first,.sec{display:inline-block;font-size:16px}
.wraper{display:inline-block}
.wraper img{height:120px;line-height:60px}

 

    給圖片高度為120px設置行高150px後具體行高的變化:189px。   兩旁文字的行高為150px,和圖片的行高底部對齊。從圖片中可以看到三個繼承了同樣line-height的元素對齊的應該是同一條中垂線,並且對齊的不是圖片高度的中垂線而是本來的正常的150px中垂線。那樣圖片相當於多出來的高度撐高了頂部,不納入行框里。   經過計算———— 露出了的圖片高度是189-150=39;即圖片位於內部的高度是81px; 底部距離中垂線:81px-150px/2=6px。 逆推導:圖片會露出高度為120px-(6px+75px)=39px,圖片實際行高:39px+150px=189px   同理可證:img height=60px,line-height=60px, 總line-height=60px-(6px+30px)+60px=84px     進而得出結論:
  • 當圖片的高度 height-6px<=行高/2時,行高高度為實際高度。即使圖片高度只有5px,圖片底部距離行高中垂線也只有6px。
 
  • 當圖片的高度 height-6px>0 且 行高<12px,圖片高度為實際高度。

  • 當 圖片的高度 height-6px>行高/2時,實際高度為 height-6px+lineHeight/2

 

結論:請不要輕易給圖片加line-height!!  

3,兄弟元素設置line-height

在同一行的inline/inline-block元素中,設置了inline-block的div元素對齊方式表現為底線對齊,而像span這樣原本就是inline元素的兄弟元素表現為中垂線對齊。  
<div class="span_part">
<span style="line-height:20px">行高20</span>
<span style="line-height:50px;font-size:30px">行高50</span>
<span style="line-height:18px;">行高18</span>
<span style="line-height:70px;font-size:20px">行高70</span>
</div>
<br/>
<div class="div_part">
<div style="font-size:50px">字體50</div>
<div style="font-size:30px">字體30</div>
<div style="font-size:10px">字體10呵呵</div>
<div style="font-size:70px">字體70</div>
</div>
<br/>
.span_part{border:1px dashed grey; margin-left:30px;}
.span_part span{display:inline-block; }
.div_part{line-height:150px; border:1px dotted grey; margin-left:30px;}
.div_part div{ display:inline-block;}

 

     

三、line-height的實際應用

單行文字應用:

直接line-height設為父元素一樣就可以居中。   若和父元素的高度不一致,如下: 當父元素height和子元素line-height衝突 height:16px; line-height:36px; 佈局上的框大小以父元素的height為準,文字的框大小以line-height為準,但不占據空間。    

多行文字應用:

<div style="line-height:150px">
  <span style="line-height:15px;display:inline-block">

  這是第一行<br/>

  這是第二行

  </span>
</div>
如果不設置display:inline-block,則會每一行都占據150px。目前還不理解為什麼會這樣~

① 父元素(這裡是div)設置和高度一致的 line-height (如200px)

② 子元素 (這裡是span) 設置合適的line-height,並設置display:inline-block、vertical-align: middle;  

 

在文章中的應用:

line-height可以有多種表示方法:px/em normal % inherit 當考慮到繼承性,最好用line-height:1.5   2017-01-20 10:05:09
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 分類搜索實現 1.添加搜索框 打開Index視圖,添加一個搜索框,代碼如下: ... <div class="portlet light"> <div class="portlet-title portlet-title-filter"> <div class="inputs inputs-full ...
  • 本篇博文,我們來說一下外觀模式。 一、案例 我們大家都買過股票嗎?即使沒有買過股票的,也大體知道炒股是什麼回事,說白了就是股票的買賣。 下麵我們用簡單的控制台應用程式來模擬一下股票買賣的場景。代碼如下: 客戶端: 二、演繹 嗯,然而,對於不瞭解股票的朋友來說,面對這麼多支股票,他們也不知道改如何買賣 ...
  • html 裡面的 role 本質上是增強語義性,當現有的HTML標簽不能充分表達語義性的時候,就可以藉助role來說明。通常這種情況出現在一些自定義的組件上,這樣可增強組件的可訪問性、可用性和可交互性。role的作用是描述一個非標準的tag的實際作用。比如用div做button,那麼設置div 的 ...
  • [1]z-index [2]fixed [3]overflow [4]定位父級 ...
  • <span style="vertical-align: middle;"> <input type="checkbox" id="agree" checked="checked"/> <label for="agree"> </label> </span> ...
  • 我的前面一張文章實現了用css3製作旋轉的效果,現在呢,我換另外一種方法來實現.就是使用js結合css3的方法來實現的.下麵我就先上圖給大家看看效果吧 下麵呢我先放上我的css代碼,代碼很簡單: 上面的代碼大家都看得懂,我就不介紹了.我重點講的是js的代碼部分. 我在這就把相對的難點講一下: ...
  • 按照官網安裝完protractor。 升級webdriver-manager,獲取selenium-server-standalone庫文件以及各種瀏覽器驅動文件。 升級後運行命令啟動webdriver-manager以便提供瀏覽器模擬服務。 運行後會出現錯誤“Error: Invalid or c ...
  • 不好意思,沒有像其他公眾號一樣趕著發文章,每年到這個時候總有一大波什麼今年前端預測,技術框架預測什麼的。我這次寫這篇文針對的對象,是想在今年踏入前端這行的人們,不管你現在是徘徊在門口,還是已經半隻腳踏入這片未知領域,都可以參考一下先行者的經驗。 先來個大概預覽: 項目工程化 發展方向 職業環境 總結 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...