資訊專欄INFORMATION COLUMN
摘要：內(nèi)聯(lián)盒子的高度由決定，限制包含盒子的高度，兩者一致，即把內(nèi)聯(lián)盒子安放在包含盒子內(nèi)，排除其他外界干擾。這時候由內(nèi)聯(lián)盒子模型可知，行間距是等分的，中間部分是，達(dá)到看似居中的效果?？梢缘玫浇Y(jié)論和設(shè)置一致，并非是完全垂直，除非為。
張鑫旭的CSS深入理解之line-height學(xué)習(xí)筆記line-height的定義
行高：兩行文字基線之間的距離
為何是基線：基線是定義所有字線的根本
不同字體和基線的距離不同，在字格中放置的樣式不同
行內(nèi)框盒模型內(nèi)容區(qū)域（content area）
內(nèi)聯(lián)盒子|行內(nèi)框（inline boxes）
行框盒子|行寬（line boxes）
包含盒子（containing box）
內(nèi)聯(lián)盒子模型行高決定內(nèi)聯(lián)盒子高度
內(nèi)容區(qū)域高度只與字號和字體有關(guān)，和行高無關(guān)
行間距（vertical padding）= 行高 - 內(nèi)容區(qū)域
行框高度是行內(nèi)最高內(nèi)聯(lián)盒子到最低內(nèi)聯(lián)盒子的距離
line-height屬性值normal: 和瀏覽器以及元素字體相關(guān)
數(shù)值：1.5，根據(jù)當(dāng)前元素的font-size計算
百分比：150%，根據(jù)當(dāng)前元素的font-size計算
具體長度：1.5em, px, rem
inherit：input的默認(rèn)行高為normal，使用inherit可更改為上下統(tǒng)一
1.5 - 繼承l(wèi)ine-height，元素根據(jù)自身的font-size計算
1.5em, 150% - 設(shè)置line-height的元素計算好具體值再向下傳遞該值
line-height與圖片隱匿文本節(jié)點產(chǎn)生一個不可見的行內(nèi)框，圖片默認(rèn)對齊基線，導(dǎo)致圖片并非貼緊容器底邊
https://codepen.io/curlywater...
對單行行內(nèi)元素的垂直居中，有一種慣用的方法，設(shè)置line-height和height一致。
內(nèi)聯(lián)盒子的高度由line-height決定，height限制包含盒子的高度，兩者一致，即把內(nèi)聯(lián)盒子安放在包含盒子內(nèi)，排除其他外界干擾。
這時候由內(nèi)聯(lián)盒子模型可知，行間距是等分的，中間部分是content area，達(dá)到看似居中的效果。
但其實這個時候，并不是完全居中；
https://codepen.io/curlywater...
上面的例子里，增加字體大小，發(fā)現(xiàn)inline-block的盒子不再居中；
結(jié)合vertical-align來說明，vertical-align:middle其實是根據(jù)x字符的中心線居中，由于字符有下沉的特性，導(dǎo)致這條中心線并不與容器中心線重合。
內(nèi)聯(lián)盒子模型中，content-area的高度受font-size影響，font-size變大，content-area的空間變大，基線的位置向下，x的位置也向下偏移，兩條中心線之間的差距也就越大。
可以得到結(jié)論：line-height和height設(shè)置一致，并非是完全垂直，除非font-size為0。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/117046.html
摘要：上例中，左邊盒子的基線為其底邊緣，右邊盒子的基線為的基線將右邊盒子的行高設(shè)置為，即這個的高度為，位置處于中間。 vertical-align的值 線類：baseline（默認(rèn)）, top, bottom, middle 文字類：text-top, text-bottom 上標(biāo)下標(biāo)類：sub, super 數(shù)值：1px, 1em - 在baseline對齊的基礎(chǔ)上上下偏移一定數(shù)值 百分...
摘要：按照定義來解釋，就是兩行文字之間基線之間的距離。了解完基線的定義后，我們接著來聊行高。上面我們說過，行高就是兩條基線的之間的距離，如下圖所示。 1.寫在前面 兩個多周的時間沒有寫文章了，手好癢好癢，趁著公司在裝修，從上周末到本周都在家辦公，同時公司的項目并不緊急，于是抽著時間梳理了一下CSS中關(guān)于行高line-height的理解，今天發(fā)布出來，大家準(zhǔn)備好了嗎？ 2.基本概念 2.1行高...
摘要：基本概念行高行距行高是指文本行基線間的垂直距離。行框行框是指本行的一個虛擬的矩形框，由該行中行內(nèi)框組成。行框也是瀏覽器渲染模式中的一個概念，無法顯示出來。行框高度等于本行中所有行內(nèi)框高度的最大值。設(shè)置合理的行間距。設(shè)置固定的行間距。 又已經(jīng)快十天沒有寫文章了，一周一篇其實好艱難的說……本來想接著上篇事件（上篇）總結(jié)事件類型的，可是看完之后整理下還是有點亂，就一直拖著沒寫……實在是不能再...
摘要：為了實現(xiàn)文字環(huán)繞效果，規(guī)范規(guī)定的措施是使父容器塌陷，元素脫離文檔流浮動，元素周圍的內(nèi)容轉(zhuǎn)換為圍繞元素排列。從浮動的起因和浮動的實現(xiàn)后果來看，浮動不適合用于大范圍的布局，更適合利用其特性實現(xiàn)一些小范圍的流體布局效果。 張鑫旭的CSS深入理解之float浮動學(xué)習(xí)筆記 float的歷史 float為產(chǎn)生文字環(huán)繞效果而生 float的特性 — 包裹和破壞 包裹：即產(chǎn)生一個BFC破壞：使父容器...
閱讀 3727·2021-11-22 11:59
閱讀 1008·2021-09-27 13:36
閱讀 3737·2021-09-24 09:47
閱讀 2348·2021-09-01 11:39
閱讀 1039·2021-08-31 09:37
閱讀 2391·2021-08-05 10:01
閱讀 1763·2019-08-30 15:55
閱讀 754·2019-08-30 15:54
