前端学习知识点补充

Posted 2022-01-08 十九万里

文章是对之前学习的一些前端基础空白部分的补充 所以不是完整的知识体系

1 html|CSS HTML5、CSS3

1、实体字符

   空格
&lt;    < 小于号
&gt;     >大于号
&amp;    &
&yen;    ￥
&copy;   ©
&times;   乘号
&divide;   除号

全局属性： 任何一个标签都有的属性
html全局属性：name title id class style lang

外边距的大小不影响盒子的大小

2、margin塌陷

只有块元素才会发生 第一个子元素的上外边距会塌陷到父元素上 最后一个子元素的下外边距会塌陷到父元素上
解决：

1 给父元素设置内边距 只要内边距不为0
2给父元素设置边框 设置边框宽度不为0
3给父元素设置css属性 overflow：hidden

3、 margin合并：

margin合并只有块元素才会发生
上面兄弟元素的下外边距与下面兄弟元素的上外边距合并

垂直相邻margin值计算方法如下：
a、全部都为正值，取最大者；
b、不全是正值，则都取绝对值，然后用正值减去最大值；
c、没有正值，则都取绝对值，然后用0减去最大值。
解决方案：
外层元素 overflow:hidden;
外层元素加【padding】 代替。宽度等于外边距值padding-bottom:50px;（有时候不合适）
内层元素加【绝对定位】 postion:absolute;（缺点：改变了位置）
内层元素加【float:left;】或【display:inline-block;】（缺点：改变了位置）
内层元素加【padding】。宽度等于外边距值padding-top:50px;（有时候不合适）
内层元素加【透明边框】 代替。边框宽度等于外边距值 border-top:50px solid transparent;（缺点：如果有背景颜色，看起来就像改变了大小）

4、html5新增

页面结构： header footer nav section article aside
状态标签： meter 静态度量 progress 动态进度
列表标签：datelist:搜索框提示信息 details 关键字描述

5 css3

位移 translate：

translateX() 设置水平位移
translateY() 设置垂直位移
translate() 同时设置水平垂直位移，需要两个值，如果只有一个值只设置水平位移
1.需要一个纯数字表示缩放的倍数，比1大是放大，比1小是缩放，可以设置负值。
2.可以使用百分比， 50%相当于0.5。

缩放scale（）：

scaleX() 设置水平方向缩放
scaleY() 设置垂直方向缩放
scale() 同时设置水平和垂直方向缩放；如果只有一个值同时设置两个方向缩放
1.需要一个纯数字表示缩放的倍数，比1大是放大，比1小是缩放，可以设置负值。
2.可以使用百分比， 50%相当于0.5。

旋转rotate方法：

rotate() 设置旋转的角度
1.使用角度设置旋转方向，角度的单位是deg
2.使用正值角度，顺时针旋转；使用负值角度，逆时针旋转。

3D变化：

3D位移：translateZ() 沿Z轴位移
translate3D() 同时设置x、y、z轴的位移距离，必须设置3个值否则无效
3D缩放：scale3D() 同时设置x、y、z轴缩放，必须设置3个值否则无效
scaleZ() 沿Z轴缩放，无效果
3D旋转：rotateX() 沿x轴旋转
rotateY() 沿y轴旋转
rotateZ() 沿z轴旋转，等同于2D旋转
rotate3D() 同时设置沿多个值旋转，需要设置4个值，前三个都是0或1，对应x轴、y轴、z轴是否旋转，最后一个值对应角度

6 过渡transition

哪些css属性可以过度：

1.属性值是长度的css属性，如width、height、margin、padding、lin-height等
2.属性值是颜色的css属性，如background-color、color、border-color等
3.变换transform
4.属性值是纯数字的css属性，如opacity、z-index等

7动画animation

关键帧：@keyframes

8 flex布局详解

设置主轴方向

**主轴：**伸缩项目会沿着主轴进行排列和分布，默认主轴是水平的
侧轴：与主轴垂直的就是侧轴
修改主轴方向，侧轴也会改变，侧轴永远与主轴保持垂直
使用css属性flex-direction可以设置主轴方向，属性值如下：
row 主轴方向水平从左到右，默认值
row-reverse 主轴方向水平从右到左
column 主轴方向垂直从上到下
column-reverse 主轴方向垂直从下到上

设置换行方式： flex-wrap：

nowrap 不换行，默认值
wrap 自动换行
wrap-reverse 自动换行并进行翻转

设置伸缩项目在主轴上的对齐方式：justify-content

flex-start 靠着主轴起始方向。默认值
flex-end 靠着主轴结束方向
center 居中
space-between 两端对齐，两端没有间距，中间有间距
space-around 两端间距是中间间距的一半
space-evenly 两端间距和中间间距一致

设置侧轴对齐： 一条（align-items）；多条（align-content）

一条：
stretch 在侧轴方向拉伸，如果伸缩项目没有设置高度
flex-start 侧轴起始方向
flex-end 侧轴结束方向
center 居中
baseline 文字基线对齐（不常用）
多条：
stretch 在侧轴方向拉伸，如果伸缩项目没有设置高度,默认值
flex-start 侧轴起始方向
flex-end 侧轴结束方向
center 居中
space-between 两端对齐，两端没有间距，中间有间距
space-around 两端间距是中间间距的一半
space-evenly 两端间距和中间间距一致

让元素水平垂直居中的方法：
1.给父元素添加display：flex
2.子元素添加margin：auto

9、背景属性

background-origin 设置背景图原点：（好像是左上角的点）

padding-box    默认值，默认原点在内边距上
content-box    原点在内容上
border-box     原点在边框上

background-clip（背景图像裁切）：设置背景图片在那个区域显示被裁减

padding-box 内边距以外的背景图像被裁切
content-box 内容以外的背景图像被裁切
border-box 默认值，边框以外的背景图像被裁切
text 文字以外的背景图像被裁切，需要加-webkit-私有前缀
-webkit-background-clip:text;

background-size 图片尺寸：规则

1.设置两个长度，分别表示图像的宽和高
2.如果使用百分比设置长度，分别参照所在元素的宽和高
3.如果只设置一个长度，被认为设置了背景图像的宽度，高度根据比例自动计算
4.可以设置关键字contain，保持图像原比例，优先让图像全部显示在元素上
5.可以设置关键字cover，保持图像原比例，优先元素上被填充满图像，图像可能显示不完整（推荐）

2 js部分

几种常见的调用方式：

es5中 this的指向，得看函数调用位置的调用形式
fn（）：普通函数 this指向window
obj.fn():隐式调用 this指向obj
fn.call(obj):显示调用 提示指向 obj
new fn(); 构造函数调用 this指向0构造出来的实例

1形参和实参

形参：什么函数时所设置的参数 形参本质上就是一个没有赋值的变量
实参：调用函数时所设置的参数,实参的形式可以是变量 直接量 表达式
注意：.实参数量应与形参数量一致
2.如果实参数量大于形参数量，多余的实参无法在函数中被使用
3.如果实参数量小于形参数量，后面的形参会无法被赋值，自动得到undefined

2 匿名函数（直接变量）

匿名函数就是没有名字的函数 就是函数直接量
匿名函数主要用于立即执行函数和回调函数

//函数的直接量
(function()
    console.log('啊，我是匿名函数');
);
//表达式形式 把匿名函数（函数直接量）赋值给变量fn
var fn=function()
    

3自调用函数（IIFE立即执行函数）

1.自调用函数也叫立即执行的函数，函数声明完立即被调用，只被调用一次
2 自调用函数作用是为了形成一个作用域 避免全局变量污染

// 匿名 立即执行的函数，自调用函数
(function()
    console.log('我是第一个');
)();

//有名的函数 立即执行
(function fn()
    console.log('我是第二个');
)();

注意：；两个连续的自调用函数 之间必须加分号 告诉浏览器时不同的函数，否则会有语法错误 或者在后面的自调用函数签加！ 等于没有作用的一元运算符

3回调函数 递归函数

三个特点：函数是我定义的 ；没有直接调用改函数；函数执行了

递归函数成功的条件：
必须有一个明显的结束条件。随着递归次数的增加应该越来越趋近于结束递归
缺点：

1）函数递归调用很容易发生灾难（内存泄漏）而调用失败。
2）函数递归调用效率不高，能不用就不用。

4构造函数和实例化

什么是构造函数：

构造函数咸蛋与其他语言中的class类
构造函数用于构造对象
构造函数等价与数据类型 数据类型相同的对象 构造函数也相同

构造函数和对象的关系：

构造函数是对象的抽象（描述） 对象是构造函数的实例
一个构造函数可以创建无数个对象 一个对象只有一个构造函数

实例化：
new 构造函数（）；
new 构造函数 没有参数可以省略小括号

使用关键字new 根据构造函数创建对象的过程 这就是实例化
每次实例化就有相当于创建一个新的对象
[]等价与new array[] 等价与 new onject()

5 js内置对象

this是系统定义好的变量 值是提前设定好的
window是浏览器js中的全局对象
所有的全局变量本质上是window的属性或方法
使用window的属性和方法可以省略window

Boolean
Number
String
Math
Data 需要的时候可以直接实例化
Array
Function

6 BOM 鼠标文档事件

BOM 是浏览器为js提供的能对浏览器进行相操作的api 浏览器对象模型
window对象属性和方法总结：

window.name 窗口名字,可读可写
window.length 子窗口的数量，只读
window.innerWidth 视口宽度，只读
window.innerHeight 视口高度，只读
window.location 获取location对象
window.history 获取history对象
window.navigator 获取navigator对象
window.screen 获取screen对象
window.document 获取document对象
window.open() 打开新窗口
window.close() 关闭本窗口
window.print() 调用打印机
window.alert() 警告框
window.confirm() 确认框
window.prompt() 输入框
window.scrollTo() 滚动到目标位置
window.scrollBy() 滚动多少距离
window.setInterval() 创建一个多次定时器
window.clearInterval() 清除一个多次定时器
window.setTimeout() 创建一个单次定时器
window.clearTimeout() 清除一个单次定时器

7 DOM

创建元素节点：

document.createElement('标签名’)；

添加子节点
父元素对象.appendChild（‘新节点’） 在最后面添加
父元素对象.insertBefore（新节点，旧节点）；
删除子节点： 父.removeChild('要被删除的节点’)

8 document键盘鼠标

document对象的一些方法

document.documentElement         获取html元素
document.body                    获取body元素
document.head                    获取head元素
document.all                     获取文档中所有的元素组成的集合
document.URL                     获取当前页面的URL地址
document.domain                  获取页面URL中的主机名
document.referrer                获取上一个历史记录的地址     
document.lastModified            获取文档最后一次修改时间     
document.title                   读写页面标题内容             

document.write()                     
document.getElementById()
document.getElementByTagName()
document.getElementByClassName()
document.getElementsByName()
document.querySelector()
document.querySelectorAll()
document.createElement()

鼠标事件：

click 点击
dbclick  双击
contextmenu 右击
获取鼠标光标在视口中的位置
event.clientX;
event.clientY;

键盘事件：

keydown  键盘按下
keyup 键盘抬起
keypress  键盘按下，只有可输入按键（字母，标点）才能触发 组合按键只会触发一次

文档事件：

load 文档加载完毕
DOMContentloaded 文档加载完毕
beforeunload 文档关闭之前

哪些元素可以监听事件
window
body
img元素可以监听load事件

load事件与DOMContentLoaded事件

DOMContentloaded只有等到页面中元素加载完毕后可以触发事件 load事件需要等待页面中一切加载完毕，包括对外部文件，才能触发事件
DOMContentload只能使用addEventListener（）方法监听

其他事件：

scroll 里面的内容滚动事件，监听给window或者里面内容可以滚动的元素
resize 视口大小发生变化就触发 ，监听给window

阻止事件冒泡：

w3c event.stopPropagation( )
IE则是使用e.cancelBubble = true

阻止浏览器默认行为

event.preventDefault();

两种节点区别

HTMLCollection集合的成员必须都是元素对象。没有foreach方法 是一个动态的集合 集合的成员能够自动实时更新
NodeList集合的成员可以是节点就可以 包括元素 有foeEach方法 是一个静态的集合 集合无法自动更新

9 执行栈相关的概念

1 执行栈
在主线程中，所有的任务（不论是同步任务还是异步任务，都在执行栈里面执行）
2 异步任务管理模块
包括定时器管理模块，DOM事件管理模块，ajax管理模块，负责监听异步任务（回调函数），是否满足执行条件
3 回调函数
满足执行条件的异步任务会进入回调队列，等待执行
队列特点：先进先出 后进后出
4 事件轮询模块（event loop）
负责监听执行栈是否空闲，一旦空闲，从回调队列中将异步任务依次被执行栈执行

10 js实现多线程

1 利用worker js中可以实现多线程运行
2 多线程运算适合 耗时的运算 在子线程中计算不影响主线程
3 子线程中无法使用BOM DOM
worker 构造函数
worker.prototype.postMessage() 向子线程发送数据
worker.prototype.onmessage 事件 监听子线程发回数据

3 Bootstrap的使用

栅格系统
响应式的版心

默认                 宽度 100%   居中
min-width：768px        750px
min-width：992px        970px
min-width：1200px       1200px;

原理：把父元素分成12份 水平排列的子元素 指定占多少列即可
如果子元素宽度加起来超过12 自动换行 其中的每一列可以继续分