面试题目积累

一、css部分

1.如何实现sticky footer布局；

http://www.open-open.com/lib/view/open1487572092207.html

2.、如何实现一行文本太多的时候适用省略号

        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

3、如何实现背景图片的滤镜和模糊效果

可以给背景设置为透明度，来实现滤镜

background:rgba(7,17,27,.4);

同时添加一张绝对定位的图片，利用index属性使得其置于底层 

    .bg-img {
        filter: blur(10px);
        position: absolute;
        width: 100%;
        height:100%;
        top: 0;
        left: 0; 
        z-index: -1;
    }

4、移动布局中的dpr问题，如何实现1像素边框

（利用媒体查询，after伪类，以及transform:scale属性）

@mixin border-1px($color) {
    position: relative;
    &:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        border-bottom: 1px solid $color;
    }
}
@media(-webkit-min-device-pixel-ratio:1.5),
(min-device-pixel-ratio:1.5) {
    .border-1px {
        &:after {
            transform: scaleY(0.7);
        }
    }
}

@media(-webkit-min-device-pixel-ratio:2),
(min-device-pixel-ratio:2) {
    .border-1px {
        &:after {
            transform: scaleY(0.5);
        }
    }
}