国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

我對line-height及vertical-align的一點理解

Eidesen / 1432人閱讀

摘要:張鑫旭老師在文章我對的一些理解與認識一中提到屬性的表現與否,僅僅與其父標簽有關,至于我們通常看到的與后面的文字垂直居中顯示那都是假象經過摸索測試,才對這句話有種豁然開朗的感覺。匿名元素我是一段卡哇伊的文字。

張鑫旭老師在文章《我對CSS vertical-align的一些理解與認識(一)》中提到:

vertical-align:middle屬性的表現與否,僅僅與其父標簽有關,至于我們通常看到的與后面的文字垂直居中顯示那都是假象!

經過摸索測試,才對這句話有種豁然開朗的感覺。

html:

        
            
            匿名元素
             我是一段卡哇伊的文字。
        

css:

    .box {
        margin: 36px 0;
        border: 1px dashed blue;
        font-size: 12px;
        color: white;
        background: red;
        /*height: 50px;*/  
    }

    .box .dot {
        display: inline-block;
        width: 16px;
        height: 16px;
        /*line-height:50px;*/
        background: white;
        vertical-align: baseline; // 這個baseline到底在哪里
    }

    .box .text {
        vertical-align: middle;
        /*line-height:50px; */
        font-size: 16px;
    }

首先要明白的是,一個行內元素有四條看不見的線(直接復制了張老師文章里的圖片):

這四條線的位置由誰決定呢,我認為是字體的大小,當字體的font-size:0時,則四線重合。
所以實際上子元素的vertical-align對齊是父元素的這幾條線,看下圖,我直接在父元素span里放樂“匿名元素”幾個字,你能直觀的發現,子元素對齊的就是“匿名元素”的baseline

另外 :
1.vertical-align: baseline/middle...是指此元素的baseline/middle line 和父元素的對齊
2.對于空的元素,其baseline就是底邊緣,比如.dot元素

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/115605.html

相關文章

  • 我對line-heightvertical-align一點理解

    摘要:張鑫旭老師在文章我對的一些理解與認識一中提到屬性的表現與否,僅僅與其父標簽有關,至于我們通常看到的與后面的文字垂直居中顯示那都是假象經過摸索測試,才對這句話有種豁然開朗的感覺。匿名元素我是一段卡哇伊的文字。 張鑫旭老師在文章《我對CSS vertical-align的一些理解與認識(一)》中提到: vertical-align:middle屬性的表現與否,僅僅與其父標簽有關,至于我們通...

    Harriet666 評論0 收藏0
  • 技本功丨呀~我不會寫CSS之vertical-align(上集)

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

    tianlai 評論0 收藏0
  • CSS魔法堂:深入理解line-heightvertical-align

    摘要:下的屬性值詳解以下內容均在中測試默認對齊方式這里作為參考系,而它的就是所要對齊的了。沒有任何變化。那改變又如何呢為了讓的清晰可見,特意添加一個的包裹著。 前言 一直聽說line-height是指兩行文本的基線間的距離,然后又說行高等于行距,最近還聽說有個叫行間距的家伙,@張鑫旭還說line-height和vertical-align基情四射,貴圈真亂啊。。。。。。于是通過本篇來一探究竟...

    avwu 評論0 收藏0
  • 關于css 的垂直居中

    摘要:之前看了張大大的博客總結一下我對和的一些認知。站在巨人的肩膀上學習,再次謝謝張大大阮大大的各種分享。 對于元素的水平居中,我根據我自己之前的一些學習來進行一些總結,如果有不對的地方,歡迎指正~ 一、讓大小不固定的元素垂直居中 因為:表格的單元格的特別屬性:垂直居中等; `div.parent { display: table-cell; vertical-align...

    caspar 評論0 收藏0
  • 關于css 的垂直居中

    摘要:之前看了張大大的博客總結一下我對和的一些認知。站在巨人的肩膀上學習,再次謝謝張大大阮大大的各種分享。 對于元素的水平居中,我根據我自己之前的一些學習來進行一些總結,如果有不對的地方,歡迎指正~ 一、讓大小不固定的元素垂直居中 因為:表格的單元格的特別屬性:垂直居中等; `div.parent { display: table-cell; vertical-align...

    icattlecoder 評論0 收藏0

發表評論

0條評論

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