zoukankan      html  css  js  c++  java
  • 关于inline-block的间隙问题

    很久之前写过一个星星评级的样式,当时开发人员在嵌套代码的时候出现很多问题,同样的一个样式有的页面正常有的页面就出现星星错位的问题,仔细研究了一下代码,发现问题原来出在了inline-block上。

    目标样式:评级星星


    实现手段:<span class="star"><span class='star1'></span></span>


    相应样式:.star给一个灰色星星背景,display:inline-block使其支持宽高;
    .star1给一个黄色星星背景,用width百分比来控制星星的个数,给一个display:inline-block使其支持宽高;


    出现的问题:内部黄色的星星有向下错位现象,和外部span顶部大约有5px的上边距;

    解决方案:最初是使用相对定位将内部黄色的星星相上top:-5px;这个问题时好时坏,有的时候没事,有的时候有事,初步分析和浏览器有关。

    无意中将display:inline-block改成了display:block;发现问题解决了,两种颜色的星星完全重合,也不需要将黄色星星进行定位了。

    总结:inline-block在使用的过程中会有间隙,不在特殊情况下尽量不用,需要inline就直接inline,需要block就直接block。


    如果确实需要使用inline-block,那么去除间隙的方式有以下几种:
    一:去除标签之间的空格和回车;
    二:使用负边距;
    三:给父级元素设置font-size:0,子集根据实际情况使用font-size。

    本人比较常使用的方法是第三个,有的时候空格和回车是难免的,而且完全没有空格和回车的代码也比较难于看懂,至于第二个方法,只是不喜欢用。

    另外,对于inline-block的间隙问题,有的时候其实是可以加以利用的,比如说有的分页需要一些小空隙,那就刚好可以使用这个方式。

  • 相关阅读:
    dependencyManagement、parent与dependencies
    maven和gradle中,dependency和plugin的区别
    SpringMVC与Struts2区别
    RESTful风格与RESTful Api
    DBCP连接池配置参数
    js 函数的传值问题
    js 重载i
    js 对象与函数的区别
    子窗口 父窗口传值
    验证码
  • 原文地址:https://www.cnblogs.com/oyangyin/p/3738222.html
Copyright © 2011-2022 走看看