資訊專欄INFORMATION COLUMN
最近開(kāi)始復(fù)習(xí)css一直在踩坑,今天分享一個(gè)inline-block 關(guān)于inline-block可能很多人都不熟悉,布局這方面很多人用的都是flex或者浮動(dòng),flex很強(qiáng)大毋庸置疑的可是關(guān)于兼容性就不是很讓人滿意,而浮動(dòng)雖然很兼容可是覺(jué)得清除浮動(dòng)就很麻煩,于此我在一些大型網(wǎng)站,例如我們的segmentfault的首頁(yè)導(dǎo)航展示用的布局就是inline-block,覺(jué)得inline-block可以擼一波,可是突然發(fā)現(xiàn)這里面也存在一些小問(wèn)題,首先先po出代碼
這時(shí)候我們采取inline-block進(jìn)行布局,神奇的事情就發(fā)生了
原本的3個(gè)div并排在一起,因?yàn)?個(gè)div變成了行內(nèi)元素,所以也應(yīng)該并排在一起,但是....
這里出現(xiàn)了兩個(gè)問(wèn)題:
div之間出現(xiàn)間隔
子div與父div之間有一個(gè)4px的間距
這里會(huì)出現(xiàn)這種問(wèn)題的原因是因?yàn)?inline-block水平呈現(xiàn)的元素間，換行顯示或空格分隔的情況下會(huì)有間距div之間的間距解決的方法
在這里我嘗試過(guò)一個(gè)方法就是設(shè)置margin-right為負(fù)值,
在這里我們能看到第一個(gè)div與第二個(gè)div仍然有一個(gè)1px的間距,而第二個(gè)和第三個(gè)沒(méi)有間距,子div和父div沒(méi)有間距,說(shuō)明我們的問(wèn)題不是在這里
我在參考張旭鑫大神的博客深感佩服覺(jué)得采用這種方法最好:
給父div加這樣的css屬性font-size:0 -webkit-text-size-adjust:none;
po出代碼
那么又有一個(gè)問(wèn)題了,-webkit-text-size-adjust是什么????
webkit內(nèi)核的瀏覽器(chrome)中,當(dāng)在css中定義的中文font-size小于12px的時(shí)候,瀏覽器仍然使用12px,這時(shí)就可以用-webkit-text-size-adjust:none;哈哈,這樣我們的問(wèn)題就解決了
最后說(shuō)下inline-block的兼容性:參考這篇文章
-->
IE6、IE7不識(shí)別inline-block但可以觸發(fā)塊元素。其它主流瀏覽器均支持inline-block。這就夠了,ie6,7就不考慮了,原因嘛,你懂的...文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115615.html
最近開(kāi)始復(fù)習(xí)css一直在踩坑,今天分享一個(gè)inline-block 關(guān)于inline-block可能很多人都不熟悉,布局這方面很多人用的都是flex或者浮動(dòng),flex很強(qiáng)大毋庸置疑的可是關(guān)于兼容性就不是很讓人滿意,而浮動(dòng)雖然很兼容可是覺(jué)得清除浮動(dòng)就很麻煩,于此我在一些大型網(wǎng)站,例如我們的segmentfault的首頁(yè)導(dǎo)航展示用的布局就是inline-block,覺(jué)得inline-block可以擼一...
摘要：使用腳手架搭建項(xiàng)目，在里面配置后，一直報(bào)錯(cuò)在的有相同的問(wèn)題，作者回復(fù)建議使用插件來(lái)代替這個(gè) 使用 vue cli 3.x腳手架搭建項(xiàng)目，在 vue.config.js 里面配置 px2rem-loader 后，一直報(bào)錯(cuò) Module build failed (from ./node_modules/px2rem-loader/index.js): Error: undefined:1...
摘要：也就是只有在小程序后退組件銷毀分享時(shí)才會(huì)觸發(fā)所以應(yīng)該改變的時(shí)機(jī)，調(diào)換順序就可以了獲取成功這樣再試試，發(fā)現(xiàn)能正常捕獲消息了 工作中有個(gè)需求是小程序的網(wǎng)頁(yè)在關(guān)閉的時(shí)候，需要回傳給小程序一個(gè)參數(shù) 查閱小程序官方文檔，有這樣一個(gè)接口 wx.miniProgram.postMessage ，可以用來(lái)從網(wǎng)頁(yè)向小程序發(fā)送消息，然后通過(guò) bindmessage 事件來(lái)監(jiān)聽(tīng)消息，如下是官方文檔描述 sh...
摘要：中線基線頂線底線中線基線頂線底線是文本的幾個(gè)基本線，其對(duì)應(yīng)位置如下圖基線小寫(xiě)英文字母的下端沿。中線小寫(xiě)英文字母的中間。將元素的基線與其父元素的下標(biāo)基線對(duì)齊。將元素的基線對(duì)準(zhǔn)給定長(zhǎng)度高于其父元素的基線。 今日勵(lì)志語(yǔ) 往日不可追，來(lái)日猶可期，祝大家2019年繼往開(kāi)來(lái) 迷之間隙 我們創(chuàng)建一個(gè)導(dǎo)航列表，并將其列表 item 設(shè)置為 inline-block，主要代碼如下： 我 我 ...
閱讀 876·2023-04-25 19:49
閱讀 3802·2021-09-30 09:47
閱讀 2792·2021-09-13 10:21
閱讀 2718·2021-08-24 10:04
閱讀 3207·2019-08-30 15:55
閱讀 2391·2019-08-30 15:55
閱讀 2439·2019-08-30 15:54
閱讀 3505·2019-08-30 13:53
