web前端开发中遇到的问题整理记录——2020-03

目录

1. css 禁用a标签
2. angular2 [ngStyle] [ngClass]的用法
3. node 版本更新
4. css 超出隐藏
5. css width和height 的计算
6. css3自适应布局单位vw,vh
7. angular 组织默认事件和冒泡
8. angular innerHtml
9. string startsWith() 方法
10. css 透明度设置

内容

1. css 禁用a标签

2. angular2 [ngStyle] [ngClass]的用法

1. ngStyle

判断添加

2.ngClass

第一个参数为类名称，第二个参数为boolean值，如果为true就添加第一个参数的类,
基本用法: ngClass]="{'text-success':true}"

判断
[ngClass]="{'text-success':username == 'zxc'}"
[ngClass]="{'text-success':index == 0}"

3. node 版本更新问题

win系统下 node只能下载新版本覆盖旧版本更新

4. css 超出隐藏

单行

overflow:hidden; //超出的文本隐藏
text-overflow:ellipsis; //溢出用省略号显示
white-space:nowrap; //溢出不换行

多行

overflow: hidden;
text-overflow: ellipsis;
display:-webkit-box; //作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
-webkit-line-clamp:2; //显示的行

5. css width和height 的计算

width:calc(100% - 20px);
width:-webkit-calc(100% - 20px);//chrome
width:-moz-calc(100% - 20px);//firefox
height:calc(80% + 20px);
height:-webkit-calc(80% + 20px);//chrome
height:-moz-calc(80% + 20px);//firefox

特别注意：+或者-两边都要用空格隔开！！！

6. css3自适应布局单位vw,vh

在PC端，视口指的是在PC端，指的是浏览器的可视区域；

而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。

视口单位中的“视口”，PC端指的是浏览器的可视区域；移动端指的就是Viewport中的Layout Viewport。

根据CSS3规范，视口单位主要包括以下4个：

  1.vw：1vw等于视口宽度的1%。

  2.vh：1vh等于视口高度的1%。

  3.vmin：选取vw和vh中最小的那个。

  4.vmax：选取vw和vh中最大的那个。

vh and vw：相对于视口的高度和宽度，而不是父元素的（CSS百分比是相对于包含它的最近的父元素的高度和宽度）。1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度。

比如：浏览器高度950px，宽度为1920px, 1 vh = 950px/100 = 9.5 px，1vw = 1920px/100 =19.2 px。

vmax相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax。

vmin相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin。

7. angular 组织默认事件和冒泡

ng-click="ratioTab(3,$event);

阻止冒泡 $event.stopPropagation()

阻止默认行为 $event.preventDefault()

8. angular innerHtml

在页面展示后台传来的html片段时，可以用innerHtml属性

不过片段中的样式css会被忽略。

可以使用自定义管道实现对展示内容的自定义样式。

import { Pipe, PipeTransform } from "@angular/core";
import { DomSanitizer } from '@angular/platform-browser';
 
@Pipe({ name: 'safeHtml' })
export class SafeHtmlPipe implements PipeTransform {
  constructor(private sanitized: DomSanitizer) { }
 
  transform(value) {
    return this.sanitized.bypassSecurityTrustHtml(value);
  }
}

  htmlStr = `
    
innerHtml内容
    
样式自定义
  `

9.string startsWith() 方法

查看字符串是否为 "xx" 开头:

var str = "Hello world, welcome to the Runoob.";
var n = str.startsWith("Hello");  //true

10. css 透明度设置

设置透明度opacity，其子元素也会继承
避免使用background：#000；opacity：0.5，建议使用background：rgba(0,0,0,0.5)