整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
文介绍前端方面的冷知识或者一些易踩坑点，防止大家踩坑。下面和千锋广州小编一起来看看吧！
JavaScript
所有对象都有 __proto__ 属性，都指向创造对象的函数对象的 prototype。
上传文件要使用 formdata 包装。
Promise.prototype.catch 方法是 .then(null,rejection) 的别名。
同一个 EventTarget 注册了多个相同的 EventListener，那么重复的实例会被抛弃。所以这么做不会使得 EventListener 被调用两次，也不需要用 removeEventListener 手动清除多余的EventListener，因为重复的都被自动抛弃了。
当使用 addEventListener() 为一个元素注册事件的时候，句柄里的 this 值是该元素的引用。其与传递给句柄的 event 参数的 currentTarget 属性的值一样,而 target 是直接接受事件的子元素。
scrollIntoView() 使 div 底部滚动到视窗。
使用 const 的对象和数组的内容是可以被修改的，但数据结构不可变。
在 webpack 里，所有的文件都是模块。loader 的作用就是把文件转换成 webpack 可以识别的模块。
关于事件循环，执行下一个 task 之前总会清空 microtask。
npm 新旧版本覆盖可能会造成迷之问题，这个时候可以试试 node_module 整个删掉重装。
* 、 / 和 - 操作符都是数字运算专用的。当这些运算符与字符串一起使用时，会强制转换字符串为数字类型的值。
document.title 可以直接修改当前 html 的标题。
利用对象浅拷贝修改对象，指向同一对象的两个变量修改对象的效果一样。
脑洞题：1 和 2 只用一次的情况下怎么得到 4 答案：1<<2。
连等赋值从右到左。
compositionstart 事件触发于一段文字的输入之前（类似于 keydown 事件，但是该事件仅在若干可见字符的输入之前，而这些可见字符的输入可能需要一连串的键盘操作、语音识别或者点击输入法的备选词）。
void0（void后面加任何东西）用于生成一个绝对的 undefined（不会被重定义），但跟函数会有副作用
注意 localStorage 保存的只能是字符串，所以是没有 null 的。
坑一个：
import 同步，require异步（待补充）。
new() 做了些什么？
stage 0 到 4 的含义：
stage 0 is "i've got a crazy idea",
stage 1 is "this idea might not be stupid",
stage 2 is "let's use polyfills and transpilers to play with it",
stage 3 is "let's let browsers implement it and see how it goes",
stage 4 is "now it's javascript".
Object.getOwnPropertyNames(obj).length===0 判断 obj 是不是空对象。
getBoundingClientRect() 用于获取元素宽高以及距离页面边框距离，十分方便。
&& 的使用场景：左边为真继续执行右边，如 isDog&&bark()。
|| 的使用场景：左边为假继续执行右边，如 leti=value||defalutValue。
Vue.js
v-model 会自动 bind 一个值，其变量名为 value。
多个特性的元素应该分多行撰写，每个特性一行。以下为 vscode 里 vetur 的设置：
组件 destroy 时触发自定义指令的 unbind，destory 的时机：diff 之后的 patch,如 v-if，v-for（key不同时，先销毁原来的，再挂载新的（推测））
自定义组件 v-model watch 自动匹配（存疑
组件的 data 属性要用函数返回的原因：创建实例时如果 data 是一个对象的话，所有实例都会引用同一个对象，而对象返回不会有此问题。在浏览器中可以这么做是因为根实例只有一个。
.vue 文件中使用 /deep/ 覆盖子组件 css。
GitHub
从 commit 关闭 issues 的方法：commit 信息写 Fixes#33，其他关键字还有 close closes closed fix fixesfixedresolve resolves resolved。
git reset--soft HEAD^ 回退一次 commit。
CSS
div 的默认宽度是父元素宽的 100%。
逐帧动画 animation:animate-name3ssteps(每次循环的帧数)infinite;：
"Break out" of a parent's containing width to take the full screen of a page w/this nice utility class：
行内元素与下一个元素中间有空格（正常排版）,会引起一些诡异的缝隙，常见的例如元素之间有间隔，或看起来空了一行（像加了padding）。
pre 标签设置自动换行：white-space:pre-wrap;。
隐藏一个元素，同时让这个元素的宽度可获取：设置 overflow:hidden，可以根据元素高度裁剪视区，设置 height:0;overflow:hidden。虽然文档流中占用了位置，由于高度为 0，最终表现特征达到了我们期望的 display:none。此时该元素 clientHeight、 offsetHeight 为 0，但是 scrollHeight 是有值的。
scrollHeight 是一个元素没有滚动条时的所有内容高度,当一个元素没有滚动条时 scrollHeight===offsetHeight。
当 Render Tree 中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。
当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。
回流必将引起重绘，重绘不一定会引起回流。
移动端优化常用 CSS 属性：
@keyframes 的属性要前后对应，否则不形成动画。
img 元素图像自适应居中，与 background-size 效果一样：
<img/> 标签千万记得写宽高，不然会花式塌陷。
flex-grow 所在元素如果未定宽度的话，宽度会被子元素撑开。
一个英文单词默认不换行，无论多长，所以要设置 wordbreak。
多行文字居中：
safari 中控制惯性滚动 -webkit-overflow-scroll。
滚动条样式可能使滚动条强制显示（未确定）。
flex 布局不换行加 flex-shrink:0; 实现 div 不压缩无限并排，可以用于 swiper 等场景。
巧用猫头鹰选择器 *+* 。
float 自带 display:block。
鼠标禁用 .disabled{pointer-events:none;}。
注意 :last-child 与 :last-of-type 的区别。
::after 表示法是在 CSS3 中引入的， :: 符号是用来区分伪类和伪元素的。支持CSS3的浏览器同时也都支持 CSS2 中引入的表示法 :after。
父元素如果存在 transform 属性，子元素的 position:fixed 属性无效。
less 中的 calc 问题：height:calc(~"100% - 50px");。
vh 在部分浏览器中包含地址栏部分，小心使用。
VSCode
alt + shift + 鼠标点击 纵向选择。
vetur 分号问题：安装 prettier，然后配置 "prettier.singleQuote":true,"prettier.semi":false。
可以使用插件 document this 方便写注释。
html tag 属性分行 wrap_attributes:force。
选定变量后按 F12 找到定义位置。
其他
魔法隧道用 webpack 代理会 502。
在组件化编程中，悼念被同名组件浪费了几个钟的 debug 时间[蜡烛]。
局域网连不通的话，先试试，开共享，关闭防火墙。
局域网连不通的话，还可以试试，在 webpack.config.js 文件的 devServer 里加上 host:'0.0.0.0'。
iOS 的回弹效果，动的是 body 部分，html 是不动的。
学习一个语言之前先看规范。
safari 的 formdata 只支持 append，其他方法需要 polyfill。
rc 的意思是 run commands。
导航栏高度 88px，标签栏高度 98px（iphone5和6常用）。
关于 HTTP 304 Not Modified，简单来说，请求内容没有发生变化的时候，根据设置，服务器可能直接取缓存返回。
Web前端开发-CSS入门干货01 、Web前端开发-CSS入门干货02 、Web前端开发-CSS布局-盒子模型入门干货 介绍了CSS重要基础概念选择器和字体系列、文本系列、背景系列样式以及CSS布局中元素的盒子模型，下面介绍CSS布局中另外两个重要应用浮动和定位。
根据元素浮动、定位的特性可以将CSS布局分为三种：标准流、浮动流、定位流；
其中标准流是利用块级元素独占一行、自上而下，行内元素一行显示、遇到阻碍自动换行、自左向右的布局方式。
（1）什么是浮动
元素脱离原先位置，不再占据空间，相对于未浮动元素类似漂浮在其上面；
浮动元素具有了行内块元素特性，并实现贴边布局。这里的边可以是父级元素的边也可以是同样浮动的兄弟级元素的边。
（2）浮动解决的问题
改变块级元素默认的垂直布局方式，改为横向布局。
行内块样式（display: inline-block;）也可以改变块级元素的布局方式，但是不能灵活解决两个块级元素之间缝隙、不能灵活解决多个块级元素分别实现左对齐、右对齐等问题。当然如果想要块级元素随意放置，那就要用到定位了。
（3）浮动的语法
选择器 {float:none/left/right}，对选择器选择的元素实现不浮动、左浮动、右浮动。
（4）浮动的典型应用
通过不浮动的块级元素+嵌套在其内内的浮动元素，实现页面各种布局。
块级元素实现纵向布局，浮动的元素实现横向布局。
（5）因为浮动引出的问题
浮动元素通常嵌套在一个不浮动的元素内，进行配合使用；所有浮动元素的高以及外边距之和不能超过那个不浮动元素，否则出现重叠。
那么当嵌套的浮动的子元素数量不确定时，那么父级元素的高度就不能确定。为了解决这个问题，提出来不设置父级元素的高度，让子元素的高度之和成为父元素高度的方式；然而浮动的子元素具有脱离原先位置、不占空间的特点，那么父元素的高度只会是0，在父元素之后的兄弟元素就会与上一个父元素内浮动元素发生重叠。为了解决这个问题，提出来清除浮动。
（6）清除浮动
1）语法
选择器 {clear:right/left/both};清除选择器选中的元素的右浮动、左浮动、左右浮动。
2）清除浮动方式
a）额外标签法
添加一个与浮动元素同级的空标签（块级），并为其设置清除浮动的样式。
<style>
.one {float:left}
.kongbq {clear:both}
</style>
<div class="box">
<div class="one"> </div>
<div class="kongbq"> </div>
</div>b）父级元素添加overflow样式（常用）
语法：选择器 {overflow:hidden}
c）父级元素添加after伪元素样式（常用）
样式如下：
.clearfixry:after {
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfixry { /*IE6、7专有*/
*zoom:1;
}d）父级元素添加双伪元素（常用）
样式如下：
.clearfixry:before,.clearfixry:after {
content:"";
display:table;
}
.clearfixry:after {
clear:both;
}
.clearfixry { /*IE6、7专有*/
*zoom:1;
}（1）什么是定位
将html元素放置在任意指定的位置，提高页面布局的灵活性。
（2）定位解决的问题
比如页面侧边固定的工具栏、轮播图
（3）定位的实现方式
利用定位模式+边偏移，在样式中设定定位模式，然后设定元素盒子模型边偏移。
1）边偏移
包括top、right、bottom、left四个分项。
2）定位模式分类
a）静态定位（static）：元素无偏移，也即元素本身的默认布局方式。
语法：选择器 {position:static;}
b）相对定位（relative）：相对元素自身原先位置设置偏移。（常用）
语法：选择器 {position:relative;}
需要注意的是设置了相对定位的元素仍旧实际占据位置
c）绝对定位（absolute）：相对于元素的拥有定位的父级（或者更高级）元素进行定位。（常用）
语法：选择器 {position:absolute;}
需要注意的（1）设置的绝对定位的元素的参考依据是有定位模式的父级或者更高级元素的。
（2）设置了绝对定位的元素会有浮动效果，即不再占有位置。
d）固定定位（fixed）：相对于浏览器可视区域，在某个位置固定不动。（常用）
语法：选择器 {position:fixed;}
需要注意的（1）设置的固定定位的元素的参考依据浏览器当前可视窗口。
（2）设置了固定定位的元素会有浮动效果，即不再占有位置。
e）粘性定位（sticky）：被认为是相对定位和固定定位的混合。元素在跨越特定偏移前为相对定位，之后为固定定位。
语法：选择器 {position:sticky; top:10px;}
需要注意的是（1）粘性定位一定要设置边偏移（任何边都可行），否则其功能和相对定位相同。
（2）设置的粘性定位的元素的参考依据浏览器当前可视窗口。
（3）设置的粘性定位的元素仍旧实际占据位置
#学问分亨官##闪光时刻二期##闪光时刻第二期主题征文#
基本概念
HTML 是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
CSS 样式是表现。比如，标题字体、颜色变化，或为标题加入背景图片、边框等，所有这些用来改变内容外观的东西称之为表现。
JavaScript 是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单，或鼠标滑过表格的背景颜色改变，还有焦点新闻（新闻图片）的轮换。有动画的，有交互的一般都是用 JavaScript 来实现的。
2.常用标签
强调语气：<em>是斜体，<strong>是加粗
引用：<q>短文本引用，<blockquote>长文本引用
换行 <br />
水平横线 <hr />
空格
表格 <table><tbody>
加上后表格内容全部下载完才会显示
行 <tr>
列 <td>
表格表头 <th>
标题 <caption>
超链 <a>
例子：<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>
新标签打开：target="_blank"
图片 <img>，图像可以是 GIF，PNG，JPEG 格式的图像文件
例子：<img src="图片地址" alt="下载失败时的替换文本" title="提示文本">
表单 <form>
文本域 <textarea>
例子 <textarea rows="行数" cols="列数">文本</textarea>
cols 多行输入域的列数；rows 多行输入域的行数。这两个属性可用 CSS 样式的 width 和 height 来代替：col 用 width、row 用 height 来代替
输入框 <input type="text/password" name="名称" value="文本" />
当 type=”text” 时，输入框为文本输入框
当 type=”password” 时, 输入框为密码输入框
单/复选框 <input type="radio/checkbox" value="值" name="名称" checked="checked"/>
当 type=”radio” 时，控件为单选框，同一组单选框 name 命名要一致
当 type=”checkbox” 时，控件为复选框
提交按钮 <input type="submit" value="提交">
重置按钮 <input type="reset" value="重置">
下拉列表框 ` `
value <option value="提交值">选项</option>
选中 selected="selected"
多选 multiple="multiple"
标签 <label for="控件id名称">，标签的 for 属性中的值应当与相关控件的 id 属性 值一定要相同
基本知识
CSS 样式由选择符和声明组成，而声明又由属性和值组成。
选择符：又称选择器，指明网页中要应用样式规则的元素。
声明：在英文大括号{}中的的就是声明，属性和值之间用英文冒号{}分隔。当有多条声明时，中间可以英文分号;分隔。
从CSS 样式代码插入的形式来看基本可以分为以下3种：内联式、嵌入式和外部式三种。优先级遵循就近原则，一般来说，内联式 > 嵌入式 > 外部式。
内联式
例子 <p style="color:red;font-size:12px">这里文字是红色。</p>
嵌入式
外部式
例子：<link href="base.css" rel="stylesheet" type="text/css" />
CSS 选择器
常见的类选择器类型有如下几种：
标签选择器，.标签选择器名称{css样式代码;}
类选择器，.类选器名称{css样式代码;}
ID 选择器，＃类选器名称{css样式代码;}
子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素
包含选择器，即加入空格 ,用于选择指定标签元素下的后辈元素
通用选择器，匹配html中所有标签元素，* {css样式代码;}类选择器和ID选择器都可以应用于任何元素，但 ID 选择器只能在文档中使用一次，可以使用类选择器词列表方法为一个元素同时设置多个样式，ID 选择器是不可以的。
子选择器和包含选择器区别：>作用于元素的第一代后代，空格作用于元素的所有后代。
另外还有两种选择符：
伪类选择符，允许给 HTML 不存在的标签（标签的某种状态）设置样式。常用的有 a:hover{color:red;}
分组选择符，为 HTML 中多个标签元素设置同一个样式时，可以使用分组选择符,
。例如h1,span{color:red;}
CSS 的继承、层叠和特殊性
CSS 的某些样式是具有继承性的，继承是一种规则，它允许样式不仅应用于某个特定 HTML 标签元素，而且应用于其后代。
特殊性：不同选择器具有不同权值，标签的权值为 1，类选择符的权值为 10，ID选择符的权值最高为 100。
层叠 就是在 HTML 文件中对于同一个元素可以有多个 CSS 样式存在，当有相同权重的样式存在时，会根据这些 CSS 样式的前后顺序来决定，处于最后面的 CSS 样式会被应用。
CSS 格式化排版
文字排版
字体，body{font-family:"Microsoft Yahei";}
字号、颜色，body{font-size:12px;color:#666}
粗体，body{font-weight:bold;}
斜体，body{font-style:italic;}
下划线，body{font-style:italic;}
删除线，body{text-decoration:line-through;}
段落排版
缩进，p{text-indent:2em;}
行间距（行高），p{line-height:1.5em;}
中文字间距、字母间距，letter-spacing:50px;和word-spacing:50px;
对齐，div{text-align:center;}
CSS 盒模型
元素分类
在 CSS 中，HTML 中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。
常用的块状元素有：
块级元素特点：
每个块级元素都从新的一行开始，并且其后的元素也另起一行。
元素的高度、宽度、行高以及顶和底边距都可设置。
元素宽度在不设置的情况下，是它本身父容器的 100%（和父元素的宽度一致），除非设定一个宽度。
设置 display:block就是将元素显示为块级元素，从而使元素具有块状元素特点。
注：img 标签与 div 层之间会有空隙的解决方法是：使用 display:block 就可以消除间隙。
常用的内联元素有：
内联元素特点：
和其他元素都在一行上；
元素的高度、宽度及顶部和底部边距不可设置；
元素的宽度就是它包含的文字或图片的宽度，不可改变。
块状元素也可以通过代码 display:inline将元素设置为内联元素。
常用的内联块状元素有：
inline-block 元素特点：
和其他元素都在一行上；
元素的高度、宽度、行高以及顶和底边距都可设置。
内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码 display:inline-block就是将元素设置为内联块状元素。
盒模型
边框
盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。
单独设置下边框的例子 div{border-bottom:1px solid red;}
宽度和高度
CSS 内定义的宽（width）和高（height），指的是 填充以里的内容范围。一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。
W3C 的标准 Box Model:
所以有时会设置 box-sizing: border-box;来避免计算内部元素大小
填充(padding)
元素内容与边框之间是可以设置距离的，称之为“填充”。填充也可分为上、右、下、左(顺时针)。
例子：
边界(margin)
元素与其它元素之间的距离可以使用边界（margin）来设置，顺序和填充一样是上，右，下，左。padding 在边框里，margin 在边框外。
CSS 布局模型
CSS 包含 3 种基本的布局模型，用英文概括为：Flow、Layer 和 Float。 在网页中，元素有三种布局模型：
流动模型（Flow）
浮动模型 (Float)
层模型（Layer）
流动模型
流动模型，流动（Flow）是默认的网页布局模式。
流动布局模型具有2个比较典型的特征：
块状元素 都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为 100%。实际上，块状元素都会以行的形式占据位置。
在流动模型下，内联元素 都会在所处的包含元素内从左到右水平分布显示。
浮动模型
任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动。例子：#div1{float:left;}
层模型
CSS 定义了一组定位（positioning）属性来支持层布局模型。
层模型有三种形式：
绝对定位(position: absolute)
相对定位(position: relative)
固定定位(position: fixed)
绝对定位(position: absolute)
如果想为元素设置层模型中的绝对定位，需要设置 position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用 left、right、top、bottom 属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于 body 元素，即相对于浏览器窗口。
相对定位(position: relative)
如果想为元素设置层模型中的相对定位，需要设置 position:relative（表示相对定位），它通过 left、right、top、bottom 属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按 static(float) 方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。
简单来说，就是相对元素原来的位置进行移动，元素本身所占的位置会保留。
固定定位(position: fixed)
设置 position:fixed;。fixed：表示固定定位，与 absolute 定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与 background-attachment:fixed; 属性功能相同。
Relative 与 Absolute 组合使用,必须遵守下面规范：
参照定位的元素必须是相对定位元素的前辈元素
参照定位的元素必须加入 position:relative;
定位元素加入 position:absolute，便可以使用 top、bottom、left、right 来进行偏移定位了
例子(HTML 和 CSS 代码分别为)：
颜色和长度
设置颜色的方法也有很多种：
英文命令颜色，p{color:red;}
RGB颜色，p{color:rgb(133,45,200);} 和 p{color:rgb(20%,33%,25%);}
十六进制颜色， 这种颜色设置方法是现在比较普遍使用的方法，其原理其实也是 RGB 设置，但是其每一项的值由 0-255 变成了十六进制 00-ff。p{color:#00ffff;}(当你设置的颜色是 16 进制的色彩值时，如果每两位的值相同，可以缩写一半，#0ff)RGB 配色表参考 RGB颜色对照表 - 在线工具 - 开源中国 或者 RGB 配色表长度单位总结一下，目前比较常用到px（像素）、em、% 百分比，要注意其实这三种单位都是相对单位。
像素
em，就是本元素给定字体的 font-size 值
% 百分比
设置小技巧
水平居中设置
行内元素。如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center来实现的。
定宽块状元素(块状元素的宽度 width 为固定值)。满足定宽和块状两个条件的元素是可以通过设置“左右 margin”值为 auto 来实现居中的。
不定宽块状元素。
加入 table 标签(包括 <tbody>、<tr>、<td>)，为这个 table 设置“左右 margin 居中”
设置 display: inline方法：与第一种类似，显示类型设为 行内元素，然后使用 text-align:center来实现居中效果，进行不定宽元素的属性设置。
给父元素设置 float 和 position:relative; left:50%，子元素设置 position:relative 和left: -50% 来实现水平居中。
垂直居中设置
父元素高度确定的单行文本。通过设置父元素的 height 和 line-height 高度一致来实现的。(height: 该元素的高度；line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的 基线间的距离 )。
父元素高度确定的多行文本。使用插入 table (包括 tbody、tr、td)标签，同时设置 vertical-align：middle。
另外，为元素设置以下两个属性之一会隐形改变 display 类型，元素的display显示类型就会自动变为以display:inline-block（块状元素）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。
position: absolute
float: left 或 float:right
*请认真填写需求信息，我们会在24小时内与您取得联系。
