亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

淺談line-height

zombieda / 1197人閱讀

摘要：與高度由上面的內(nèi)容可以總結(jié)出的高度取決與其下屬的中最高的元素。的最終表現(xiàn)是通過(guò)實(shí)現(xiàn)的，而無(wú)論所占據(jù)的高度是多少無(wú)論比文字大還是比文字小，其占據(jù)的空間都是與文字內(nèi)容公用水平中垂線的。

基礎(chǔ)知識(shí)

有4種模型，分別是

塊，塊盒模型 containing boxing,包括line

行內(nèi)盒模型 inline boxing ,包含content

行模型 line boxing,包含inline,line高度是由最高的inline元素決定.

內(nèi)容區(qū)域 content area

這部分內(nèi)容可以著重看 這里有詳細(xì)的介紹。

line-height與line boxes高度

由上面的內(nèi)容可以總結(jié)出line boxes 的高度取決與其下屬的inline boxes 中最高的元素。

對(duì)于像input這樣的元素,在不同瀏覽器上line-height屬性表現(xiàn)是不同,參考Line-Height Doesn’t Work As Expected On Inputs
垂直居中的特性 
行高還有一個(gè)特性，叫做垂直居中性。line-height的最終表現(xiàn)是通過(guò)line boxes實(shí)現(xiàn)的，而無(wú)論line boxes所占據(jù)的高度是多少（無(wú)論比文字大還是比文字?。湔紦?jù)的空間都是與文字內(nèi)容公用水平中垂線的。  ----張?chǎng)涡竦牟┪?/p>

我們經(jīng)?？吹揭环N垂直居中的方法,那就是讓height和line-height 相同

    text-vertical{
        height:30px;
        line-height:30px;
    }

其實(shí)在這里起作用的是line-height , 只要設(shè)置好了line-height ,在不設(shè)置height 的情況下一個(gè)div 的高度就是他的line-height 的值

結(jié)果如圖:在chrome的測(cè)試下

line-height與line boxes高度 by wangjojo (@wweggplant) on CodePen.

多行文字垂直居中

在看了張?chǎng)涡翊笊竦牟┪暮? 發(fā)現(xiàn)不使用最后的i標(biāo)簽也是可以做到垂直居中的,可能是他當(dāng)時(shí)寫那篇文章的時(shí)間太久,瀏覽器的更新問(wèn)題等, 在最新版本的測(cè)試下,不必使用i標(biāo)簽,只使用line-height 就能解決問(wèn)題,如果發(fā)現(xiàn)舊瀏覽器不支持,可以采用他博客中提到的方法.

多行文字居中,添加i方式 by wangjojo (@wweggplant) on CodePen.

行高在文章中的應(yīng)用

line-height賦值方式px/em、百分值、normal、數(shù)值、inherit繼承。px/em和inherit沒(méi)什么好說(shuō)的, normal與數(shù)值1.2等價(jià) ,所以下面重點(diǎn)說(shuō)說(shuō)百分比和數(shù)值兩種賦值方式的區(qū)別.

line-height百分比

line-height百分比賦值的結(jié)果是當(dāng)前line-height的值乘以這個(gè)百分比數(shù)值得到的.demo如下:

line-height賦值方式 by wangjojo (@wweggplant) on CodePen.

外層的 div.wrap 的 line-height 計(jì)算結(jié)果是 20px*150% = 24px;

內(nèi)部的h1標(biāo)簽和 p標(biāo)簽的通過(guò)繼承得到 line-height:150% 然后最后的結(jié)果仍然是24px

在line-height采用百分比的情況下,line-height的最終值h就是當(dāng)前line-height乘以這個(gè)百分比計(jì)算得出.并且這個(gè)值會(huì)繼承下去,后代的元素繼承得到的值也是h

line-height純數(shù)值

外層的 div.wrap-line-height-number 的 line-height 計(jì)算結(jié)果是 30px*1.5 = 45px;

內(nèi)部的h1標(biāo)簽和 p標(biāo)簽的通過(guò)繼承得到 line-height:1.5


h1的line-height是 16px*1.5 = 24px


p 的line-height是 12px*1.5 = 16px

可以把line-height采用數(shù)值形式當(dāng)作一種倍數(shù)的繼承, 后代的元素都會(huì)繼承這個(gè)倍數(shù),并受這幾數(shù)值的影響,得到最后的值

line-height與vertical-align關(guān)系(有空再寫) 總結(jié)

4種box模型以及各自的含義

line-height與line box的關(guān)系

文字垂直居中

line-height賦值形式采用數(shù)值或者是百分比時(shí)各自的代表的含義

參考

深入了解css的行高Line Height屬性——沁園春

css行高line-height的一些深入理解及應(yīng)用——張?chǎng)涡?/p>

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

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

相關(guān)文章

  • 淺談line-height

    摘要：與高度由上面的內(nèi)容可以總結(jié)出的高度取決與其下屬的中最高的元素。的最終表現(xiàn)是通過(guò)實(shí)現(xiàn)的，而無(wú)論所占據(jù)的高度是多少無(wú)論比文字大還是比文字小，其占據(jù)的空間都是與文字內(nèi)容公用水平中垂線的。 基礎(chǔ)知識(shí) 有4種模型，分別是 塊，塊盒模型 containing boxing,包括line 行內(nèi)盒模型 inline boxing ,包含content 行模型 line boxing,包含inline...

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

  • 淺談CSS3 box-sizing 屬性 有趣的盒模型

    摘要：盒模型的組成大家肯定都懂，由里向外盒模型是有兩種標(biāo)準(zhǔn)的，一個(gè)是標(biāo)準(zhǔn)模型，一個(gè)是模型。指定元素的寬度和高度最小最大屬性適用于的寬度和高度。盒模型的組成大家肯定都懂，由里向外content,padding,border,margin. 盒模型是有兩種標(biāo)準(zhǔn)的，一個(gè)是標(biāo)準(zhǔn)模型，一個(gè)是IE模型。 ?從上面兩圖不難看出在標(biāo)準(zhǔn)模型中，盒模型的寬高只是內(nèi)容（content）的寬高， 而在IE模型中盒模型...

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

  • 移動(dòng)端H5頁(yè)面中1px邊框的幾種解決方法

    問(wèn)題提出 這是一個(gè)比較老的問(wèn)題了，我第一次注意到的時(shí)候，是UI設(shè)計(jì)師來(lái)找我麻煩，emmm那時(shí)候我才初入前端職場(chǎng)，啥也不懂啊啊啊啊啊，情形是這樣的：設(shè)計(jì)師拿著手機(jī)過(guò)來(lái)：這些邊框都粗了啊，我的設(shè)計(jì)稿上是1px的我：？？？？我寫的是1px呀，不信你看。（說(shuō)著拿出了css代碼設(shè)計(jì)師：不對(duì)啊我眼睛看來(lái)這個(gè)邊框比我設(shè)計(jì)稿上粗很多，看起來(lái)好奇怪（emmm果然像素眼我：那我把它改成0.5px你看看（邊說(shuō)邊改了代碼...

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

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

0條評(píng)論

閱讀需要支付1元查看
<