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

資訊專(zhuān)欄INFORMATION COLUMN

困然許久的vertical-aligin，間隙的出現(xiàn)并不是bug,!!!!

antz / 2943人閱讀

摘要：最近學(xué)習(xí)一個(gè)出現(xiàn)一個(gè)奇怪的現(xiàn)象，話不多說(shuō)先貼代碼。當(dāng)初認(rèn)為由于設(shè)置成了之后，換行和空格都被解析造成的，然是后來(lái)已測(cè)試，發(fā)現(xiàn)根本不是這個(gè)原因造成的，最近經(jīng)過(guò)自己的苦思冥想，查閱資料，竟然發(fā)現(xiàn)是搞得鬼。因?yàn)楦?dòng)不屬于行內(nèi)元素了。

最近學(xué)習(xí)一個(gè)html,出現(xiàn)一個(gè)奇怪的現(xiàn)象，話不多說(shuō)先貼代碼。

`


    
    Document




    
    

    


    

    

    



`


----------

這是代碼。。。

當(dāng)初認(rèn)為由于設(shè)置成了line-blcok之后，換行和空格都被解析造成的，然是后來(lái)已測(cè)試，發(fā)現(xiàn)根本不是這個(gè)原因造成的，最近經(jīng)過(guò)自己的苦思冥想，查閱資料，竟然發(fā)現(xiàn)是vertical-align搞得鬼。

現(xiàn)在我來(lái)解釋下原因，不過(guò)要明白的話，需要了解行高，基線等概念
我先在舉幾個(gè)例子




    
    Document




    
    

    


    x我

效果：

可能大家沒(méi)注意到：這個(gè)現(xiàn)象已經(jīng)說(shuō)明了原因，現(xiàn)在我來(lái)分下下：
**

1. 了解x;我們知道x的底部是基線，但是根據(jù)分析，基線下面應(yīng)該有底線，底線下面有一半的行高，


2.我們可以看到x是和div垂直平齊的，這個(gè)也是google瀏覽器默認(rèn)的文本以基線居中，但是基線下面還有到底線的距離和半個(gè)行高。因此為了容下字體，下面的div需要向下移動(dòng)  基線到底線的距離+一半的行高
3.在google瀏覽器中，默認(rèn)字體大小16px,ling-height是18px，我測(cè)量他們的縫隙是3px,就可以知道他們一半的行高是1px,基線到底線的距離是2px,
總結(jié)：這個(gè)就是出現(xiàn)縫隙的原因所在了。

**
解決辦法：

1.浮動(dòng)。因?yàn)楦?dòng)不屬于行內(nèi)元素了。
2.改變vertical-align的對(duì)齊方式，適應(yīng)top,和bottom可以消除縫隙，
注意：是用text_top 和text_bottom任然會(huì)出現(xiàn)縫隙但是比之前小一點(diǎn)，因?yàn)樗麄兪歉煮w對(duì)齊，換句話說(shuō)，他們沒(méi)有基線到底線的距離，只有一半行高的距離，所以縫隙會(huì)變小。

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

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

相關(guān)文章

  • 困然許久的vertical-aligin，間隙的出現(xiàn)并不是bug,!!!!

    摘要：最近學(xué)習(xí)一個(gè)出現(xiàn)一個(gè)奇怪的現(xiàn)象，話不多說(shuō)先貼代碼。當(dāng)初認(rèn)為由于設(shè)置成了之后，換行和空格都被解析造成的，然是后來(lái)已測(cè)試，發(fā)現(xiàn)根本不是這個(gè)原因造成的，最近經(jīng)過(guò)自己的苦思冥想，查閱資料，竟然發(fā)現(xiàn)是搞得鬼。因?yàn)楦?dòng)不屬于行內(nèi)元素了。 最近學(xué)習(xí)一個(gè)html,出現(xiàn)一個(gè)奇怪的現(xiàn)象，話不多說(shuō)先貼代碼。 ` Document *{ margin:0; padd...

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

  • 為什么開(kāi)發(fā)人員必須要了解數(shù)據(jù)庫(kù)鎖？

    摘要：小明馬上開(kāi)發(fā)完畢，成功上線。下班過(guò)后，小明回想大紅說(shuō)的話，什么是間隙鎖，什么是插入意向鎖，看來(lái)作為開(kāi)發(fā)者對(duì)數(shù)據(jù)庫(kù)不應(yīng)該只會(huì)寫(xiě)啊，不然遇到一些疑難雜癥完全沒(méi)法解決啊。破壞了數(shù)據(jù)庫(kù)中的隔離性。 1.鎖？ 1.1何為鎖 鎖在現(xiàn)實(shí)中的意義為:封閉的器物，以鑰匙或暗碼開(kāi)啟。在計(jì)算機(jī)中的鎖一般用來(lái)管理對(duì)共享資源的并發(fā)訪問(wèn)，比如我們java同學(xué)熟悉的Lock,synchronized等都是我們常見(jiàn)的...

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

  • 9：瀏覽器兼容

    摘要：由和開(kāi)發(fā)的瀏覽器排版引擎，年月發(fā)布。瀏覽器的兼容問(wèn)題是我們必須去克服的。表示過(guò)濾器的意思，它是一種對(duì)特定的瀏覽器或?yàn)g覽器組顯示或隱藏規(guī)則或聲明的方法。? 9：瀏覽器兼容 常見(jiàn)的主流瀏覽器 1）主流瀏覽器 Internet Explorer、 Safari、Mozilla Firefox、 Google Chrome、Opera、百度、360、搜狗、傲游 2）最早的瀏覽器 : Mosaic ...

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

  • MySQL - 事務(wù)的啟動(dòng) / 設(shè)置 / 鎖 / 解鎖——入門(mén)

    摘要：行級(jí)鎖，頁(yè)級(jí)鎖，表級(jí)鎖。聞其名知其意，比較少見(jiàn)的是頁(yè)級(jí)鎖，它鎖定的是一組相鄰數(shù)據(jù)。排他鎖允許獲得排他鎖的事務(wù)更新數(shù)據(jù)，阻止其他事務(wù)取得相同數(shù)據(jù)集的讀寫(xiě)。意向排他鎖事務(wù)打算給數(shù)據(jù)行加行排他鎖，事務(wù)在給一個(gè)數(shù)據(jù)行加排他鎖前必須先取得該表的鎖。 廢話 本篇的名字簡(jiǎn)直可以起成《事務(wù)操作：從入門(mén)到放棄》。 力圖解決：在MySQL 5.5 版本及更高版本時(shí)，使用事務(wù)的完整流程和細(xì)節(jié)記錄，而無(wú)需面對(duì)...

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

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

0條評(píng)論

閱讀需要支付1元查看
<