Background-position

background-position定义background-image图片的位置，不受padding影响，相对于盒子模型的边框border定位。

可以修改默认值。

可以使用left right top bottom来定义；

也可以使用%来定义；

也可以使用像素来定义。比如
left bottom 表示左下角，如果仅定义了一个关键词，另一个center；
x% y% 第一个是水平位置；第二个是垂直位置

SASS

sass是一种CSS预处理器

sass定义了一种专门的编程语言，为CSS增加一些编程特性，比如在CSS中使用变量、简单的逻辑程序、函数等，然后进行页面样式设计的时候

，编译生成正常的CSS文件。

sass为CSS定义了许多编程的特性，函数，变量，嵌套等等，但是需要将css文件转化成sass文件。比较麻烦。

CSS预处理器，好处：变量、mixin、函数、规则嵌套、颜色处理等，坏处：css的文件体积和复杂度不可控、调试难度增加、成本等

Doctype 严格模式与混杂模式的区别在哪里

严格模式是浏览器根据web规范去显示页面，是一种要求严格的DTD，不允许使用任何表现层的语法，如
；混杂模式是以一种向后兼容的方式去显示，说的透明点就是可以实现IE5.5以下版本浏览器的渲染模式。

渐进增强和优雅降级

渐进增强：针对低版本浏览器构建页面，保证最基本的功能，然后再对高版本浏览器改进，追加功能达到好的用户体验。从被所有浏览器支持的基本功能开始，逐渐添加新浏览器才支持的功能，当新浏览器支持时，自动呈现出来。

优雅降级：一开始就构建全面的功能，然后再对低版本浏览器兼容。页面在新式浏览器能够正常显示，如果用户使用老式浏览器，则检查能否正常工作。

逐渐增强是从基本功能开始，不断扩充新的需要；优雅降价是从复杂的现状开始。逐渐减少用户体验的需要

COOKIES sessionStorage localStorage

Cookies是存储在本地的一种会话控制信息，大小通常不超过4KB，电源关了依然存在在，设置的cookies过期时间之前一直有效。。携带中http请求中，在服务器和客户端之间传递。

sessionStorage 本地存储会话数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。大小大得多5M级别

而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。大小大得多5M

行级块级

行级元素：不能设置宽高，和其他元素呆在一行，a span strong em u

块级元素：能设置宽高，独占一行不和其他元素呆在一行 p p h1-h6 ul li

盒子模型 块级元素相当于一个盒子，有外边距margin 边框border 内填充padding 内容content组成。

前端优化

原则就是多使用缓存，多使用内存；少进行CPU计算，少进行网络请求；

加载资源优化：

1.静态资源压缩合并

2.静态资源缓存

3.使用CDN让资源加载更快些

4.使用SSR进行后端渲染数据直接输出到HTML

渲染优化：

1.CSS放到前面，JS放后面

2.懒加载，图片懒加载，下拉加载更多

3.减少DOM查询，设置DOM查询缓存

4.减少DOM操作，多次DOM操作合并到一起

5.事件节流

6.今早执行操作 window.onload所有加载完成，静态文件啊 图片啊、和document.DOMcontentLoaded区别

代码层面：避免使用css表达式，避免使用高级选择器，通配选择器。

缓存利用：缓存Ajax，使用CDN，使用外部js和css文件以便缓存，添加Expires头，服务端配置Etag，减少DNS查找等

请求数量：合并样式和脚本，使用css图片精灵，初始首屏之外的图片资源按需加载，静态资源延迟加载。

请求带宽：压缩文件，开启GZIP，

代码层面的优化

移动端性能优化

安全

XSS 跨站请求攻击

在新浪博客写一篇文章，偷偷插入一段script

攻击代码中，获取cookie，发送到自己的服务器。

别人查看我的文章，获取查看者的cookie发送到攻击者的服务器。

预防：

前端替换关键字替换<为<，>为>；后端替换

XSRF 跨站请求伪造

你已登录一个购物网站，正在浏览商品；

该网站付费接口是xxx.com/pay?id=100但是没有任何验证

然后你收到一封邮件，隐藏着

你查看邮件的时候，就已经付款成功了

预防：

增加验证流程，指纹、验证码等