前端进阶：CSS与JS基石，面试必备知识点-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44941425/article/details/127422570

前端学习总结及面试题汇总

一、基础知识

基础知识这里主要分两大块，一块是css基础，另一块是js基础。

1、css基础

（1）css是什么

CSS是层叠样式表（Cascading Style Sheet ）的简称。是一种标记语言，用于设置页面的外观样式，实现结构与样式分离，便于开发维护。

（2）css选择器

css选择器有很多种，主要分两大类；一类是基础选择器，另一类是复合选择器。

基础选择器： 标签选择器、类选择器、通配符选择器；

复合选择器： 后代选择器、子选择器、并集选择器、伪类选择器；

（3）盒子模型

标准盒模型： 盒子的总宽度 = 设置的内容宽 + padding + border + margin

怪异盒模型（IE盒模型）： 内容的宽度 = 设置的宽度 - padding - border

（4）浮动（float）

属性值 float：none(没有) left(左浮动) right(右浮动)；

特点：
1、脱离标准流，不占位置（自己原来的位置漏给后面的标流）。
2、浮动的元素一排显示，如果父亲装不下了，默认另起一行显示。浮动的元素之间默认无缝隙。
3、任何元素都可以添加浮动，无论它是块元素还是行内元素，浮动后可以直接设置宽高，默认类似于行内块特性，不需要display转换。

（5）定位（position）

将盒子定在某一个位置，所以定位是在摆盒子，按照定位的方式移动盒子
定位=定位模式+边偏移

属性值 position: static(默认) relative(相对定位) absolute(绝对定位) fixed(固定定位)

特点： 行内元素加绝对或者固定定位，可直接设置高度和宽度，块级元素加绝对或固定定位，如果不给宽高，默认大小是内容的大小，浮动元素不会压住标准流的文字，绝对定位会压住所有内容。

（6）弹性盒子（flex box）

弹性盒子是 CSS3 的一种新的布局模式。 CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

在父盒设置display：flex后，子盒会在一行显示，当子盒的width大于父盒的width时，子盒会被压缩，然后平均摆放子盒。

属性
justify-content：‘flex-start’ (从左至右排列)、‘flex-end’ (从右往左排列)、‘center’ (居中排列)、‘space-between’ (两端对齐平均排列)、‘space-around’ (水平平均排列)

flex-wrap： ‘norwrap’ (单行)、‘wrap’ (换行)、‘wrap-reverse’ (翻转wrap)

align-content： ‘center’ (垂直居中)、‘flex-ent’ (底部排列)、 ‘flex-start’ (顶部排列)、‘space-around’ (容器内平均分布)、‘space-between’ (上下端对齐排列)

（7）BFC块级格式化上下文

块级格式化上下文指的是块级元素参与构建的、遵循一定规则的独立环境。

形成条件：
根元素 <HTML> float属性不为none；

position为absolute、fixed、sticky;

display为inline-block、table-cell;

display: flow-root 或者flow-root list-item;

overflow为hidden、scroll、auto;

BFC一般用来清除浮动，阻止父子外边距合并或阻止块级元素与浮动元素的覆盖

2、js基础知识

（1）作用域

全局作用域：

var a = 0;
if (true) {
  var b = 1;
}
console.log(b); // 输出1

像这样在全局中定义 a 变量，为全局变量，在任何地方都能访问到这个 a 变量。
因为js中没有块级作用域，所以在 if 或是 for 这样逻辑语句中定义的变量都是可以被外界访问到的。

局部作用域：

function fn () {
  var c = 2;
}

console.log(c); // 报错，c变量未定义

局部作用域中定义的变量，只供局部作用域调用，外界无法访问。

作用域链：

var a = 0;

function fn () {
  var b = 1;
  console.log(a); // 输出 1
}

// 全局作用域并不能访问 fn 函数中定义的 b 变量
console.log(b); // 报错

fn();

Function对象有一个仅供 JavaScript 引擎存取的内部属性。
这个属性就是[[Scope]]。[[Scope]]包含了一个函数被创建的作用域中对象的集合。这个集合被称为函数的作用域链，它决定了哪些数据能被函数访问。

关于作用域链，局部作用域可以访问到全局作用域中的变量和方法，而全局作用域不能访问局部作用域的变量和方法。

（2）this绑定方式

（3）call、apply、bind

（4）闭包

（5）执行上下文和执行栈

（6）Promise

（7）async、await

（8）深、浅拷贝

由于时间关系，后面这一块我先只列一个大纲，等之后有时间我会陆陆续续补齐。