成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

深入理解-CSS內(nèi)聯(lián)元素之line-height

wapeyang / 3343人閱讀

摘要：常見問題這一部分我們來說一說常見的內(nèi)聯(lián)元素的一些問題。通過設(shè)置為，或者使用屬性，都可以達(dá)到去除內(nèi)聯(lián)元素之間的間隙的目的。

上一篇文章我們討論了font-size，這一篇來說另一個與文字關(guān)系密切的屬性line-height。這里涉及到了內(nèi)聯(lián)盒模型相關(guān)的東西，這里保持了與上一篇類似的結(jié)構(gòu)，先來說說概念，然后是度量單位，最后來聊一個常見的內(nèi)聯(lián)元素的現(xiàn)象。

內(nèi)聯(lián)盒模型相關(guān)概念

說到盒模型，只要了解css的基本都知道這個概念，但說到內(nèi)聯(lián)盒模型可能很多人不是特別清楚?，F(xiàn)在我們就來說說內(nèi)聯(lián)盒模型幾個重要的概念。先看圖概覽一下，再逐項(xiàng)往下看。

Tip: 圖中用不同顏色的框標(biāo)注了很多框，這些代表我們下面要說的不同的盒子或不同的概念。

inline-box

inline-box又名內(nèi)聯(lián)盒子，通常由一些標(biāo)簽包裹形成，最常用的如標(biāo)簽包裹文字會形成內(nèi)聯(lián)盒子，那些沒有標(biāo)簽包裹的文字默認(rèn)自己形成一個盒子稱為anonymous inline box匿名內(nèi)聯(lián)盒子。

line-box

line-box名為行框，從名字就可以看出，它是由單行內(nèi)聯(lián)元素形成的一個區(qū)域，注意是每一行都會形成，如果文字由五行，就會形成5個行框。行框的高度基本上是由行框中行高最大的內(nèi)聯(lián)盒子決定的。我使用基本上這個詞，是因?yàn)檫€有其他情況，比如受到vertical-align屬性的影響。

containing-box

container-box就是包含塊的意思，在內(nèi)聯(lián)元素中，包含塊是由行框組成的。說白了就是包裹在所有行框外面的那層盒子。

struct

這個詞可能很多同學(xué)見的比較少，張鑫旭大神稱之為”幽靈空白節(jié)點(diǎn)“，我們這里就用直譯過來的詞”支柱“。

在CSS規(guī)范中有這么一句話，Each line box starts with a zero-width inline box with the element"s font an d line-height properties. We call that imaginary box a ”struct"。翻譯過來意思就是每一個行框開始的位置都有一個寬度為0，并且行高和字體大小都與該元素相同的內(nèi)聯(lián)盒子。這個假想的內(nèi)聯(lián)盒子就被稱為“支柱”。簡單來說就是可以想象成行框前面有一個寬為0的空字符。

可能有的人會問，這個東西有什么用那？(⊙v⊙)嗯，用處大了去了，由于其幾乎無處不在的特性并且由于寬度為0，我們平時在內(nèi)聯(lián)元素中遇到的很多奇怪的問題都是由“struct”引起的。我們暫時先放下這個，文章的最后我們再看這個東西引發(fā)的問題。

度量單位

這一部分說說行高的單位，我們不再列出所有的單位，因?yàn)檫@些完全可以從官方文檔上看到，我們這里只說說重要的或者說容易錯的部分。

默認(rèn)值

line-height的默認(rèn)值是什么，查下手冊我們就能很容易的看到，它的值是normal，那么normal是多大？從我的理解來說，它的值受到font-family和瀏覽器的影響，IE/Firfox與chorme表現(xiàn)存在部分不一樣的地方。但可以知道的是normal的初始值與字體的content-area的區(qū)域高度相同。不了解content-area的同學(xué)可以去看我的上一篇文章的line-height部分。這里簡單說一下，inline水平的元素設(shè)置背景后，背景部分就是內(nèi)容區(qū)域的部分，與初始line-height同高。

百分比、em和數(shù)值的區(qū)別

百分比和em與數(shù)值的區(qū)別在于繼承性質(zhì)上的不同，百分比和em被繼承的是計(jì)算后的值，而數(shù)值類型的繼承的是一種“計(jì)算規(guī)則”。

常見問題

這一部分我們來說一說常見的內(nèi)聯(lián)元素的一些問題。

display: inline-block元素間的空隙

這個問題，大家都遇到過，大家可以看看我做的實(shí)例的第一部分。首先我們會看到元素和元素之間的一定的間隙。這個間隙會引發(fā)的問題有，如果我們設(shè)置兩個display: inline-block的元素寬度為width: 50%都向右或向左浮動，但是確無法排在一行的情況。這就是由于多出了這一點(diǎn)間隙，導(dǎo)致容器寬度不足，最后容器一行無法放不下兩個寬度都為容器一半寬度的元素。

有人可能覺得這些元素間的間隙比較奇怪，但這是一種正?，F(xiàn)象，因?yàn)閮?nèi)聯(lián)元素本來的排版就應(yīng)該有間隙，你能夠想象文字和文字之間沒有間隙的情況嗎？內(nèi)聯(lián)元素之間本來就應(yīng)該獨(dú)立分開。怎么解決這個問題，網(wǎng)上也有很多答案，這里只簡單提一下，因?yàn)槲覀冎饕f的是原理嘛。通過設(shè)置font-size為0，或者使用letter-spacing屬性，都可以達(dá)到去除內(nèi)聯(lián)元素之間的間隙的目的。

在我實(shí)例第一部分中應(yīng)該很多人也注意到，在父容器的最底端也有一個空隙，這個到底是什么那？還記得我上面概念中提到的struct嗎，這種現(xiàn)象就是由這個東西引起的，由于其不可見，所有我們用一個內(nèi)聯(lián)元素x來代替。這里可以看實(shí)例的第二部分。這個現(xiàn)象的原因是由于內(nèi)聯(lián)元素是默認(rèn)vertical-align元素對齊的，而我們的內(nèi)聯(lián)元素的基線是默認(rèn)為元素的底邊緣，sturct元素又有自己的行高，當(dāng)它的基線與我們的內(nèi)聯(lián)元素對齊時，它的行高會撐起一部分距離，就出現(xiàn)了實(shí)例中的現(xiàn)象。

知道了原因，我們解決起來也很簡單。只要struct元素的行號為0就可以了，所有我們可以設(shè)置父元素的line-height: 0或者通過設(shè)置font-size: 0來間接設(shè)置line-height為0?？赡芤呀?jīng)有人法相，font-size: 0可以同時解決元素間的間隙和底部的間隙，所以我更喜歡用這個方法。

下面我們做一下其他的操作，我們在實(shí)例第三部分中，前面三個inline-block元素中加上文字，發(fā)現(xiàn)元素都往下移動了，這又是什么原理那。這其中就涉及到了vertical-align屬性的一些性質(zhì)，我們下一篇就來講講vertical-align，并且來說說這種現(xiàn)象的原因。

文章中如有錯誤的地方，或者您有更好的建議歡迎指正~，原文鏈接。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/113105.html

相關(guān)文章

  • 【學(xué)習(xí)筆記】CSS深入理解之line-height

    摘要：內(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的定義 行高：兩行文字基線之間的距離 為何是基線：基線是定義所有字線的根本 不同字體...

    Stardustsky 評論0 收藏0

  • 深入理解-CSS內(nèi)聯(lián)元素之line-height

    摘要：常見問題這一部分我們來說一說常見的內(nèi)聯(lián)元素的一些問題。通過設(shè)置為，或者使用屬性，都可以達(dá)到去除內(nèi)聯(lián)元素之間的間隙的目的。 showImg(https://segmentfault.com/img/remote/1460000014515131?w=1280&h=608); 上一篇文章我們討論了font-size，這一篇來說另一個與文字關(guān)系密切的屬性line-height。這里涉及到了內(nèi)...

    鄒強(qiáng) 評論0 收藏0

  • 深入理解css之vertical-align

    摘要：但實(shí)質(zhì)上，只要是內(nèi)聯(lián)元素，這兩個元素都會同時在起作用。而解決方案可以有以下幾種元素不使用基線對齊，可以改為對齊元素塊狀化設(shè)置為設(shè)置為總結(jié)講解了的各類屬性值及其效果起作用的前提是內(nèi)聯(lián)元素與都是同時作用在內(nèi)聯(lián)元素上的 前言 vertical-align用來指定行內(nèi)元素（inline）或表格單元格（table-cell）元素的垂直對齊方式。也就是說，對于塊級元素，vertical-align...

    cgh1999520 評論0 收藏0

  • 深入理解css之line-height

    摘要：的應(yīng)用大部分時候，我們設(shè)置，都是為了垂直居中對齊。然后我們給設(shè)置，這樣我們就可以重置設(shè)置的，又因?yàn)楸３至藘?nèi)聯(lián)特性，因此我們可以設(shè)置以及產(chǎn)生，從而實(shí)現(xiàn)近似垂直居中對齊。 前言 行高，顧名思義是一行文字的高度，而從規(guī)范上來說則是兩行文字基線之間的距離。行高是作用在每一個行框盒子(line-box)上的，而行框盒子則是由內(nèi)聯(lián)盒子組成，因此，行高與內(nèi)聯(lián)元素可以說是非常緊密，行高直接決定了內(nèi)聯(lián)元...

    miya 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<