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

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

问题：谷歌浏览器不识别12px以下的字体大小（10px）

解决：（1）设置-webkit-transform:scale(0.83)，按比例缩小字体。但是标签左右会因缩小产生空白间隙，导致无法向左或者向右对齐（使用transform:scale(0.83)时; 不仅是文字变小了，整个文字所在的容器也同时会变小）;

（2）-webkit-text-size-adjust:none;（取消浏览器最小字体限制），但是只对英文才有效，对中文无效。在新版的chrome中，已经禁止了改属性，只对chrome27.0 版本以下有效，27.0以上版本无效。

设置字体大小为10px,在浏览器模拟器上无法识别，但在真机上不会出现问题。

问题：父盒子使用 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() 用新的文档替换当前文档。