CSS 常用技巧

1. 事件不响应，事件穿透

// 效果和没有定义pointer-events属性相同
pointer-events: auto;
// 鼠标事件不响应，事件穿透, 子元素会继承
pointer-events: none;

2. 文本溢出显示省略号

• 1. 单行溢出

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

• 2. 多行溢出(只有-webkit 内核才有作用)

  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  

3. CSS 计算属性

// calc() = calc(四则运算)
width: calc(100% - 10px)；
// 需要注意的是，运算符前后都需要保留一个空格
// 任何长度值都可以使用calc()函数进行计算；
// calc()函数支持 "+", "-", "*", "/" 运算；
// calc()函数使用标准的数学运算优先级规则；

4. CSS 视窗单位

vw——viewpoint width，视窗宽度，1vw等于视窗宽度的1%；
vh——viewpoint height，视窗高度，1vh等于视窗高度的1%；
// 使用：
width: 80vw;
height: 100vh;

5. CSS 禁止用户选择文本

user-select: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;

6. 文本下划线

• 1. 去除 a 标签下划线

  text-decoration:none;
  

• 1. 添加文本下划线

  text-decoration:underline