知乎上的好東西

時間 2021-06-07 22:42:22

1樓:

>

type

="text/css"

>pspan

strong

style

>

>

我要試驗test一下我要試驗test一下我要試驗test一下

>第二次test

span

>

>第二次test

strong

>p>body

>html

>這是只增加紅色padding和黃色border等屬性,行內框顯示上感覺變高了,其實沒變(因為第二行的字還是緊貼這第一行,並沒有在兩行之間產生間隔。)

>

type

="text/css"

>pspan

strong

style

>

>

我要試驗test一下我要試驗test一下我要試驗test一下

>第二次test

span

>

>第二次test

strong

>p>body

>html

>這是新增了行高line-height:50px之後的效果,可以明顯看到第二行文字和第一行文字產生了間隔。

總結:也就是說,給行內元素如span增加padding或者border,顯示上感覺行內框高度變了,但其實行內框的height一直沒有變,但width可以變化;而且給行內元素margin值顯示上也不會有什麼變化;

唯一的改變行內框高度的做法就是用line-height給行內元素設定行高,這樣行內框高度變化,繼而改變行框的高度

2樓:某天

行內元素真的只能死板的在一行呆著嗎,和塊級元素相比他是不是有些不公平呢?我猜測發明者也已經想到了這個問題!

答案是有辦法增加行與行之間垂直的距離滴!那就是行高!

對於行內元素、尤其是文字來說,定位還是很困難的,漢語字元怎麼就跟英語字元在一行顯示了呢?怎麼就能夠讓文字規規整整的一行一行的顯示呢?

關於盒子模型大家都知道,但是內聯元素的inline-box模型就很多人不知道了。

首先看圖:

這是在chrome下,字型大小設定成5em的效果。

這是中文再加點English

換個line啊~

span

頂線(top line):行內元素最高的那條水平線

中線(middle line):我猜測是頂線和底線的中心水平線。

基線(base line):英文本母為底的下面水平線

底線(bottom line):行內元素最低的那條水平線。

由此引出一些概念:

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

下面圖應該更加明確:

下面說一說行內框

由此可以看出,行內框的寬度=行間距+內容區寬度而行高=內容區+行間距(這裡有些繞,細心琢磨發現就是如此)

所以可以得出行內框的高度就是等於行高的。只是位置不同了,我認為這是更直觀的來定位元素的位置,而抽象出來的概念。由此我們就可以把line-height,當作如圖所示行內框的位置。

這就說明了為什麼line-height可以垂直的控制行內元素的寬度了。

一行有很多行內框,而所謂行框就是是包含這一行行內框最高點和最低點的

如圖所示:如果把一行中的每個行內元素,作為乙個個框的話,那麼行框就是取所有元素中最高和最低線,所以圖中最外面就是行框。

本文摘選自我寫的一篇文章:細究內聯元素(你一定不知道的東西)

關於我的專欄:前端技術

我也是剛學習前端的渣渣,期待一起進步!

3樓:

文字行中的每個元素都會生成乙個內容區。這個內容區則會生成乙個行內框(inline box),當一行中的所有內容均已生成了行內框,那麼接下來在行框的構造中就會考慮這些行內框,行框的高度要足以包含最高行內框的頂端和最低行內框的底端

知乎上看到有人說「姨媽笑了」,這種東西真的有用嗎?

禾大稚 占個坑,我剛剛看了眾多回答,然後去下單了 我屬於重度痛經,每次大姨媽駕到都上吐下瀉,在床上什麼也幹不了。痛到無法呼吸。吃了止痛藥效果也不好,可能是之前幾年吃太多了,有點抗藥性。實在是不想痛了。就算是智商稅我也試一試。應該馬上大姨媽就來了。希望會有好效果的。到時候我會更新的。希望大家都能順利度...

關於知乎上的回答?

霜空降 我以前就意識到一件事情了,對於我自己來說寫知乎就是那一瞬間情緒的表達,並不代表個人看法,就是寫寫而已,老是怕別人誤會我的意思,其實沒那麼不開心的。愧疚愧疚,嗚嗚 我錯了 但為什麼之後不把回答刪掉呢?因為它像日記一樣,以後看看那一瞬間的各種情緒的自己,可能會有不一樣的感受吧 松子煲粥 這事得從...

如何在知乎上找到自己喜歡的知乎專欄文章?

Eva 你得點關注才行的,我的完全是碰運氣,一般是看到某個答案,順藤摸瓜地關注答主,發現他還有個專欄,文章還很棒就關注了,目前我最喜歡的專欄是,冷眼看世界。我真的覺得發現寶了,裡面都是關於怎麼看人之類的,以前沒有見過這類,開啟新世界了 史上最全的知乎話題精彩問答整理,沒有之一!https zhuan...