【學習筆記】CSS深入理解之line-height

Stardustsky 發布于2019-08-30 15:54 / 692人閱讀

摘要：內聯盒子的高度由決定，限制包含盒子的高度，兩者一致，即把內聯盒子安放在包含盒子內，排除其他外界干擾。這時候由內聯盒子模型可知，行間距是等分的，中間部分是，達到看似居中的效果。可以得到結論和設置一致，并非是完全垂直，除非為。

張鑫旭的CSS深入理解之line-height學習筆記

line-height的定義

行高：兩行文字基線之間的距離

為何是基線：基線是定義所有字線的根本

不同字體和基線的距離不同，在字格中放置的樣式不同

行內框盒模型

內容區域（content area）

內聯盒子|行內框（inline boxes）

行框盒子|行寬（line boxes）

包含盒子（containing box）

內聯盒子模型

行高決定內聯盒子高度

內容區域高度只與字號和字體有關，和行高無關

行間距（vertical padding）= 行高 - 內容區域

行框高度是行內最高內聯盒子到最低內聯盒子的距離

line-height屬性值

normal: 和瀏覽器以及元素字體相關

數值：1.5，根據當前元素的font-size計算

百分比：150%，根據當前元素的font-size計算

具體長度：1.5em, px, rem

inherit：input的默認行高為normal，使用inherit可更改為上下統一

1.5, 1.5em, 150%的差別

1.5 - 繼承line-height，元素根據自身的font-size計算

1.5em, 150% - 設置line-height的元素計算好具體值再向下傳遞該值

line-height與圖片

隱匿文本節點產生一個不可見的行內框，圖片默認對齊基線，導致圖片并非貼緊容器底邊
https://codepen.io/curlywater...

line-height和height設置一致

對單行行內元素的垂直居中，有一種慣用的方法，設置line-height和height一致。
內聯盒子的高度由line-height決定，height限制包含盒子的高度，兩者一致，即把內聯盒子安放在包含盒子內，排除其他外界干擾。
這時候由內聯盒子模型可知，行間距是等分的，中間部分是content area，達到看似居中的效果。

但其實這個時候，并不是完全居中；
https://codepen.io/curlywater...
上面的例子里，增加字體大小，發現inline-block的盒子不再居中；
結合vertical-align來說明，vertical-align:middle其實是根據x字符的中心線居中，由于字符有下沉的特性，導致這條中心線并不與容器中心線重合。
內聯盒子模型中，content-area的高度受font-size影響，font-size變大，content-area的空間變大，基線的位置向下，x的位置也向下偏移，兩條中心線之間的差距也就越大。

可以得到結論：line-height和height設置一致，并非是完全垂直，除非font-size為0。

云服務器 GPU云服務器深入理解webrtc之aec 如何深入理解深度學習深入理解系列深入理解linux

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/117046.html

【學習筆記】CSS深入理解之vertical-align

摘要：上例中，左邊盒子的基線為其底邊緣，右邊盒子的基線為的基線將右邊盒子的行高設置為，即這個的高度為，位置處于中間。 vertical-align的值線類：baseline（默認）, top, bottom, middle 文字類：text-top, text-bottom 上標下標類：sub, super 數值：1px, 1em - 在baseline對齊的基礎上上下偏移一定數值百分...

ermaoL 2019-08-30 15:54 評論0 收藏0
【前端Talkking】CSS系列——CSS深入理解之line-height

摘要：按照定義來解釋，就是兩行文字之間基線之間的距離。了解完基線的定義后，我們接著來聊行高。上面我們說過，行高就是兩條基線的之間的距離，如下圖所示。 1.寫在前面兩個多周的時間沒有寫文章了，手好癢好癢，趁著公司在裝修，從上周末到本周都在家辦公，同時公司的項目并不緊急，于是抽著時間梳理了一下CSS中關于行高line-height的理解，今天發布出來，大家準備好了嗎？ 2.基本概念 2.1行高...

peixn 2019-08-29 15:40 評論0 收藏0
[學習筆記] css中的line-height

摘要：基本概念行高行距行高是指文本行基線間的垂直距離。行框行框是指本行的一個虛擬的矩形框，由該行中行內框組成。行框也是瀏覽器渲染模式中的一個概念，無法顯示出來。行框高度等于本行中所有行內框高度的最大值。設置合理的行間距。設置固定的行間距。又已經快十天沒有寫文章了，一周一篇其實好艱難的說……本來想接著上篇事件（上篇）總結事件類型的，可是看完之后整理下還是有點亂，就一直拖著沒寫……實在是不能再...

frolc 2019-08-28 18:13 評論0 收藏0
【學習筆記】CSS深入理解之float

摘要：為了實現文字環繞效果，規范規定的措施是使父容器塌陷，元素脫離文檔流浮動，元素周圍的內容轉換為圍繞元素排列。從浮動的起因和浮動的實現后果來看，浮動不適合用于大范圍的布局，更適合利用其特性實現一些小范圍的流體布局效果。張鑫旭的CSS深入理解之float浮動學習筆記 float的歷史 float為產生文字環繞效果而生 float的特性 — 包裹和破壞包裹：即產生一個BFC破壞：使父容器...

denson 2019-08-29 17:31 評論0 收藏0