css3

css3：ie9以下不兼容，ie9不支持transtion

动画：transform（放大缩小、上下左右移动）、transition（过渡属性）、animation（动画元素、通过@keyframe设置动画动作）

margin和padding尽量改成transform:translate(1,10)【动画会稍微卡顿】

 

css3的渐进增强和优雅降级

css hack

IE的条件注释：

<！-- if IE9

　　　其他代码或引入js文件

-->

 

3、link和import的区别

　　link属于html，最大限度的支持并行下载

　　@import是css方式，如果出现过多的嵌套引入，可能出现fouc（样式闪屏）

 

4、css选择器的优先级：

　　!important > 行内样式（style="width:200px;"）> ID > class > tag

 

5、dom渲染机制

　　浏览器获取文档，解析代码

　　dom树和css树组合成渲染树，这个渲染树只包括渲染页面需要的节点，不包括js、style、display:none

　　布局计算每个对象的精确位置及尺寸

　　输入确定的渲染树，在显示区域渲染像素

css/js阻塞

　　默认情况下，css视为阻塞渲染的资源

　　

 

 

6、img和background：

　　img加载图片快于background

　　background对图片的控制（雪碧图）

　　img设置宽度100%会自适应，background不行

 

7、touch和click

　　touch：touchstart(手指触碰元素的时候)、touchmove(手指触碰离开元素的时候)，无法取消事件

　　tap：替代touch，封装的

 

移动端如果使用click，会有300ms的延迟响应，原因是浏览器会有双击放大或缩小的过程，所以当第一次点击后会等待300ms确定是否有第二次点击

解决方案：tap

　　　　touch事件自行封装组件

　　　　fastclick.js、使用方法只需要引入js，调用fastclick.attach()即可、在检测到touchend事件的时候，通过dom自定义事件触发一个模拟的click事件，并把浏览器300ms之后触发的click事件阻止掉。

 

 

移动端适配：

　　使用单位：rem/%/px

　　响应式布局：media媒体查询，适用范围