1.---------------------CSS 选择器及其优先级
!import>内联>id>class，伪类,属性>标签，伪元素
2.---------------------隐藏元素的方法
visible:hidden dispaly:none opative:0 transform: scale(0,0)： 缩放为0 postion 移出可视范围 z-index 设为负值
3.--------------------link 和@import 的区别
link属于html 标签，@import属于css语法，时css2.0提出的，可能存在兼容性问题 link 同页面一起加载，@import等页面加载完再加载 link可以操作dom，@import不可以
4.---------------------transition 和 animation
transiton 是过度效果，需要事件触发 animation 定好时间自动触发，需要触发事件
5--------------------display:none 与 visibility:hidden 的区别
dispaly是将元素从文档中彻底移除，会引起重排 visible是将元素隐藏，文档中元素还存在，并且还占有空间，会引起重绘
6-----------------------伪元素（::after,::before)和伪类(:hover,:firstchild)的区别和作用？
伪元素是在元素前后添加新的元素，这样的元素在文档中不会生成，也找不到，因此称为伪元素 而伪类只是给特定的元素添加特定的样式，并没有新增元素
7------------------------盒子模型
box-sizing ： conten 盒子宽度由width决定
box-sizing ：border 盒子宽度由width+padding+margin决定
8-------------------------为什么有时候用translate来改变位置而不是定位？
因为postion消耗内存较大，会触发重排，
9.---------------------css3新特性
圆角，线性渐变，tranform 平移，旋转，缩放，弹性盒子模型，媒体查询，阴影shadow，文字特效 text-shadow
10--------------常见的图片格式及使用场景
jpeg 有损 gif 无损 小动图 png 无损 存图片 svg 无损 矢量图 一般用于图标和logo
11.-------------对line-height 的理解及其赋值方式
一行文本的高度，值文本上一行到下一行的高度 light-height 和height都能撑开高度 与高度一致时文本垂直居中
12---------- CSS 优化和提高性能的方法有哪些？
加载性能 将css打包压缩减少体积 尽量使用link 不用@import 因为link会用文档一起加载，而@import会等文档加载才加载
选择器性能 尽量少用标签选择器，选用class选择器
渲染性能 少使用高性能选属性：浮动，定位 尽量减少重排重绘 选择器别嵌套太深 不使用@import，会影响css加载速度
可维护性，健壮性 抽取公共样式 样式与内容分离，将css定义在外部css样式里 可以大大减少页面代码，加载页面的时间也会减少
13.----------------CSS 预处理器/后处理器是什么？为什么要使用它们？ sass，less ，在css基础上提供了一些更强大的功能：层级，变量，循环，函数，mixin混入 使css编写更加友好，结构清晰
14，--------------单行、多行文本溢出隐藏
单行 overflow:hidden text-overflow:ellipisis whiteSpace:no-wrap
多行 overflow:hidden text-overflow:ellipisis display：-webkit-box; // 作为弹性伸缩盒子模型显示。 -webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列 -webkit-line-clamp:3; // 显示的行数
15.-----------------对媒体查询的理解？ 在不同的屏幕尺寸上，设计不同的样式
16---------------------对 CSS 工程化的理解
使用css预处理器对css的目录结构进行优化，对css进行复用，并具有更强的拓展能力（ 提供了传统css所没有的功能函数，变量，混入，嵌套，循环 ） 使用webpack loader 对css 进行打包压缩
17.--------------------- z-index 属性在什么情况下会失效 position为static时，不是其他定位元素 父元素为position：relective 设置z-index同时 ，也设置了float（float去除，将diaplay改为inline-block）
18--------------CSS3 中的 transform 有哪些属性 缩放 scale 平移 tanslatex 旋转 rotate
如何判断元素是否到达可视区域（滚动过的距离加上可视区高度 大于 元素距离顶部的高度） 浏览器可视区高度 window.innerHeight 浏览器滚动过的距离 document.body.screenTop 元素距离浏览器顶部的距离（包括滚动过的距离）； img.offsetTop 可视区域 window.innerHeight + document.body.scrollTop>img.offsetTop
