平时笔记总结（1）

　　当设计的所有css样式都一样，一个元素却会无缘无故的变小，找不到原因的时候，有可能是元素的父元素设置了display: flex; display:flex, 浏览器会自动的放大或缩小。

　　当我们用构建工具开发项目完成时，如果我们需要复制整个项目给我们的同事参考， 里面的node_modules 文件夹是不用复制的。因为我们在开发过程中，所有的依赖都写入到了package.json 文件中。只要项目中有package.json文件，同事拿到项目，命令行中npm install， node modules 文件夹会自动生成，又快又省事。　

　　Sass 语法高亮插件：syntax highlighting for Sass. 所谓语法高亮，就是用不同的颜色和字体显示编程语言中关键字， 函数，参数等，使人们更容易阅读代码，也能帮助开发者很快的找到他们程序中的错误。

　　Css 中的属性选择器：[attr], 一般我们经常用a[href=”www”], 其实前面的 a 元素可以去掉，如果 [title=”b”], 这就表示，页面上的所有元素只要它有title 属性，且title 属性是b ,就可以应该样式。

　　Html5 中，元素新增了hidden 属性，其取值为true or false , 决定元素显示和隐藏。[hidden] 可以对页面上所有隐藏掉的元素设置样式。　

移动端默认字体：

IOS下， 原来的英文字体是Helvetica Neue, 中文字体是Helvetica; 但在IOS 9 和IOS10 以后，英文字体改为了San Francisco ， 中文字体改为了PingFang SC。

Android 下，原来的英文字体是 Droid Sans, 中文字体是Droid Sans Fallback; Android 4.0 以后， 英文字体改为了Roboto, 中文字体改为了思源黑体（Noto SansCJK）, CJK是 中日韩三国英文单词的首字母缩写，这表示 思源黑体是Google 专门为亚洲设计的字体。我们在平常在设计font的时候，要写 Noto SansCJK SC , SC 表示china。

Window 下， 英文字体是’Segoe UI’， 中文字体中 “微软雅黑”；

　　最后我们再提供回退机制， Arial, sans-serif;

　　Es5中增加了一个bind 方法，对函数中的this 进行硬绑定，它返回就是this 被硬绑定后的函数， 记住，它返回的是一个函数，只不过里面的this被绑定死了，以后这个函数运行时，this 不会变化。 Apply 和 call 方法，是函数调用时，动态指定里面的this. 调用这两个方法，函数已经执行了。

　　在web 中，不论我们使用的是什么框架，最终都要转化成html, css 和js, 否则浏览器不知道要做什么。React 应用jsx 语法，所以浏览器压根不懂是什么东西，我们所有的react 应用，最终都会转化成为html, css, js. 围绕node 及一些构建工具（webpack, gulp）来设置开发环境，这是现代web 开发方式，同时还可以应用模块化，创建更复杂的应用。

FQ软件 有可能阻止 npm run dev 打开的本地服务器。 Npm run dev 返回502 Server dropped connection， 很可能是FQ软件的原因，把FQ软件禁掉就可以了。

　　只要把不同功能的代码放入到不同模块（js文件）中，保持代码分离还是非常简单的。 有时把一个.js文件变成一个模块非常简单，尤其是它只提供单一功能，我们只需要用一个函数把文件中的所有内容全部封装起来，然后把这个函数导出即可。（node 并不支持es的import, export, 还是要用commanJS 规范）

// file.js
module.exports  ={a: 10};
exports.b = 20;
// app.js
var file = require('./file');
console.log(file.a, file.b); // 10 undefined

Then, in this case, we would get 10 undefined as the result. That's because module.exports has a new object assigned and exports still points to the old one. moddule.exports 重写了 我们要暴露出的对象,而 exports 仍然指向以前那个对象.

　　在node 中全局安装的命令都放到了C:\Users\sam\AppData\Roaming\npm\node_modules 里面。

　　对于input 输入框，它有一个size 属性，表示输入框中最多显示多少个字符，还有一个maxlength 属性，表示最多输入多少个字符。Textarea 只有一个maxlength 属性，表示最多输入多少个字符, 当超过maxlength 时,就无法输入了。

　　当从别的地方复制粘贴html代码时，一定要注意，它是不是把换行符或回车符也粘合过来，而这两个符号在html 标签中是不存在的，很难发现bug. 这是我在做flexbox 布局的时候，第一个元素的左边永远会多一块空间出来（如下），所有的样式都换了一遍，仍是没有解决问题，这个bug 始终存在。



　　准备放弃的时候，我把别人的代码粘贴过来，但是没有这个问题，



　　我又把我们代码还原，和别人的代码对比了一下，仍没有发现什么不同，但浏览器的展示结果就是不一样。

　　代码如下，可以看到 一模一样，没有什么不同，

<ul>
　　<li>电脑</li>
　　<li>手机</li>
　　<li>平板</li>
</ul>
<!--上面是我写的代码,下面是别人的代码-->
<ul>
<li>电脑</li>
<li>手机</li>
<li>平板</li>
</ul>

　　但刷新浏览器后，bug依然存在，如下图所示， 我的代码所展示出来的效果，第一个元素的左侧多出了一个空间，且元素之间还存在很大的距离。



　　最后没有办法，想到html 代码可以写成一行，那么元素之间什么空间都没有了，我把我的代码改成了一行。

<ul><li>电脑</li><li>手机</li><li>平板</li></ul>

　　神奇的事情发生了，展示结果一致了，



然后我又enter键和tab键，把一行的代码进行整理，缩进，如下，没有任何问题。

<ul>
　<li>电脑</li>
<li>手机</li>
<li>平板</li>
</ul>

　　这说明在原来的代码中每一个li标签的前面，肯定有一个东西，我猜应该是回车换行符之类，找了一下html实体符号，里面有一个 en space ,什么都不显示，我们把加到了html代码中试了一下，它确定改了li元素的位置，平常都是按tab 4个空格进行缩进，我加了四个实体符号，

<ul>
   <li>电脑</li>
<li>手机</li>
<li>平板</li>
</ul>

　　它确定改变了li的位置，我想，我粘贴过来的肯定是这些看不见的实体符号，占据了空间。真的是什么都能发生啊。星期天浪费了两个小时。