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

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;                 }            }