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

資訊專欄INFORMATION COLUMN

關(guān)于 vertical-align 的一些理解

lowett / 2500人閱讀

摘要：關(guān)于的條參考線以及。關(guān)于和之間的關(guān)系。目標(biāo)元素的的垂直平分線，與父元素內(nèi)匿名的對齊。垂直平分線，這個容易理解。要比這些字母的頂端再高一些。

前言

關(guān)于 vertical-align，我們很容易想到，這不就是告訴我們元素在縱向上和什么對齊的屬性嗎？而事實上，正是這種寬泛的說法導(dǎo)致了我們對其的理解存在許多不確定性。事實上，“對齊”這兩個字其實牽涉到4個對象：即哪個對象的哪條線，與哪個對象的哪條線對齊？只有將這4者搞清楚，我們才能說是理解了這個屬性。

我們知道，vertical-align 有以下幾類可選值：

文字：baseline、top、bottom、text-top、text-bottom、middle、sub、super

百分比

數(shù)字

其中，文字是最多的，現(xiàn)在我就以文字為例，來探討以下vertical-align究竟是怎么對齊的。在閱讀之前，有一些預(yù)備知識應(yīng)該是必不可少的，它們是：

關(guān)于行內(nèi)元素的4種box模型：containing boxes、inline boxes、line box 以及 content area。

關(guān)于 font-size 的 4 條參考線:topline、bottomline、baseline以及middleline。

關(guān)于 font-size 和 line-height 之間的關(guān)系。

以上知識可以在以下文章中看到
深入了解css的行高Line Height屬性

下面是這次我使用的例子。
html：


    0.Eng2lish3
    Englishx

css：

.box{
    border: 1px solid #555;
    font-size: 28px;
    height:150px;
    line-height: 100px;
}
.span{
    display: inline-block;
    background-color: #ffffd;
    font-size: 50px;
    margin-right: 35px;
    line-height: 80px;
}
vertical-align:top

目標(biāo)元素的 inline-box 的頂端邊緣，與父元素的 line-box 的頂端邊緣對齊。這很好理解。

vertical-align:bottom

目標(biāo)元素的 inline box 的底端邊緣，與父元素的 line-box 的底端邊緣對齊。同樣很好理解。

不過，這里有同學(xué)說了：不對啊，圖片里目標(biāo)元素的底端沒有和父元素的底端對齊??！注意，上面寫的是與父元素的 line-box 的底端邊緣對齊。那么父元素的底端邊緣在哪里呢？并不是在下邊框這里。這是因為，下邊框是被父元素的 height 屬性撐開的，父元素的 line box 的高度，是由 line-height 屬性決定的。注意看上面的 css。這里的 line-height 比 height 要小，所以目標(biāo)元素的底部達不到父元素的下邊框。

還有一部分眼尖的同學(xué)說，還是不對呀，我目測了一下，你 css 里設(shè)置的 line-height 是 100px。但是這里目標(biāo)元素的底部，離父元素的頂部似乎要大于 100px 呀？是的，你說的沒錯。實際上這個數(shù)字是118px，原因是，內(nèi)部匿名inline box 的上標(biāo)(3)和下標(biāo)(2)把這個匿名 inline box 的line-height 撐大了，導(dǎo)致其實際 line-height 達到了 118px。如果把上標(biāo)下標(biāo)去掉，那就完美符合啦。

vertical-align:middle

目標(biāo)元素的 inline-box 的垂直平分線，與父元素內(nèi)匿名inline boxes的 middleline 對齊。這個屬性恐怕是實戰(zhàn)中使用最頻繁的屬性了。

這里出現(xiàn)了幾個新東西，需要多說幾句。垂直平分線，這個容易理解。那什么是“父元素內(nèi)匿名inline boxes，什么又是“父元素內(nèi)匿名 inline boxes 的 middleline”？

首先，父元素內(nèi)匿名inline boxes，你可以假設(shè)成直接寫在父元素內(nèi)的純文字。由于它被父元素直接包裹，所以各種屬性，包括line-height 和 font-size 等等，都是直接繼承自父元素。當(dāng)然，父元素內(nèi)未必真的存在文字，它內(nèi)部可能沒有任何匿名inline boxes，但是，當(dāng) vertical-align 參與計算的時候，所參照的就是這個可能并不存在的匿名inline boxes。

好了，輪到 middleline。middleline 之前被我放在了預(yù)備知識里，這里再多引申一點。按照規(guī)范，middleline 是文字的 baseline 往上方挪 1/2 個 x字母高度 的位置，所在的那條線。這條線并不是content area的嚴(yán)格中線，但和真正幾何位置的中線很接近。

為了更清楚地表示 middleline 的位置，我這里多加了3個 x 字母，很明顯，middleline 穿過字母 x 的中央。

好了，理解了 vertical-align:middle ，我們再理解下面幾個屬性就簡單多了。

vertical-align:text-top

目標(biāo)元素的 inline-box 的頂部邊緣，與父元素內(nèi)匿名 inline boxes 的頂線，topline對齊。這里要注意，topline 在視覺上并不和l、h這些高字母的頂端對齊，這是因為這些字母的高度都沒有達到topline。topline 要比這些字母的頂端再高一些。

vertical-align:text-bottom

目標(biāo)元素的 inline-box 的底部邊緣，與父元素內(nèi)匿名 inline boxes 的底線，bottomline對齊。和 topline 不同，像 g 這樣的下沉字母的底端一般都會達到 bottomline 的位置。

vertical-align:baseline

這個默認(rèn)屬性反而放到后面來說？為什么？因為這里和上面有一點不同。在上面的情況下，目標(biāo)元素參與對齊的參考線，都是 inline-box 的上下邊緣，而這里是 baseline!

vertical-align:sub

目標(biāo)元素的 inline-box 的 baseline，與父元素內(nèi)下標(biāo)（sub 標(biāo)簽）的 inline boxes 的 baseline 對齊。

vertical-align:super

目標(biāo)元素的 inline-box 的 baseline，與父元素內(nèi)上標(biāo)（sup 標(biāo)簽）的 inline boxes 的 baseline 對齊。

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

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

相關(guān)文章

  • 關(guān)于vertical-align

    摘要：內(nèi)聯(lián)元素的外邊緣與該行高的頂部和底部邊緣對齊。如果行高小于字體的高度，不會受影響，但會對齊文本邊界。紅線表示邊界，藍線表示，黃色為，白色為區(qū)域，綠色為區(qū)域。的確定規(guī)則元素的是它的第一行的。 前言 為什么寫這篇總結(jié)？最近在文字圖標(biāo)垂直對齊上用到css的vertical-align屬性，但是有的時候有效，有的時候無效，常常疑惑不解，反思這是自己對vertical-align的基本認(rèn)知不夠造...

    kumfo 評論0 收藏0

  • [譯]關(guān)于vertical-align:你需要知道的一切

    摘要：絕對定位讓元素脫離文檔流，所以他們不再影響他們的周邊元素。元素在文檔流中，也能感知其他元素尺寸的改變。中間，一個在文檔流中的元素并且?guī)в袑傩缘脑?。最右，不在文檔流中的元素但是內(nèi)容區(qū)域有高度。元素的基線依賴于元素是否是文檔流中的元素。 原文：Vertical-Align: All You Need To Know 通常我都有需要垂直對齊在一排上一個接著一個的元素。CSS提供了很多種可能...

    wuyangchun 評論0 收藏0

  • 關(guān)于css 的垂直居中

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

    caspar 評論0 收藏0

  • 關(guān)于css 的垂直居中

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

    icattlecoder 評論0 收藏0

  • 我腦中飄來飄去的css魔幻屬性

    摘要：先來一張圖，看懂的幾個屬性順便帶上圖片出處，文章講得還可以，理解這張圖片，后面就好理解了。元素根據(jù)標(biāo)簽的屬性決定顯示輸入框還是按鈕。還有，還有近來很火的。 最近看到一篇20 個CSS高級技巧匯總的匯總，感觸很深，不過我想，與技巧相比，有些常見css布局難題，有時候更加讓我們的日常開發(fā)變得躊躇沮喪吧。在寫這一篇文章之前，自己還寫過一篇：我所不注意的那些CSS冷知識，但卻阻止了我做項目的速...

    JouyPub 評論0 收藏0

發(fā)表評論

0條評論

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