請問怎麼通俗的理解css中的行框和行內框?
深入理解CSS中的行高
文本行中的每個元素都會生成一個內容區。這個內容區則會生成一個行內框(inline box),當一行中的所有內容均已生成了行內框,那麼接下來在行框的構造中就會考慮這些行內框,行框的高度要足以包含最高行內框的頂端和最低行內框的底端。
不是很理解問題,是line height還是那個padding?
&
&
&
我要試驗test一下我要試驗test一下我要試驗test一下
&第二次test&&第二次test&
我要試驗test一下我要試驗test一下我要試驗test一下我要試驗test一下我要試驗test一下
&
&
&
&
&
我要試驗test一下我要試驗test一下我要試驗test一下
&第二次test&&第二次test&
我要試驗test一下我要試驗test一下我要試驗test一下我要試驗test一下我要試驗test一下
&
&
總結:也就是說,給行內元素如span增加padding或者border,顯示上感覺行內框高度變了,但其實行內框的height一直沒有變,但width可以變化;而且給行內元素margin值顯示上也不會有什麼變化;
唯一的改變行內框高度的做法就是用line-height給行內元素設置行高,這樣行內框高度變化,繼而改變行框的高度
行內元素真的只能死板的在一行呆著嗎,和塊級元素相比他是不是有些不公平呢?我猜測發明者也已經想到了這個問題!
答案是有辦法增加行與行之間垂直的距離滴!那就是行高!
對於行內元素、尤其是文字來說,定位還是很困難的,漢語字元怎麼就跟英語字元在一行顯示了呢?怎麼就能夠讓文字規規整整的一行一行的顯示呢?
關於盒子模型大家都知道,但是內聯元素的inline-box模型就很多人不知道了。
首先看圖:
這是在chrome下,字體大小設置成5em的效果。
&這是中文再加點English&
&
&換個line啊~&
span {
font-size:5em;
}
頂線(top line):行內元素最高的那條水平線
中線(middle line):我猜測是頂線和底線的中心水平線。
基線(base line):英文字母為底的下面水平線
底線(bottom line):行內元素最低的那條水平線。
由此引出一些概念:
行高:兩行文字基線之間的距離
行距:上一行內聯元素的底線,與下一行內聯元素的頂線之間的垂直距離。
下面圖應該更加明確:
下面說一說行內框:
由此可以看出,行內框的寬度=行間距+內容區寬度 而行高=內容區+行間距(這裡有些繞,細心琢磨發現就是如此)
所以可以得出行內框的高度就是等於行高的。只是位置不同了,我認為這是更直觀的來定位元素的位置,而抽象出來的概念。由此我們就可以把line-height,當作如圖所示行內框的位置。
這就說明了為什麼line-height可以垂直的控制行內元素的寬度了。
一行有很多行內框,而所謂行框就是是包含這一行行內框最高點和最低點的
如圖所示:如果把一行中的每個行內元素,作為一個個框的話,那麼行框就是取所有元素中最高和最低線,所以圖中最外面就是行框。
本文摘選自我寫的一篇文章:細究內聯元素(你一定不知道的東西)
關於我的專欄:前端技術
我也是剛學習前端的渣渣,期待一起進步!
推薦閱讀:
※為什麼排版引擎解析 CSS 選擇器時一定要從右往左解析?
※如何寫一個類似 LESS 的編譯工具?
※關於 CSS 的好書有哪些?
※CSS 里的 height 屬性與 line-height 屬性有什麼區別?
※如何評價真阿當在前端領域的技術水平?
TAG:CSS |