資訊專欄INFORMATION COLUMN
摘要：基線底線頂線中線頂線中文漢字的的上端沿中線橫過英文字母的中間的線基線并不是漢字文字的下端沿，而是英文字母的下端沿底線中文漢字的下端沿內(nèi)容區(qū)指底線和頂線包裹的區(qū)域行內(nèi)元素可以通過屬性顯示出來，實(shí)際中不一定看得到，但確實(shí)存在。
基線、底線、頂線、中線、vertical-align 頂線：中文漢字的的上端沿； 中線：橫過英文字母x的中間的線； 基線（base line）并不是漢字文字的下端沿，而是英文字母“x”的下端沿； 底線：中文漢字的下端沿； 內(nèi)容區(qū)：指底線和頂線包裹的區(qū)域（行內(nèi)元素display：inline可以通過background-color屬性顯示出來），實(shí)際中不一定看得到，但確實(shí)存在。內(nèi)容區(qū)的大小依據(jù)font-size的值和字?jǐn)?shù)進(jìn)行變化。 行高（line-height）：包括內(nèi)容區(qū)與以內(nèi)容區(qū)為基礎(chǔ)對(duì)稱拓展的空白區(qū)域，我們稱之為行高。一般情況下，也可以認(rèn)為是相鄰文本行基線間的距離。 行距：指相鄰文本行間上一個(gè)文本行底線和下一文本行頂線之間的距離。當(dāng)然，我更愿意認(rèn)為是（上文本行行高-內(nèi)容區(qū)高度）/2+（下文本行行高-內(nèi)容區(qū)高度）/2。 行內(nèi)框：是一個(gè)瀏覽器渲染模型中的一個(gè)概念，無法顯示出來，但是它又確實(shí)存在，它的高度就是行高指定的高度。 行框（line box）：同行內(nèi)框類似的概念，行框是指本行的一個(gè)虛擬的矩形框，也是瀏覽器渲染模式中的一個(gè)概念。行框高度等于本行內(nèi)所有元素中行內(nèi)框最大的值（以行高值最大的行內(nèi)框?yàn)榛鶞?zhǔn)，其他行內(nèi)框采用自己的對(duì)齊方式向基準(zhǔn)對(duì)齊，最終計(jì)算行框的高度）。 ? vertical-align 此處需要特別注意的是：垂直對(duì)齊屬性只對(duì)文本有效（是指包含了#Text節(jié)點(diǎn)的元素節(jié)點(diǎn)才能正確地處理vertical-align屬性）。同時(shí)，該屬性不能繼承。 只有元素屬于inline或是inline-block ，vertical-align屬性才會(huì)起作用。 基線對(duì)齊（vertical-align : baseline）使元素的基線同基準(zhǔn)元素（取行高最高的作為基準(zhǔn)）的基線對(duì)齊 頂端對(duì)齊（vertical-align : top）是將元素的行內(nèi)框的頂端與行框的頂端對(duì)齊 底端對(duì)齊（vertical-align : bottom）與頂端對(duì)齊（vertical-align : top）相反 中間對(duì)齊（vertical-align : middle）通常使用在圖片上，將圖片的垂直方向的中線與文本行的中線（文字元素的行內(nèi)框中線）對(duì)齊。 文本頂端對(duì)齊（vertical-align : text-top）是將元素行內(nèi)框的頂端同行框的頂線對(duì)齊 文本底端對(duì)齊（vertical-align : text-bottom）是將元素行內(nèi)框的底端同行框的底線對(duì)齊 上標(biāo)（vertical-align:super）使元素的基線相對(duì)于基準(zhǔn)元素的基線升高； 下標(biāo)（vertical-align:sub）使元素的基線降低，移動(dòng)的幅度CSS規(guī)范中沒有規(guī)定，由瀏覽器來決定。 長(zhǎng)度值和百分比值和上下標(biāo)類似，可使元素的基線相對(duì)于基準(zhǔn)元素的基線升高（正值）或者降低（負(fù)值）。 CSS 關(guān)鍵字 unset 是 關(guān)鍵字 initial 和 inherit的組合。 如果有繼承父級(jí)樣式，則將該屬性重新設(shè)置為繼承的值，如果沒有繼承父級(jí)樣式，則將該屬性重新設(shè)置為初始值。換句話說這個(gè)unset關(guān)鍵字會(huì)優(yōu)先用inherit的樣式，其次會(huì)應(yīng)該用initial的樣式。文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/2029.html
摘要：引言說起大家都知道他是用在對(duì)相鄰的文字和內(nèi)聯(lián)元素上，比如常見的將一個(gè)圖標(biāo)和相鄰的文字居中對(duì)齊。每個(gè)內(nèi)聯(lián)元素也有其自己的基線，頂線和底線。內(nèi)聯(lián)元素的基線位置低于行框的基線。內(nèi)聯(lián)元素的基線相對(duì)于行框基線移動(dòng)相應(yīng)于行高百分比的數(shù)值。 平時(shí)遇到vertical-align時(shí)候會(huì)有各種抓狂的時(shí)刻，調(diào)來調(diào)去雖然也弄好了但是心里面一直很虛，因?yàn)橐恢睕]有透徹理解過這個(gè)屬性，搜索時(shí)候發(fā)現(xiàn)了一篇很棒的文章...
摘要：中線基線頂線底線中線基線頂線底線是文本的幾個(gè)基本線，其對(duì)應(yīng)位置如下圖基線小寫英文字母的下端沿。中線小寫英文字母的中間。將元素的基線與其父元素的下標(biāo)基線對(duì)齊。將元素的基線對(duì)準(zhǔn)給定長(zhǎng)度高于其父元素的基線。 今日勵(lì)志語 往日不可追，來日猶可期，祝大家2019年繼往開來 迷之間隙 我們創(chuàng)建一個(gè)導(dǎo)航列表，并將其列表 item 設(shè)置為 inline-block，主要代碼如下： 我 我 ...
摘要：行高行距半行距從上到下四條線分別是頂線，中線，基線，底線。行高指文本行基線間的垂直距離。上圖任意兩條相同顏色的垂直距離也是行高。父元素不同的行高單位影響子元素的繼承。 行高、行距、半行距 showImg(https://segmentfault.com/img/bVAdEh); 從上到下四條線分別是 頂線，中線，基線，底線。 行高 指文本行基線間的垂直距離。上圖任意兩條相同顏色的垂直距...
摘要：整理一下關(guān)于行高的一些基本概念。行框的高度是這一行行內(nèi)框的最高點(diǎn)到最低點(diǎn)的距離。所以在沒有設(shè)置固定高度的元素中，高度是由這個(gè)元素中所有行框高度疊加而成的。提示有種說法是行框的高度等于這一行中行內(nèi)框中最大的，這種說法是錯(cuò)誤的。 整理一下關(guān)于行高的一些基本概念。原文鏈接：http://www.zengkan.win/?p=84 1.定義 每個(gè)文本行中可以看做有四條線：頂線，中線，基線和底線...
閱讀 2977·2021-10-19 10:09
閱讀 3189·2021-10-09 09:41
閱讀 3458·2021-09-26 09:47
閱讀 2780·2019-08-30 15:56
閱讀 650·2019-08-29 17:04
閱讀 1042·2019-08-26 11:58
閱讀 2564·2019-08-26 11:51
閱讀 3426·2019-08-26 11:29
