display:none与visibility：hidden 的区别
1.dispaly:none;会让元素完全从渲染树消失，渲染的时候不占据任何空间;
visibility：hidden 不会让元素从渲染树消失，渲染的元素继续占据空间，只是内容不可见
2.display:none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示
visibility：hidden；是继承属性，子孙节点消失是由于继承了hidden，
通过设置visibility：visible；可以让子孙节点显示
3.修改元素的display:none通常会造成文重排。而修改visibility：hidden属性只会造成当前元素的重绘
4.读屏器不会读取display:none元素内容；会读取visibility：hidden元素内容
关于透明度
透明度一般有两种做法
第一种： opacity:0.5；这种设置透明度的方法会影响子节点。
也就是说包含在该元素内的所有子节点都会被添加透明度。
第二种：background:rgba(0,0,0,0.5);这种设置透明度的方法不会影响到子节点，只给本身设置透明度。
什么是层叠
层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性。
CSS伪类和伪元素的区别
伪类：用于选择DOM树之外的信息，或是不能用简单选择器进行表示的信息。
（相当于一个特殊的class选择器，用来添加一些特殊效果）
伪元素：为DOM树没有定义的虚拟元素。不同于其他选择器，它不以元素为最小选择单元，
它选择的是元素指定内容。（相当于一个特殊的元素（div、span），可以用来存放一些特殊样式或者内容）
简而言之作用于元素当前内容修饰（之前，之后，首字，首行）
文字展示
文字一行展示
text-overflow:ellipsis;
overflow: hidden;
white-space:nowrap;
文字多行展示，超出显示...
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
