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

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>

你可能感兴趣的:(杂)