1.问题一: 两个display：inline-block元素放到一起会产生一段空白。
123
123

产生空白的原因
元素被当成行内元素排版的时候,元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据CSS
中white-space属性的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空
白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。

解决方法
1.将子元素标签的结束符和下一个标签的开始符写在同一行或把所有子标签写在同一行

123
123
2.父元素中设置font-size: 0，在子元素上重置正确的font-size
123
123

3.为子元素设置float:left

知识点:
垂直方向的50%, 相对的是with的百分比

http://47.98.159.95/my_blog/css/005.html#%E7%AC%AC%E4%B8%80%E7%A7%8D

问题: 如何让if(a == 1 && a == 2)条件成立？

var a = {
value: 0,
valueOf: function() {
this.value++;
return this.value;
}
};
console.log(a == 1 && a == 2);//true

或者
var a = {
i: 1,
toString:function() {
return a.i++;
}
};
console.log(a == 1 && a == 2); //true

2. css letter-spacing 属性

letter-spacing 属性增加或减少字符间的空白（字符间距）。

设置字间距
3. css3设置渐变色 (linear-gradient)

css给网页中的背景设置渐变

//浏览器前缀
background: linear-gradient(red, blue);
background: -webkit-linear-gradient(red, blue);
background: -o-linear-gradient(red, blue); 
background: -moz-linear-gradient(red, blue);

to top :颜色从下往上渐变：

to bottom: 颜色从上往下渐变; background: linear-gradient(to bottom, red, blue);

to left: 颜色从右往左渐变; background: linear-gradient(to left, red, blue);

to right: 颜色从左往右渐变; background: linear-gradient(to right, red, blue);

to bottom right: 颜色从左上角到右下角渐变

to top left: 颜色从右下角到左上角渐变; background: linear-gradient(to top left, red, blue);

4.超出文本显示省略号
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
超出文本显示省略号

多行文本省略号:

方法一: -webkit-line-clamp (只适用Webkit内核的浏览器或移动端) 

overflow: hidden；（文本溢出限定的宽度就隐藏内容）
-webkit-line-clamp: 2；（用来限制在一个块元素显示的文本的行数, 2 表示最多显示 2 行。 为了实现该效果，它需要组合其他的WebKit属性）
display: -webkit-box；（和 -webkit-line-clamp: 2；结合使用，将对象作为弹性伸缩盒子模型显示 ）
-webkit-box-orient: vertical；（和 -webkit-line-clamp: 2；结合使用 ，设置或检索伸缩盒对象的子元素的排列方式 ）
text-overflow: ellipsis；（多行文本的情况下，用省略号“…”隐藏溢出范围的文本)
超出文本显示省略号
5. css把li前面的小圆点改成图片 (list-style-image)
  • 咖啡
  • 茶
  • 可口可乐
6. vertical-align 属性设置元素的垂直对齐方式
7. 设置overflow: scroll 滚动条样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

  /* 定义滚动条样式 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  background-color: rgba(240, 240, 240, 1);
}
 
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0px rgba(240, 240, 240, .5);
  border-radius: 10px;
  background-color: rgba(240, 240, 240, .5);
}
 
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 0px rgba(240, 240, 240, .5);
  background-color: rgba(240, 240, 240, .5);
}

https://www.jianshu.com/p/c2addb233acd