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

資訊專欄INFORMATION COLUMN

css系列之line-height 與 vertical-align

NoraXie / 2373人閱讀

摘要：參考鏈接是一種圍繞文字看不見的的大小與的大小相關(guān)。不會讓內(nèi)容成塊顯示，而是排成一行。若自身沒有設(shè)置，則父元素的，也與自身的無關(guān)。區(qū)別在于不論繼承與否，，因此有靈活性。相對于字符的高度。通常為字體高度的一半。

參考鏈接： https://www.zhangxinxu.com/wo...

line box

　　

content area

content area是一種圍繞文字看不見的box.content area的大小與font-size的大小相關(guān)。

inline box

inline box不會讓內(nèi)容成塊顯示，而是排成一行。
如果是個光禿禿的文字，則屬于匿名inline box。

line box

在containing box里，一個一個的inline box組成了line box。

注：line box高度取決于inline box最高元素的高度
line height 
注： 若line-height < content area ，則line box要取line-height的值，這也是為什么會重疊的原因。
line-height屬性取值：

1.%

若自身沒有設(shè)置line-height，則line-height = 父元素的font-size * %;

即為直接繼承父元素計(jì)算后的line-height，與自身的font-size無關(guān)。

2.length

若自身沒有設(shè)置line-height，則line-height = 父元素的line-height， 也與自身的font-size無關(guān)。

3.number

若自身沒有設(shè)置line-height，則line-height = 父元素的line-height。

區(qū)別在于：不論繼承與否，line-height = font-size line-height，因此有靈活性。*

4.normal

與number一樣，只是瀏覽器不同，會有差異，約為1.2。

5.inherit

繼承父元素的line-height

vartical align

適用于：inline / inline-block / table-cell

　　


理解vertical-align最重要的是先要定line box基線（默認(rèn)值）：

一般情況下，基線與X底對齊

line box有inline box, 則為最后一個inline box元素的baseline

line box沒有inline box, 則為底margin邊界，即為盒模型的邊界

line box有inline box, 但overflow != visible, 也為line box有inline box

特殊情況，若把inline box最高元素的vertical-align設(shè)為middle, 則baseline則為最高元素的中間線

vertical-align取值：

　　　　
1.top / bottom

使元素的top / bottom與line box的top / bottom對齊

2.middle

使元素的中點(diǎn)與line box的X-height對齊 （題外話：ex相對長度單位。相對于字符“x”的高度。通常為字體高度的一半。)

3.text-top / text-bottom

使元素盒模型的top / bottom與line box文本元素的top line / bottom line對齊

4.sub / super

使元素盒模型的top / bottom與line box 的 sub / sup元素的baseline對齊

5.length

使元素上移 、下移length

6.%

若為0，則為baseline

vertical-align = line-height * %; (可為負(fù)）

注：若多行文本，兩個inline-box則對齊最后一行的baseline

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

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

相關(guān)文章

  • css系列之水平垂直居中

    摘要：水平居中水平居中沒有什么好說的啦，對于行內(nèi)元素使用對于塊級元素使用前提是已經(jīng)為元素設(shè)置了適當(dāng)?shù)膶挾却怪本又袉涡形谋径嘈形谋緜卧匦袃?nèi)元素偽元素未知寬高絕對居中絕對定位已知寬高負(fù)要考慮兼容性浮動元素垂直居中父元素 水平居中 水平居中沒有什么好說的啦，對于行內(nèi)元素使用text-align;對于塊級元素使用margin: auto（前提是已經(jīng)為元素設(shè)置了適當(dāng)?shù)?width 寬度）; 垂直居中...

    MiracleWong 評論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

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

    摘要：上例中，左邊盒子的基線為其底邊緣，右邊盒子的基線為的基線將右邊盒子的行高設(shè)置為，即這個的高度為，位置處于中間。 vertical-align的值 線類：baseline（默認(rèn)）, top, bottom, middle 文字類：text-top, text-bottom 上標(biāo)下標(biāo)類：sub, super 數(shù)值：1px, 1em - 在baseline對齊的基礎(chǔ)上上下偏移一定數(shù)值 百分...

    ermaoL 評論0 收藏0

  • CSS系列之讓元素居中

    摘要：輔助標(biāo)簽代碼代碼效果廢話要讓元素和輔助元素在一行，否則會出現(xiàn)水平不完全居中，當(dāng)使用時，換行會被解析成空格。 首先我們需要知道元素都有哪些種類？ 內(nèi)嵌元素（display:inline;）如a，span，b，i 【一個不可定制的盒子】 [默認(rèn)同行可以繼續(xù)跟同類型標(biāo)簽] [內(nèi)容撐開寬度] [不支持寬高] [不支持上下的margin和padding] [代碼換行會被解析成空] 塊...

    fou7 評論0 收藏0

  • 技本功丨呀~我不會寫CSS之vertical-align（上集）

    摘要：某日閱讀世界，筆者的一段話鞭撻了我的靈魂。原文是這樣的說到這里，我就忍不住多說兩句。很多其實(shí)工作很多年的前端開發(fā)人員，也可能不知道的屬性值支持?jǐn)?shù)值，更不知道支持負(fù)值，這著實(shí)讓我很意外。只顯示文本的時候行高是。上集完敬請期待中下集 showImg(https://segmentfault.com/img/bVbmTbb?w=277&h=336); 某日閱讀《CSS世界》，筆者的一段話鞭撻...

    tianlai 評論0 收藏0

發(fā)表評論

0條評論

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