5°

前端知识概括

一、position属性四个值区别和用法

1、static(静态定位)默认值,无法使用top,bottom,left,right以及z-index,这种定位方式用margin来改变位置,并且不脱离文档流。

2、relative(相对定位):生成相对定位的元素,通过top,bottom,left,right的设置相对于其正常(原先本身)位置进行定位。可通过z-index进行层次分级。(一般用作改变层级和作为绝对定位的参照物)   

3、absolute(绝对定位):生成绝对定位的元素,相对于 static 定位以外第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。如果说他的父级定位是默认的,那么他就会继续向上找父级的父级,直到找到非static定位元素为基准点来进行定位,在没有父元素的条件下,它的参照为body。

4、fixed(固定定位)固定定位,这种定位是相对于浏览器的窗口进行定位,通常用来显示一些提示信息,比如大多数网站上的右下角都有一个回到顶部的按钮,这种定位脱离文档流,元素的位置通过 left, top, right 以及 bottom 属性进行规定。可通过z-index进行层次分级。

二、display:none、visibility :hidden、 opacity:0的区别是什么

  • opacity=0,该元素隐藏起来了,但不会改变页面布局,并且,如果该元素已经绑定一些事件,如click事件,那么点击该区域,也能触发点击事件的
  • visibility=hidden,该元素隐藏起来了,但不会改变页面布局,但是不会触发该元素已经绑定的事件
  • display=none,把元素隐藏起来,并且会改变页面布局,可以理解成在页面中把该元素删除掉一样

三、居中方法

四、css3 transtion和animation区别

  • 1.  触发条件不同。transition通常和hover等事件配合使用,由事件触发。animation则和gif动态图差不多,立即播放。
  • 2. 循环。 animation可以设定循环次数。
  • 3. 精确性。 animation可以设定每一帧的样式和时间。tranistion 只能设定头尾。 animation中可以设置每一帧需要单独变化的样式属性, transition中所有样式属性都要一起变化。

五、前端性能优化

  •  减少 HTTP 请求数量
  •  CSS Sprites (CSS精灵图,网页图片应用处理方式 )
  • 合并 CSS 和 JS 文件
  • 采用 lazyLoad(懒加载)
  • 控制资源文件加载优先级
  • 利用浏览器缓存
  • 减少重排(Reflow)
  • 减少 DOM 操作
  • 使用CDN加速(内容分发网络)

  • 图标使用 IconFont 替换

六、(未完待续)

 

本文由【cdgogo】发布于开源中国,原文链接:https://my.oschina.net/u/3982771/blog/3158517

全部评论: 0

    我有话说: