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

資訊專欄INFORMATION COLUMN

【整理】幾種解決inline-block間隙的方案

array_huang / 2399人閱讀

摘要：有基礎(chǔ)的朋友可以直接跳過序言，直接看方案序有幾種屬性是內(nèi)聯(lián)對(duì)象，比如標(biāo)簽等，可以堆在一起顯示，寬高由內(nèi)容決定，不能設(shè)置是塊對(duì)象，比如標(biāo)簽等，要占一整行，但是寬高可以自定義為了彌補(bǔ)和的不足，又?jǐn)U充了屬性可以將對(duì)象呈遞為內(nèi)聯(lián)對(duì)象，而內(nèi)容作為

有基礎(chǔ)的朋友可以直接跳過序言，直接看方案
序 
display有幾種屬性：

inline是內(nèi)聯(lián)對(duì)象，比如 、 標(biāo)簽等，可以“堆在一起”顯示，寬高由內(nèi)容決定，不能設(shè)置；
block是塊對(duì)象，比如

、

標(biāo)簽等，要占一整行，但是寬高可以自定義；
為了彌補(bǔ)inline和block的不足，又?jǐn)U充了inline-block屬性；
inline-blcok可以將對(duì)象呈遞為內(nèi)聯(lián)對(duì)象，而內(nèi)容作為塊對(duì)象呈遞。

通俗點(diǎn)講就是

“可定寬高的堆在一起”顯示

為什么會(huì)有間隙 
inline-blcok塊之間的不可見符號(hào)會(huì)被保留父層字體的1/3大小的空間
解決方案

知道了原因，方案就好找了，我把它分為以下幾種

    
    
  • item1
    • 
    
  • item2
    • 
    
  • item3
    • 
    
  • item4
    • 
    
  • item5
    •
1、改變書寫結(jié)構(gòu) 
    
    
  • item1
  • item2
  • item3
  • item4
  • item5
    • 

    
    
  • 
        item1
  • 
        item2
  • 
        item3
  • 
        item4
  • 
        item5
    • 

    
    
  • item1
  • item2
  • item3
  • item4
  • item5
    • 

    
    
  • item1
  • item2
  • item3
  • item4
  • item5
    •


以上幾種均可以完美的達(dá)到去除間隙的作用
但是，從代碼的可讀性上看，或多或少有一些不足

2、打包工具

使用打包工具或者自寫腳本，在上線前將響應(yīng)HTML代碼打包成一行，即可

3、丟失結(jié)束標(biāo)簽 
    
    
  • item1
    
  • item2
    
  • item3
    
  • item4
    
  • item5

此方法雖然可以解決此問題，但是在Doctype為xhtml時(shí)將報(bào)錯(cuò)，所有方法是否適用須視情況而定。

4、css hack

知道間隙的產(chǎn)生原因和間隙的大小后，動(dòng)手寫一個(gè)css hack也是一種很好的方法
1、將父容器的字體大小設(shè)置為0，可解決絕大多數(shù)瀏覽器（老版本safari不支持）
2、針對(duì)不支持上條的瀏覽器設(shè)置字塊或字符間間隙letter-spacing／word-spacing，推薦letter-spacing，因?yàn)榇藢傩圆粫?huì)產(chǎn)生負(fù)間隙，但需要注意，要在子元素上設(shè)置letter-spacing:0
3、如果你轉(zhuǎn)化但是塊對(duì)象，那需要為低版本瀏覽器設(shè)置inline兼容，不讓樣式會(huì)亂掉
總結(jié)以上幾點(diǎn)給出以下代碼

.parent {
    letter-spacing: -.3333em;
    font-size: 0;
}
.child {
    display: inline;
    display: inline-block;
}
如發(fā)現(xiàn)文字有不妥之處，還請(qǐng)不吝賜教

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

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

相關(guān)文章

  • 未知寬度水平居中的幾種方法

    摘要：在某些特定的場合，在沒有知道寬度的情況下卻要求水平居中，前段時(shí)間在寫分頁的時(shí)候碰到了這個(gè)問題。但即使我們沒有設(shè)置的寬度直接設(shè)置的外邊距就可以實(shí)現(xiàn)水平居中了這樣我們就可以通過設(shè)置水平居中間接使里面的內(nèi)容居中。轉(zhuǎn)自未知寬度水平居中的幾種方法 在某些特定的場合，在沒有知道寬度的情況下卻要求水平居中，前段時(shí)間在寫分頁的時(shí)候碰到了這個(gè)問題。當(dāng)時(shí)在網(wǎng)上找了一些解決方法，并選了一個(gè)最合適的方法，現(xiàn)將...

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

  • 未知寬度水平居中的幾種方法

    摘要：在某些特定的場合，在沒有知道寬度的情況下卻要求水平居中，前段時(shí)間在寫分頁的時(shí)候碰到了這個(gè)問題。但即使我們沒有設(shè)置的寬度直接設(shè)置的外邊距就可以實(shí)現(xiàn)水平居中了這樣我們就可以通過設(shè)置水平居中間接使里面的內(nèi)容居中。轉(zhuǎn)自未知寬度水平居中的幾種方法 在某些特定的場合，在沒有知道寬度的情況下卻要求水平居中，前段時(shí)間在寫分頁的時(shí)候碰到了這個(gè)問題。當(dāng)時(shí)在網(wǎng)上找了一些解決方法，并選了一個(gè)最合適的方法，現(xiàn)將...

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

  • 前端面試基礎(chǔ)(1年以內(nèi)需掌握)

    摘要：客戶端數(shù)據(jù)存儲(chǔ)，能維持在多個(gè)會(huì)話范圍內(nèi)。向元素開頭插入由參數(shù)指定的內(nèi)容。向匹配的元素添加指定的類名。移除指定的屬性。主要解決了中大量的操作使頁面渲染性能降低，加載速度變慢，影響用戶體驗(yàn)。區(qū)別數(shù)據(jù)驅(qū)動(dòng)，通過數(shù)據(jù)來顯示視圖層而不是節(jié)點(diǎn)操作。 金三銀四 公司讓我面試 1年經(jīng)驗(yàn)的前端，特此花時(shí)間研究了一番面試題，近日整理了一下想分享出來，讓更多小掘友看到，在我看來 這些基本都是必備的知識(shí)點(diǎn) cs...

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

  • 前端面試之路一(HTML+CSS面試整理)

    摘要：或表示紅色，表示綠色，表示藍(lán)色，也可取其他數(shù)值來指定顏色。針對(duì)多字節(jié)文字，中文句子也是單詞允許在單詞內(nèi)換行。 一、HTML基礎(chǔ) html常見元素和理解 html常見元素分類 head區(qū)元素：（不會(huì)在頁面上留下直接內(nèi)容） meta title style link script base body區(qū)： div/selection/article/aside/header/f...

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

  • 前端面試之路一(HTML+CSS面試整理)

    摘要：或表示紅色，表示綠色，表示藍(lán)色，也可取其他數(shù)值來指定顏色。針對(duì)多字節(jié)文字，中文句子也是單詞允許在單詞內(nèi)換行。 一、HTML基礎(chǔ) html常見元素和理解 html常見元素分類 head區(qū)元素：（不會(huì)在頁面上留下直接內(nèi)容） meta title style link script base body區(qū)： div/selection/article/aside/header/f...

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

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<