学习过程中遇到的小问题（一）

1.点击超链接前先验证

当点击超链接之前先弹出提示框，比如确认是否删除，采用的方法是：为超链接设置onclick动作，动作内容为弹出对话框。

<a href="#" onclick="check()">删除</a>

    function check() {
        var conf = confirm("确认删除吗？");
        if(!conf){
            return false;
        } 
    } 

2.update项目中的npm模块

在项目中依赖的版本不一致报错时，根据提示要进行update，操作：先卸载这个依赖（npm uninstall vue-template-compiler –save-dev），然后再重新安装（npm install vue-template-compiler –save-dev）。

3. 将SVG文件转化为图标字体

将SVG文件转化为图标字体，方便项目的使用。进入图标字体的制作网站https://icomoon.io/，点击右上角的按钮。

进入页面后可以看到里面有很多可以使用的图标，点击左上角的Import Icons按钮可以将我们想要制作的SVG文件全选上传。

选择之后点击右下角的Generate Font生成字体文件，生成页面的右上角Perferences可以设置字体文件的名字（font-family），根据自身需要进行设置修改后可以点击右下角的下载，就可以下载到本地，在项目中导入fonts文件夹和style.css文件就可以使用这些图标字体了。

4. 移动端1像素边框的问题

因为不同手机屏幕的dpr不同，在设计页面时要根据不同屏幕修改设计稿的设置值。1px的边框在电脑上看可能就是1px，但在手机屏幕上看可能是2px，那怎么实现呢？
我们可以给元素添加一个伪类:after，设置一条边框，再使用@media-query给不同dpr的屏幕设置边框高度的缩放。

mixin.styl

// mixin是一个css预处理器提供的特殊的方法，可以通过定义一个函数

border-1px($color)
    position: relative
    &:after
        display: block
        position: absolute
        left: 0
        bottom: 0
        width: 100%
        border-top: 1px solid $color
        content: ' '

查询不同手机端的dpr，来改变边框高度的缩放值

@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)
    .border-1px
        &::after
            -webkit-transform: scaleY(0.7)
            transform: scaleY(0.7)

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

5. 当文本内容超出时，使用省略号…

给元素设置一定的高度，当内容超出时，使用省略号…显示

            height: 28px;
            line-height: 28px;
            padding: 0 22px 0 12px;
            white-space: nowrap;  /*设置怎样给一元素控件留白*/
            overflow: hidden;
            text-overflow: ellipsis;  /*指定当文本溢出包含的元素，应该发生什么*/

6. 图片和文字垂直

当处在同一行的图片和文字垂直不一致时，同时设置 vertical-align: top;根据实际设置margin值。

7. 消除两个标签之间的间隙

由于元素自身的特性，两个<span>标签（其他标签也会）会存在间隙，要消除这个间隙，可以设置父元素font-size: 0 但是在上述“当元素内容超出时显示省略号…”这种情况下，省略号不见了，所以不能这样设置父元素的字体为0，可以在html代码中让两个span标签紧贴着。即<span>内容</span><span>内容</span>中间不要换行。

8. 给图片设置背景滤镜的效果（filter）

给图片设置背景滤镜的效果（filter），父元素本来有一个背景颜色，加上一个模糊的背景图片效果，做法是：父元素设置相对定位，子元素设置绝对定位，定位到父元素刚好的背景大小，设置滤镜效果。

    .header {
        position: relative;
        color: #fff;
        background: rgba(7,17,27,0.5);
        // img图片所在外部div
        .background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            filter: blur(10px);
        }
    }

效果：

9. CSS Sticky footer

CSS Sticky footer: 如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。详情请参考：https://www.w3cplus.com/blog/tags/136.html

            .detail-wrapper {
                min-height: 100%;
                width: 100%;
                .detail-main {
                    margin-top: 64px;
                    padding-bottom: 64px;
                 }
             }
            .detail-close {
                position: relative;
                width: 32px;
                height: 32px;
                margin: -64px auto 0 auto;
                font-size: 32px;
                clear: both;
            }

10. 移动端flex弹性布局

移动端flex弹性布局，如下图，横线根据移动端屏幕自适应。flex的第一个属性是flex-grow，默认为0，即如果存在剩余空间，也不放大。如果所有item的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

                    .title {
                        display: flex;
                        width: 80%;
                        margin: 30px auto 24px auto;
                        .line {
                            flex: 1;
                            position: relative;
                            top: -6px;
                            border-bottom: 1px solid        rgba(255,255,255,0.2);
                        .text {
                            padding: 0 12px;
                            font-size: 14px;
                        }
                     }

11. 垂直居中（多行）

多行内容垂直居中显示，使用table布局。父元素设置display: table;子元素设置display: table-cell;vertical-align: middle;

            .menu-item {
                display: table;
                height: 54px;
                width: 56px;
                padding: 0 12px;
                line-height: 14px;
                .text {
                    display: table-cell;
                    width: 56px;
                    vertical-align: middle;
                 }
            }