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

資訊專(zhuān)欄INFORMATION COLUMN

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

鄒強(qiáng) / 1626人閱讀

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

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

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

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

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

inline-box

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

line-box

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

containing-box

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

struct

這個(gè)詞可能很多同學(xué)見(jiàn)的比較少，張?chǎng)涡翊笊穹Q(chēng)之為”幽靈空白節(jié)點(diǎn)“，我們這里就用直譯過(guò)來(lái)的詞”支柱“。

在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"。翻譯過(guò)來(lái)意思就是每一個(gè)行框開(kāi)始的位置都有一個(gè)寬度為0，并且行高和字體大小都與該元素相同的內(nèi)聯(lián)盒子。這個(gè)假想的內(nèi)聯(lián)盒子就被稱(chēng)為“支柱”。簡(jiǎn)單來(lái)說(shuō)就是可以想象成行框前面有一個(gè)寬為0的空字符。

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

度量單位

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

默認(rèn)值

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

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

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

常見(jiàn)問(wèn)題

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

display: inline-block元素間的空隙

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

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

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

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

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

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

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

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

相關(guān)文章

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

    摘要：內(nèi)聯(lián)盒子的高度由決定，限制包含盒子的高度，兩者一致，即把內(nèi)聯(lián)盒子安放在包含盒子內(nèi)，排除其他外界干擾。這時(shí)候由內(nèi)聯(lián)盒子模型可知，行間距是等分的，中間部分是，達(dá)到看似居中的效果?？梢缘玫浇Y(jié)論和設(shè)置一致，并非是完全垂直，除非為。 張?chǎng)涡竦腃SS深入理解之line-height學(xué)習(xí)筆記 line-height的定義 行高：兩行文字基線之間的距離 為何是基線：基線是定義所有字線的根本 不同字體...

    Stardustsky 評(píng)論0 收藏0

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

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

    wapeyang 評(píng)論0 收藏0

  • 深入理解css之vertical-align

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

    cgh1999520 評(píng)論0 收藏0

  • 深入理解css之line-height

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

    miya 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<