工作中遇见的一些问题总结

2017-08-07

学习fis3语法.

• 命令：
  • -d destination 构建发布到的目标文件
  • -r run 运行
  • -w watch 监视
• 配置文件：
  • fis.match(selector, props) 匹配文件路径，设置编译规则属性
  • fis.media() 接口提供多种状态功能（开发环境、生产环境、scss）
• 插件(parser)：
  • fis-parser-node-sass sass/scss 编译成 css
  • fis-parser-babel-5.x jsx/es6/es7编译成es5
  • fis3-parser-typescript typescript/es6/jsx 编译成 js。速度相比babel略快，但是 es7 跟进较慢
  • fis-parser-less-2.x less 编译成 css
• 压缩(optimizer)：
  • fis.plugin('uglify-js') 压缩js
  • fis.plugin('clean-css') 压缩css
  • fis.plugin('png-compressor') 压缩图片
  • fis.plugin('html-strip') 压缩html

2017-08-08

问题：弹性布局中flex-grow属性的作用
解决：查看资料了解了flex-grow和flex-shrink的区别
flex-grow 属性决定了父元素在空间分配方向上还有剩余空间时，如何分配这些剩余空间。其值为一个权重（也称扩张因子），默认为 0（纯数值，无单位），剩余空间将会按照这个权重来分配。
flex-shrink 属性定义空间不够时各个元素如何收缩。其值默认为 1。

2017-08-16

1. 问题：谷歌浏览器不识别12px以下的字体大小（10px）
   解决：（1）设置-webkit-transform:scale(0.83)，按比例缩小字体。但是标签左右会因缩小产生空白间隙，导致无法向左或者向右对齐（使用transform:scale(0.83)时; 不仅是文字变小了，整个文字所在的容器也同时会变小）;
   （2）-webkit-text-size-adjust:none;（取消浏览器最小字体限制），但是只对英文才有效，对中文无效。在新版的chrome中，已经禁止了改属性，只对chrome27.0 版本以下有效，27.0以上版本无效。
   设置字体大小为10px,在浏览器模拟器上无法识别，但在真机上不会出现问题。
   2. 问题：父盒子使用 display:-webkit-box; 布局，子盒子使用 -webkit-box-flex: 1; 等比例分栏，当给其中一个子盒子设置padding或者margin时，会改变子盒子的盒模型大小。
   解决：根据情况按等比例使子盒子分栏。例如：分两栏，则给两个子盒子分别设置：width:50%; 在这种情况下不会改变子盒子的盒模型大小。

2017-08-21

问题：iPhone5下的“投资明细”页面左栏圆圈tag变形。
解决：主要是由于给圆圈设置的border宽度为rem单位，因此导致想屏幕下的border自适应屏幕之后变得特别小，然后变形。使用px为单位就可以解决问题了。在以后的开发中，类似于border宽度的，都应该使用px固定单位，而不用rem作为单位。

2017-08-28

熟悉状态码304：重定向，资源有缓存
自从上次请求后，请求的网页未修改过。服务器返回此响应时，不会返回网页内容。
如果网页自请求者上次请求后再也没有更改过，您应将服务器配置为返回此响应（称为 If-Modified-Since HTTP 标头）。服务器可以告诉 Googlebot 自从上次抓取后网页没有变更，进而节省带宽和开销。

2017-08-30

2 . 了解document.referrer的兼容性，以及失效的几种情况

• http://www.zhangxinxu.com/wordpress/2017/02/js-page-url-document-referrer/
• http://blog.csdn.net/flyingpig2016/article/details/53130912

3 . 了解CSRF跨站请求伪造攻击和ClickJacking漏洞

• CSRF跨站请求伪造攻击：
  • http://www.cnblogs.com/hyddd/archive/2009/04/09/1432744.html
  • http://blog.csdn.net/stpeace/article/details/53512283
• ClickJacking漏洞：
  • https://www.zhuyingda.com/blog/article.html?id=6&origin=cnode

4 . 了解location对象的一些属性和方法

• 属性：
  • hash 设置或返回从井号 (#) 开始的 URL（锚）。
  • host 设置或返回主机名和当前 URL 的端口号。
  • hostname 设置或返回当前 URL 的主机名。
  • href 设置或返回完整的 URL。
  • pathname 设置或返回当前 URL 的路径部分。
  • port 设置或返回当前 URL 的端口号。
  • protocol 设置或返回当前 URL 的协议。
  • search 设置或返回从问号 (?) 开始的 URL（查询部分）。
• 方法：
  • assign() 加载新的文档。
  • reload() 重新加载当前文档。
  • replace() 用新的文档替换当前文档。