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

2021-09-16 12:40:25 字數 1460 閱讀 4274

有基礎的朋友可以直接跳過序言,直接看方案
display有幾種屬性:

inline是內聯物件,比如標籤等,可以「堆在一起」顯示,寬高由內容決定,不能設定;

block是塊物件,比如標籤等,要佔一整行,但是寬高可以自定義;

為了彌補inline和block的不足,又擴充了inline-block屬性;

inline-blcok可以將物件呈遞為內聯物件,而內容作為塊物件呈遞。

通俗點講就是

「可定寬高的堆在一起」顯示

inline-blcok塊之間的不可見符號會被保留父層字型的1/3大小的空間
知道了原因,方案就好找了,我把它分為以下幾種

以上幾種均可以完美的達到去除間隙的作用

但是,從**的可讀性上看,或多或少有一些不足

使用打包工具或者自寫指令碼,在上線前將響應html**打包成一行,即可

此方法雖然可以解決此問題,但是在doctype為xhtml時將報錯,所有方法是否適用須視情況而定。

知道間隙的產生原因和間隙的大小後,動手寫乙個css hack也是一種很好的方法

1、將父容器的字型大小設定為0,可解決絕大多數瀏覽器(老版本safari不支援)

2、針對不支援上條的瀏覽器設定字塊或字元間間隙letter-spacing/word-spacing,推薦letter-spacing,因為此屬性不會產生負間隙,但需要注意,要在子元素上設定letter-spacing:0

3、如果你轉化但是塊物件,那需要為低版本瀏覽器設定inline相容,不讓樣式會亂掉

總結以上幾點給出以下**

.parent 

.child

如發現文字有不妥之處,還請不吝賜教

幾種排序演算法整理

一 選擇排序 public class selectsort for int i test system.out.println selectsort test for int j test static void selectsort int unordered for int i test sy...

mysql的幾種函式整理

1.concat 函式 使用語法 concat str1,str2,返回結果為連線引數產生的字串。如有任何乙個引數為null 則返回值為 null。e.gselect concat id,name from user where id 1 查詢結果 1user1 注 如果name為null,則查詢結...

socket幾種解決方式

1.net的socket 思想 socketserver.js const net require net const server new net.createserver let clients let clientname 0 server.on connection client clien...