一些小总结

markdown的快捷键

快捷键

• 加粗 Ctrl + B
• 斜体 Ctrl + I
• 引用 Ctrl + Q
• 插入链接 Ctrl + L
• 插入代码 Ctrl + K
• 插入图片 Ctrl + G
• 提升标题 Ctrl + H
• 有序列表 Ctrl + O
• 无序列表 Ctrl + U
• 横线 Ctrl + R
• 撤销 Ctrl + Z
• 重做 Ctrl + Y

一些网站

关于自学

名称	网址
潭州课堂	https://www.shiguangkey.com/
极客学院	https://www.jikexueyuan.com/
慕课网	https://www.imooc.com/
网易云课堂	https://study.163.com/

技术在线

框架	网址
Exxpress	http://www.expressjs.com.cn/
Bootstrap	http://www.bootcss.com/
MUI	http://dev.dcloud.net.cn/mui/
vue	https://cn.vuejs.org/

插件	网址
滑动插件	https://www.swiper.com.cn/
全屏滚动	https://alvarotrigo.com/fullPage/zh/
滚动插件	http://caibaojian.com/iscroll-5/

关于用git创建远程仓库的步骤

简易的命令入门教程

Git全局设置：

git config --global user.name  "your name"
git config --global user.email "your email"

创建git仓库

mkdir 仓库的名字
cd 仓库的名字
git init
touch README.md
git add README.md
git commit -m "first commit"
git remote add origin http://gitee.com/...
git push -u origin master

已有仓库

cd existing_git_repo
git remote add origin https://gitee.com/...
git push -u origin master

代码片段

PC端代码

1.设置盒子占据全屏高度

.box {
    position: absolute;
    top: 0;
    bottom: 0;
}

1.给盒子设置任意定位属性
2.设置上下偏移量都为0

2.JS原型的元素或者文本添加

1.创建一个元素节点；
2.给创建的元素添加属性；
3.创建文本节点；
4.将文本节点添加到元素节点中；
5.钾元素节点插入文档。

let div = document.createElement("div);
div.setAttribute("class","className");
let textNode = document.createTextNode("需要添加的文本");
div.appendChild(textNode);
Parent.appendChild(div);

注意：setAttribute一次只能设置一条属性

使用es5的语法创建常量

// 把变量挂到window上
Object.defineProperty(Window, "PI", {
	// 给常量赋值
	value: 3.1415926,
	// 设置为只读，就是不能更改
	writable: false
})

面试中的基础知识

CSS

1.display: none和visibility: hidden的区别

• display: none 隐藏对应的元素，而且不保留原来的空间
• visibility: none 隐藏对应的元素，但是会保留原来的空间

2.link和@import的区别

• link属于HTML的标签，而@import是CSS提供的
• link会跟页面同时加载，而@import引用的CSS只在页面加载完成后才加载
• @import只在IE5以上的浏览器才被识别，但是link不存在兼容问题
• link方式的权重高于@import

3.position的absolute与fixed的共同点和不同点

• 共同点
  • 改变行内元素的显示方式为块级(block)
  • 让元素脱离标准流，不占据空间
  • 默认会覆盖非定位元素
• 不同点
  • 绝对定位(absolute)需要参考父级元素的设置方式
  • 固定定位(fixed)只参考浏览器窗口

4.介绍盒模型

• IE盒子模型：内容部分(content)包含了边框(border)和内边距(padding)
• 标准盒模型：内容(content)，填充(padding)，边界(margin)，边框(border)
  

5.css选择器

• id选择器 (#myid)
• 类选择器 (.myclassname)
• 标签选择器 (mytag)
• 兄弟选择器 (mytag1+mytag2)
• 子代选择器 (mytag1 > mytag2)
• 后代选择器 (mytag1 mytag2)
• 通配符选择器 (*)
• 属性选择器 (input[type=text])
• 伪类选择器 (a:hover)
  • 控制表单控件的禁用状态 :enable / :disabled
  • 单选框或复选框被选中 :checked

6.属性的继承和优先级算法

• 属性的继承
  • 不可继承的样式 border,padding,margin,width,height
  • 可继承的样式 font-size,font-family,color,text-indent
• 优先级计算
  • !import > 行内样式 > id > class > tag > * > 继承
  • 就近原则，同权重情况会覆盖属性

7.display和position

• display
  • block：块级元素，能设置宽高，占据自身的空间
  • inline：行内元素，不能设置宽高，占据整行
  • inline-block：行内块元素，能设置宽高，占据整行空间
• position
  • absolute：绝对定位，对其最近的一个定位的父级元素进行定位，脱标不占位
  • fixed：固定定位，相对于浏览器的窗口进行定位，脱标不占位
  • relative：相对定位，相对于自身进行定位，脱标占位
  • static：标准流

8.H5C3

• 圆角：border-radius
• 阴影
  • 盒子阴影：box-shadow
  • 文字阴影：text-shadow
• 线性渐变：gradient
• 旋转：transform
  • 角度：rotate
  • 移动：translate
  • 缩放：scale
• 过渡：transition

HTML

1.什么是FOUC？你如何避免FOUC

​ FOUC - Flash Of Unstyle Content 指的是无样式内容闪烁

引用CSS文件的@import就是造成这个问题的主要原因：浏览器会先加载整个页面的dom，然后再去导入外部的css文件。因此，在页面dom加载完成到css引入完成中间会有一段时间页面上是没有内容的。这段时间跟网速、电脑的速度有关

​ 解决方法：在标签中间插入一个或者

JS

1.js深拷贝

1、使用递归的方式实现深拷贝

// 使用递归的方式实现数组或者对象的深拷贝
function deepClone(){
	// 判断深拷贝的的数组还是对象
	var objClone = Array.isArray(obj) ? [] : {};
	// 进行深拷贝的不能为空，并且是对象或者是数组
	if(obj && typeof obj === "object") {
		for (key in obj) {
			if (obj.hasOwnProperty(key)) {
				if (obj[key] && typeof obj[key] === "object") {
					objClone[key] = deepClone(obj[key]);
				} else {
					objClone[key] = obj[key];
				}
			}
		}
	}
	return objClone;
}

2、通过JSON对象来拷贝

function deepClone(){
	var _obj = JSON.stringify(obj),
	objClone = JSON.parse(_obj);
	return objClone
}

3、通过jquert的方法进行深拷贝

var array = [1,2,3,4];
var newArray = $.extend(true, [], array);