摘要:默認(rèn)情況下,行內(nèi)元素不會以新行開始,而塊級元素會新起一行。常見的內(nèi)聯(lián)元素有分類替換元素在中,可替換元素的展現(xiàn)效果不是由來控制的。這些元素是一種外部對象,它們外觀的渲染,是獨立于的。
前言
在寫作本文章前原本打算只是復(fù)習(xí)一下 line-height 和 vertical-height 這兩個屬性而已, 結(jié)果發(fā)現(xiàn)掉進了一個大坑網(wǎng)上有很多篇文章看的我云里霧里的, 最后決定還是從頭來一遍吧, 這篇文章是這次的一個記錄.
這次的故事雖然時因為 line-height 和 vertical-align 這兩個屬性引起的, 但是實際上本篇文章中主要探討的話題是 "文本是如何渲染", 雖然這兩個屬性與話題關(guān)聯(lián)很大但是本文中不會過多的提及它們, 請確保熟悉它們.
內(nèi)聯(lián)元素(行內(nèi)元素)你也可以直接跳過這章, 去閱讀后面精彩的部分, 如果遇到了概念問題可以在回來進行查閱.
我們這里不會仔細(xì)的討論 "內(nèi)聯(lián)元素", 只是為了后面的內(nèi)容做鋪墊, 這些內(nèi)容可能需要你提前預(yù)習(xí).
另外 "內(nèi)聯(lián)元素" 和 "行內(nèi)元素" 實際上是同一個東西只是叫法不同, 但是本篇文章中沒有統(tǒng)一叫法.
表現(xiàn)一個內(nèi)聯(lián)元素只占據(jù)它對應(yīng)標(biāo)簽的邊框所包含的空間。
默認(rèn)情況下,行內(nèi)元素不會以新行開始,而塊級元素會新起一行。
常見的內(nèi)聯(lián)元素有:
b, big, i, small, tt
abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
a, bdo, br, img, map, object, q, script, span, sub, sup
button, input, label, select, textarea
分類 替換元素在 CSS 中,可替換元素(replaced element)的展現(xiàn)效果不是由 CSS 來控制的。這些元素是一種外部對象,它們外觀的渲染,是獨立于 CSS 的。
典型的替換元素有:
非替換元素
那些沒有 "特異功能" 的 "內(nèi)聯(lián)元素" 就是 "非替換元素", 典型值如下:
布局
內(nèi)聯(lián)元素除了 "行內(nèi)元素不會以新行開始" 這種大家都知道的特性外, 還有幾點特殊的表現(xiàn). 例如塊級元素上的幾個常見屬性:
margin
padding
border
這些屬性對于內(nèi)聯(lián)元素來說不會影響其垂直高度, 但是這不意味著這些內(nèi)容被裁剪掉了而是因為 margin 是透明的而 padding 通常來說也是透明的.
唯一例外的是 border 它可以被看到, 不過依然不會影響垂直高度:
圖片中文字 "Emmm" 被 包裹了起來并且設(shè)置了 margin 和 padding 和 border 請仔細(xì)觀察在 "垂直方向" 實際上高度并沒有增加.
注意:這種表現(xiàn)只會出現(xiàn)在 "非替換元素" 上, "替換元素" 的表現(xiàn)是不同的后文中會提到.
字體我們先從字體開始, 因為文本布局的基本單位毫無疑問是由文字組成的:
hello world
當(dāng)討論的文字的時候, 最常見的有關(guān) css 屬性就是 font-size 了, 通常認(rèn)為 font-size 指定的值就是文字的大小.
想要證明 font-size 不等于 "字體大小" 實際上非常簡單, 打開瀏覽器的開發(fā)者工具你就可以證明這點, 例如我們有如下的代碼:
hello world
慣性思維會讓我們認(rèn)為這個元素的大小就是 25px .
哈哈!歡迎來到css世界:
上圖中我們看到一個 font-size:25px 的元素卻占據(jù)了 32.8px 的高度的空間.
實際上, font-size 屬性與你看到的實際字體大小之間的具體關(guān)系由字體的設(shè)計者來確定. 這種關(guān)系設(shè)置為字體本身中的一個 em 方框(有人也稱為 em 框).css權(quán)威指南(第三版)
你設(shè)置的 font-size 實際上控制的是文字的 em框 而不是字體的本身的大小, 而 em框 與文本之間的間距是由字體的設(shè)計者決定的.
em框 的概念就類似小學(xué)使用的田字格, 所有字體都相對于田字格進行書寫.
不過按照上面的理解, font-size 控制的是 em框 的大小, 按照這樣的設(shè)計字體大小至少不會超過 "25px" 才對.
沒錯實際上大部的字體都嚴(yán)格遵守了 em框 的大小限制, 當(dāng)我們將 line-height 大小設(shè)置為 font-size 一樣的時候:
hello world
我們發(fā)現(xiàn)字體渲染大小都是小于或者等于 "25px" 的:
那么多出去的高度是從哪里來的?
實際上字體作者有相當(dāng)大的權(quán)力來控制字體,不僅可以讓字體大小超過 em框, 還可以指定字體的上下留白空間.
具體可以參考這篇文章, 從制作字體的角度解釋了字體的渲染表現(xiàn), 從而可以解釋 "不同字體之間為什么差異這么大" 這個令人頭大的問題.
line-height 的默認(rèn)值在MDN上對于 line-height 有如下大致的描述:
當(dāng) line-height 使用默認(rèn)值的時候(這個值是 normal), 這個值約為 1.2(不同瀏覽器不同), 取決于元素的 font-family.
注意
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/116145.html
摘要:默認(rèn)情況下,行內(nèi)元素不會以新行開始,而塊級元素會新起一行。常見的內(nèi)聯(lián)元素有分類替換元素在中,可替換元素的展現(xiàn)效果不是由來控制的。這些元素是一種外部對象,它們外觀的渲染,是獨立于的。 前言 在寫作本文章前原本打算只是復(fù)習(xí)一下 line-height 和 vertical-height 這兩個屬性而已, 結(jié)果發(fā)現(xiàn)掉進了一個大坑網(wǎng)上有很多篇文章看的我云里霧里的, 最后決定還是從頭來一遍吧, ...
摘要:源碼漫游指南一作者秘塔科技算法研究員前幾天發(fā)布了第五屆頂級語言交互排行榜,語言繼續(xù)穩(wěn)坐第一把交椅,并且相比去年的排行情況,拉開了與第二名的距離去年第二名的排名得分為。包含字節(jié)碼相關(guān)的底層抽象。字節(jié)碼對象的實現(xiàn)。源文件執(zhí)行結(jié)束后的清理工作。 Python源碼漫游指南(一) 作者:秘塔科技算法研究員 Qian Wan 前幾天IEEE Spectrum發(fā)布了第五屆頂級語言交互排行榜,Pyth...
摘要:特意對前端學(xué)習(xí)資源做一個匯總,方便自己學(xué)習(xí)查閱參考,和好友們共同進步。 特意對前端學(xué)習(xí)資源做一個匯總,方便自己學(xué)習(xí)查閱參考,和好友們共同進步。 本以為自己收藏的站點多,可以很快搞定,沒想到一入?yún)R總深似海。還有很多不足&遺漏的地方,歡迎補充。有錯誤的地方,還請斧正... 托管: welcome to git,歡迎交流,感謝star 有好友反應(yīng)和斧正,會及時更新,平時業(yè)務(wù)工作時也會不定期更...
摘要:深度學(xué)習(xí)浪潮這些年來,深度學(xué)習(xí)浪潮一直沖擊著計算語言學(xué),而看起來年是這波浪潮全力沖擊自然語言處理會議的一年。深度學(xué)習(xí)的成功過去幾年,深度學(xué)習(xí)無疑開辟了驚人的技術(shù)進展。 機器翻譯、聊天機器人等自然語言處理應(yīng)用正隨著深度學(xué)習(xí)技術(shù)的進展而得到更廣泛和更實際的應(yīng)用,甚至?xí)屓苏J(rèn)為深度學(xué)習(xí)可能就是自然語言處理的終極解決方案,但斯坦福大學(xué)計算機科學(xué)和語言學(xué)教授 Christopher D. Mannin...
閱讀 25629·2021-09-29 09:41
閱讀 4787·2021-09-10 11:20
閱讀 1918·2021-09-09 09:32
閱讀 1881·2019-08-30 15:44
閱讀 3192·2019-08-29 17:13
閱讀 2808·2019-08-29 14:14
閱讀 2061·2019-08-29 14:11
閱讀 3220·2019-08-29 12:36