当前位置: 首页 > Web前端 > HTML

C3的inline-block

时间:2023-04-02 21:32:21 HTML

最近开始复习css,一直在踩坑。今天分享一个关于inline-block的inline-block。很多人可能并不熟悉。很多人在布局中使用flex或者float,flex的强大毋庸置疑,但是在兼容性方面却不是很理想。虽然浮动很兼容,但是清除浮动很麻烦。因此,我对一些大型网站采用inline,比如我们的segmentfault首页导航显示布局。-block,我觉得inline-block可以用一段时间,突然发现里面有些小问题,先把代码贴出来

这时候我们采用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;pocode<divstyle="width:40px;height:30px;background-color:red;display:inline-block;">那么还有一个问题,什么是-webkit-text-size-adjust????在webkit内核浏览器(chrome)中,当css中定义的中文font-size小于12px时,浏览器仍然使用12px,这时可以使用-webkit-text-size-adjust:none;哈哈,这样我们的问题就解决了。最后说一下inline-block的兼容性:参考这篇文章-->IE6和IE7不识别inline-block但是可以触发block其他主流浏览器都支持inline-block。这就够了,ie6和7就不考虑了,原因,你懂的……