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="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媒体查询,适用范围

原文地址:https://www.cnblogs.com/laojun/p/8504449.html