长期更新，前端开发中的问题及解决方式

1.display:inline-block中元素与元素之间会有空隙
给父级元素设置font-size:0属性。
转自张鑫旭

<div style="font-size:0;">
    <img src="mm1.jpg" />
    <img src="mm2.jpg" />
div>

2.常见的垂直居中方法

• 负margin：通用性较高，但在IE版本低于7时无效

div{
    position: absolute;
    height:10px;
    margin:-5px;
}

将px换成%、em、rem也同样适用。

• 设置父元素的line-height等于height：可以使元素内容居中，根据不同的设备可能会有1px的偏差。

div{
    height: 20px;
    font-size: 10px;
    line-height: 200%;
}

• 使用定位并设置偏移的方法：

div{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translate(-50%);
    -ms-transform: translate(-50%);
    -o-transform: translate(-50%);
}

3.适配不同机型宽度，同时使用百分比，rem单位，px单位
因为并不能确定1px在未知的机型界面上代表百分之多少，此时需要灵活使用css3新增的属性，calc。来避免出现塞到第二行这类的情况。
比如一个横排被塞满的情况下，另按钮整个嵌在父元素内：

<div style="width:100%;height:100px;">
    <div style="border:1px solid balck;width:calc(100% - 2px);height:100px;">div>
div>