C3的坑之inline-block

luck 發布于2019-08-30 13:53 / 3470人閱讀

最近開始復習css一直在踩坑,今天分享一個inline-block 關于inline-block可能很多人都不熟悉,布局這方面很多人用的都是flex或者浮動,flex很強大毋庸置疑的可是關于兼容性就不是很讓人滿意,而浮動雖然很兼容可是覺得清除浮動就很麻煩,于此我在一些大型網站,例如我們的segmentfault的首頁導航展示用的布局就是inline-block,覺得inline-block可以擼一波,可是突然發現這里面也存在一些小問題,首先先po出代碼

這時候我們采取inline-block進行布局,神奇的事情就發生了

原本的3個div并排在一起,因為3個div變成了行內元素,所以也應該并排在一起,但是....
這里出現了兩個問題:

div之間出現間隔

子div與父div之間有一個4px的間距

這里會出現這種問題的原因是因為 inline-block水平呈現的元素間，換行顯示或空格分隔的情況下會有間距

div之間的間距解決的方法

在這里我嘗試過一個方法就是設置margin-right為負值,

在這里我們能看到第一個div與第二個div仍然有一個1px的間距,而第二個和第三個沒有間距,子div和父div沒有間距,說明我們的問題不是在這里

我在參考張旭鑫大神的博客深感佩服覺得采用這種方法最好:

給父div加這樣的css屬性

font-size:0
-webkit-text-size-adjust:none;

po出代碼

那么又有一個問題了,-webkit-text-size-adjust是什么????

webkit內核的瀏覽器(chrome)中,當在css中定義的中文font-size小于12px的時候,瀏覽器仍然使用12px,這時就可以用-webkit-text-size-adjust:none;

哈哈,這樣我們的問題就解決了

最后說下inline-block的兼容性:參考這篇文章
-->
IE6、IE7不識別inline-block但可以觸發塊元素。其它主流瀏覽器均支持inline-block。這就夠了,ie6,7就不考慮了,原因嘛,你懂的...

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115615.html

C3的坑之inline-block

最近開始復習css一直在踩坑,今天分享一個inline-block 關于inline-block可能很多人都不熟悉,布局這方面很多人用的都是flex或者浮動,flex很強大毋庸置疑的可是關于兼容性就不是很讓人滿意,而浮動雖然很兼容可是覺得清除浮動就很麻煩,于此我在一些大型網站,例如我們的segmentfault的首頁導航展示用的布局就是inline-block,覺得inline-block可以擼一...

zengdongbao 2019-08-01 18:31 評論0 收藏0
vue cli 3.x 的坑之 px2rem-loader

摘要：使用腳手架搭建項目，在里面配置后，一直報錯在的有相同的問題，作者回復建議使用插件來代替這個使用 vue cli 3.x腳手架搭建項目，在 vue.config.js 里面配置 px2rem-loader 后，一直報錯 Module build failed (from ./node_modules/px2rem-loader/index.js): Error: undefined:1...

imtianx 2019-08-23 14:12 評論0 收藏0
微信小程序的坑之wx.miniProgram.postMessage

摘要：也就是只有在小程序后退組件銷毀分享時才會觸發所以應該改變的時機，調換順序就可以了獲取成功這樣再試試，發現能正常捕獲消息了工作中有個需求是小程序的網頁在關閉的時候，需要回傳給小程序一個參數查閱小程序官方文檔，有這樣一個接口 wx.miniProgram.postMessage ，可以用來從網頁向小程序發送消息，然后通過 bindmessage 事件來監聽消息，如下是官方文檔描述 sh...

sorra 2019-08-23 12:24 評論0 收藏0
「前端早讀君008」新手必踩坑之display: inline-block

摘要：中線基線頂線底線中線基線頂線底線是文本的幾個基本線，其對應位置如下圖基線小寫英文字母的下端沿。中線小寫英文字母的中間。將元素的基線與其父元素的下標基線對齊。將元素的基線對準給定長度高于其父元素的基線。今日勵志語往日不可追，來日猶可期，祝大家2019年繼往開來迷之間隙我們創建一個導航列表，并將其列表 item 設置為 inline-block，主要代碼如下：我我 ...

sevi_stuo 2019-08-30 15:55 評論0 收藏0