vertical-align

图像在父级元素中的bug

如果一个img在父级元素中，img设置为100%时，常常在父级元素的bottom部分会出现空白，这时候只需要在img设置一个vertical-align属性即可。
如

.parent{
            width: 250px;
            border-radius:10px;
            overflow: hidden;
        }
        .parent  img{
            width: 100%;
            vertical-align: middle;
        }

引入字体

很多时候引入字体icon会当成图标，且会有<a></a>元素包裹，这样与同父级元素的其他元素对齐时比较麻烦，这时候只要设置该icon的属性vertical-align:middle即可

    <ul>
        <li class="skill">
                     <a href="#"><i class="iconfont icon-jiahao"></i></a>JAVASCRIPT
                </li>
        </ul>   

.icon-jiahao{ vertical-align:middle ;}
/*注意，理论上也可以设置line-height来使对齐，但是元素挤压的情况，让问题会相当麻烦*/   

• 注意：vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。(inline-block也算是)
  其实这些用法在火狐的MDN已经解释过了，只是大家容易忽略。