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

資訊專欄INFORMATION COLUMN

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

lsxiao / 2140人閱讀

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

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

`


    
    Document




    
    

    


    

    

    



`


----------

這是代碼。。。

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

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




    
    Document




    
    

    


    x我

效果：

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

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


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

**
解決辦法：

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

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

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

相關(guān)文章

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

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

    antz 評論0 收藏0

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

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

    AbnerMing 評論0 收藏0

  • 9：瀏覽器兼容

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

    AWang 評論0 收藏0

  • MySQL - 事務(wù)的啟動 / 設(shè)置 / 鎖 / 解鎖——入門

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

    iOS122 評論0 收藏0

發(fā)表評論

0條評論

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