css - inline-block的小坑

inline-block

inline-block 是 display 可选值得其中一个，简单理解就是可将 clock 的元素，以 inline 的方式呈现，并且可以设置宽高等属性。

常遇到的一些小问题

水平间隙

这个经常遇到的问题，在多个 inline-block 元素，排列的时候，会出先一个间隙。例如：

<div class="nav">
  <div class="nav-item"><a>导航</a></div>
  <div class="nav-item"><a>导航</a></div>
  <div class="nav-item"><a>导航</a></div>
</div>

.nav {
  background: #999;
}
.nav-item{
  display:inline-block; /* 设置为inline-block */
  width: 100px;
  background: #ddd;
}

通常为了方便编写代码，我们会对代码进行格式化，让以一个方便阅读的方式换行展示，而这个换行符号，看起来没有东西，但是浏览器不这样认为。这个空白字符正是两个标签之间的空白的地方，也是浏览器的正常行为。

为了消除这个空白，通常使用的方法有：

1. 去掉空白，将相邻标签的紧挨起来，去除换行和空白字符
2. 设置font-size , 将上级的font-size设置为:0,表示不显示字符，这样空白也会没有。

对齐问题

这个问题和英文语言有一点关系，一个叫 baseline 基准线的东西，中文里没有这个东西，都是方方正正的一个小方块里面，来一个图说明一下：

一般常用 vertical-align: middle 来让 元素居中对齐， 想了解更多 baseline 相关 的东西，可自行搜索。

今天想说明的是一个使用场景, 这个一个简易的轮播图，页码布局。如下：

<div class="wrap">
    <div class="page-wrap">
        abcdefgh
        <span class="page-dot"></span>
        <span class="page-dot act"></span>
    </div>
</div>

.wrap{
    position: relative;
    width:  500px;
    height: 300px;
}
.page-wrap{
    position: absolute;
    height: 3px;
    background: red;
    left: 0;
    right: 0;
    bottom: 4px;
}
.page-dot{
    display: inline-block;
    height: 3px;
    width: 12px;
    border-radius: 3px;
    opacity: 0.4;
    background: blue;
}
.page-dot.act{
    opacity: 1;
}

可以发现，span 元素并没有在 父级里面，二位跑到了 父级下面。 因为容器的高度被定死了，默认行高的情况下，文本是可定要超出容器的，而 默认的对齐方式 是以 baseline 对齐的，所以肯定会出现在容器的下方。为了让空 的span 对齐，可以这样干

1. 可添加 vertical-align:top. 这样就能对齐到容器里面了
2. 添加空格   到span里面，

这里还涉及到了 两个属性 line-height , vertical-align . 待我我后续仔细研究一下。

其实这些东西本身没有什么难道，在制定的标准中，都给予的说明，只是我们平时没有仔细去研读英文文档，也由于语言障碍，导致很难坚持去看英文文档。

例如： W3C 制定的css，html 的一些标准，ECMA 的 ECMAScript 标准等。

这里有些关于行高的一些标准。可供参考https://www.w3.org/TR/CSS2/visudet.html#propdef-line-height

还有 ECMA 的官网 http://ecma-international.org/