//页面导入样式时，使用link和@import有什么区别？
本质上，这两种方式都是为了加载CSS文件，但还是存在着细微的差别
1 老祖宗的差别。link属于XHTML标签，而@import完全是CSS提供的一种方式。
link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。
2 加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显.
3 兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
4 使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
//常见浏览器内核:
内核
Trident：IE 浏览器内核；
Gecko：Firefox 浏览器内核；
Presto：Opera 浏览器内核；
Webkit：Safari 浏览器内核；
Blink：谷歌浏览器内核，属于 Webkit 的一个分支，与 Opera 一起在研发；
浏览器
IE：Trident，IE 内核；
Chrome：以前是 Webkit，现在是 Blink 内核；
Firefox：Gecko 内核；
Safari：Webkit 内核；
Opera：一起是 Presto，现在是 Blink 内核；
360、猎豹浏览器内核：IE + Blink 双内核；
搜狗、遨游、QQ 浏览器内核：Trident（兼容模式）+ Webkit（高速模式）；
百度浏览器、世界之窗内核：IE 内核；
2345 浏览器：以前是 IE 内核，现在是 IE + Blink 双内核；
UC 浏览器内核：Webkit + Trident；
//浏览器的渲染原理
首先解析收到的文档，根据文档定义构建一颗 DOM 树，DOM 树是由 DOM 元素及属性节点组成的；
然后对 CSS 进行解析，生成 CSSOM 规则树；
根据 DOM 树和 CSSOM 规则树构建 Render Tree。渲染树的节点被称为渲染对象，渲染对象是一个包含有颜色和大小等属性的矩形，渲染对象和 DOM 对象相对应，但这种对应关系不是一对一的，不可见的 DOM 元素不会被插入渲染树。
当渲染对象被创建并添加到树中，它们并没有位置和大小，所以当浏览器生成渲染树以后，就会根据渲染树来进行布局（也可以叫做回流）。这一阶段浏览器要做的事情就是要弄清楚各个节点在页面中的确切位置和大小。通常这一行为也被称为“自动重排”。
布局阶段结束后是绘制阶段，比那里渲染树并调用对象的 paint 方法将它们的内容显示在屏幕上，绘制使用 UI 基础组件。
为了更好的用户体验，渲染引擎会尽可能早的将内容呈现到屏幕上，并不会等到所有的 html 解析完成之后再去构建和布局 render tree。它是解析完一部分内容就显示一部分内容，同时可能还在网络下载其余内容。
//HTML5 的 form 的自动完成功能是什么？也就是表单中的自动完成功能！
autocomplete 属性规定输入字段是否应该启用自动完成功能，默认为启用，设置为 autocomplete=off 可以关闭该功能。
自动完成允许浏览器预测对字段的输入。在用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。
//Promise构造函数是同步执行还是异步执行，那么 then 方法呢？
promise构造函数是同步执行的，即创建之后就立即执行的，then方法是异步执行的
promise有几种状态，什么时候会进入catch？
三个状态：
pending、fulfilled、reject
两个过程：
padding -> fulfilled、padding -> rejected当pending为rejectd时，会进入catch
//14、Promise 中reject 和 catch 处理上有什么区别
reject 是用来抛出异常，catch 是用来处理异常
reject 是 Promise 的方法，而 catch 是 Promise 实例的方法
reject后的东西，一定会进入then中的第二个回调，如果then中没有写第二个回调，则进入catch
网络异常（比如断网），会直接进入catch而不会进入then的第二个回调
//11、使用结构赋值，实现两个变量的值的交换
let a = 1;let b = 2;
[a,b] = [b,a];
//13、下面Set结构，打印出的size值是多少
let s = newSet();
s.add([1]);s.add([1]);
console.log(s.size);
答案：2
两个数组[1]并不是同一个值，它们分别定义的数组，在内存中分别对应着不同的存储地址，因此并不是相同的值都能存储到Set结构中，所以size为2。
// 16、如何使用Set去重
let arr = [12,43,23,43,68,12];
let item = [...new Set(arr)];
console.log(item);//[12, 43, 23, 68]
//：1、es5和es6的区别，说一下你所知道的es6
ECMAScript5，即ES5，是ECMAScript的第五次修订，于2009年完成标准化ECMAScript6，即ES6，是ECMAScript的第六次修订，于2015年完成，也称ES2015ES6是继ES5之后的一次改进，相对于ES5更加简洁，提高了开发效率ES6新增的一些特性：
1）let声明变量和const声明常量，两个都有块级作用域ES5中是没有块级作用域的，并且var有变量提升，在let中，使用的变量一定要进行声明
2）箭头函数ES6中的函数定义不再使用关键字function()，而是利用了()=>来进行定义
3）模板字符串模板字符串是增强版的字符串，用反引号（标识，可以当作普通字符串使用，也可以用来定义多行字符串
4）解构赋值ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值
5）for of循环for...of循环可以遍历数组、Set和Map结构、某些类似数组的对象、对象，以及字符串
6）import、export导入导出ES6标准中，Js原生支持模块(module)。将JS代码分割成不同功能的小块进行模块化，将不同功能的代码分别写在不同文件中，各模块只需导出公共接口部分，然后通过模块的导入的方式可以在其他地方使用
7）set数据结构Set数据结构，类似数组。所有的数据都是唯一的，没有重复的值。它本身是一个构造函数
8）... 展开运算符可以将数组或对象里面的值展开；还可以将多个值收集为一个变量
9）修饰器 @decorator是一个函数，用来修改类甚至于是方法的行为。修饰器本质就是编译时执行的函数
10）class 类的继承ES6中不再像ES5一样使用原型链实现继承，而是引入Class这个概念11）async、await使用 async/await, 搭配promise,可以通过编写形似同步的代码来处理异步流程, 提高代码的简洁性和可读性async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成
12）promisePromise是异步编程的一种解决方案，比传统的解决方案（回调函数和事件）更合理、强大
13）SymbolSymbol是一种基本类型。Symbol 通过调用symbol函数产生，它接收一个可选的名字参数，该函数返回的symbol是唯一的
14）Proxy代理使用代理（Proxy）监听对象的操作，然后可以做一些相应事情
//如何实现浏览器内多个标签页之间的通信？
实现多个标签页之间的通信，本质上都是通过中介者模式来实现的。因为标签页之间没有办法直接通信，因此我们可以找一个中介者来让标签页和中介者进行通信，然后让这个中介者来进行消息的转发。
使用 Websocket，通信的标签页连接同一个服务器，发送消息到服务器后，服务器推送消息给所有连接的客户端；
可以地调用 localStorage，localStorage 在另一个浏览上下文里被添加、修改或删除时，它都会触发一个 storage 事件，我们可以通过监听 storage 事件，控制它的值来进行页面信息通信；
如果我们能够获得对应标签页的引用，通过 postMessage 方法也是可以实现多个标签页通信的；
//什么是 webp？
WebP 是谷歌开发的一种新图片格式，它是支持有损和无损两种压缩方式的使用直接色的点阵图。使用 webp 格式的最大优点是是，在相同质量的文件下，它拥有更小的文件体积。因此它非常适合于网络图片的传输，因为图片体积的减少，意味着请求时间的减少，这样会提高用户的体验。这是谷歌开发的一种新的图片格式。
//浏览器如何判断是否支持 webp 格式图片？
通过创建 Image 对象，将其 src 属性设置为 webp 格式的图片，然后在 onload 事件中获取图片的宽高，如果能够获取，则说明浏览器支持 webp 格式图片。如果不能获取或者触发了 onerror 函数，那么就说明浏览器不支持 webp 格式的图片。
//介绍下 BFC 及其应用:
BFC（Block Format Context）块级格式化上下文，是页面盒模型中的一种 CSS 渲染模式，相当于一个独立的容器，里面的元素和外部的元素相互不影响。
创建 BFC 的方式有：
html 根元素
float 浮动
绝对定位
overflow 不为 visible
display 为表格布局或者弹性布局；
BFC 主要的作用是：
清除浮动
防止同一 BFC 容器中的相邻元素间的外边距重叠问题
new操作符号做了什么事情：
1.当使用了构造函数，并且new 构造函数(),后台会隐式执行new Object()创建对象;
2.将构造函数的作用域给新对象，（即new Object()创建出的对象），而函数体内的this就代表new Object()出来的对象。
3.执行构造函数的代码。
4.返回新对象（后台直接返回）;
//怎么让一个 div 水平垂直 flex布局
<div class="parent">
<div class="child"></div>
</div>
<!-- 1 -->
div.parent {
display: flex;
justify-content: center;
align-items: center;
}
<!-- 2 -->
div.parent {
position: relative;
}
div.child {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<!-- 3 -->
div.parent {
display: grid;
}
div.child {
justify-self: center;
align-self: center;
}
<!-- 4 -->
div.parent {
font-size: 0;
text-align: center;
&::before {
content: "";
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
}
}
div.child {
display: inline-block;
vertical-align: middle;
}//介绍下重绘和回流（Repaint & Reflow），以及如何进行优化？
浏览器渲染机制
浏览器采用流式布局模型（Flow Based Layout）；
浏览器会把 HTML 解析成 DOM，把 CSS 解析成 CSSOM,DOM 和 CSSOM 合并就产生了渲染树（Render Tree）；
有了 RenderTree，我们就知道了所有节点的样式，然后计算他们在页面上的大小和位置，最后把节点绘制到页面上；
由于浏览器使用流式布局，对 Render Tree 的计算通常只需要遍历一次就可以完成，但 table 及其内部元素除外，他们可能需要多次计算，通常要花 3 倍于同等元素的时间，这也是为什么要避免使用 table 布局的原因之一；
重绘
由于节点的集合属性发生改变或者由于样式改变而不会影响布局的，成为重绘，例如 outline、visibility、color、background-color 等，重绘的代价是高昂的，因此浏览器必须验证 DOM 树上其他节点元素的可见性。
回流 : 代价更大的
回流是布局或者几何属性需要改变就称为回流。回流是影响浏览器性能的关键因素，因为其变化涉及到部分页面（或是整个页面）的布局更新。一个元素的回流可能会导致其素有子元素以及 DOM 中紧随其后的节点、祖先节点元素的随后的回流。大部分的回流将导致页面的重新渲染。
回流必定会发生重绘，重绘不一定会引发回流。
浏览器优化
现代浏览器大多是通过队列机制来批量更新布局，浏览器会把修改操作放在队列中，至少一个浏览器刷新（即16.6ms）才会清空队列，但当你获取布局信息的时候，队列中可能会有影响这些属性或方法返回值的操作，即使没有，浏览器也会强制清空队列，触发回流和重绘来确保返回正确的值。
例如 offsetTop、clientTop、scrollTop、getComputedStyle()、width、height、getBoundingClientRect()，应避免频繁使用这些属性，他们都会强制渲染刷新队列。
减少重绘和回流
CSS
使用 transform 代替 top；
使用 visibility 替换 display: none，前者引起重绘，后者引发回流；
避免使用 table 布局；
尽可能在 DOM 树的最末端改变 class；
避免设置多层内联样式，CSS 选择符从右往左匹配查找，避免节点层级过多；
将动画效果应用到 position 属性为 absolute 或 fixed 的元素上，避免影响其他元素的布局；
避免使用 CSS 表达式，可能会引发回流；
CSS 硬件加速；
Javascript
避免频繁操作样式，修改 class 最好；
避免频繁操作 DOM，合并多次修改为一次；
避免频繁读取会引发回流/重绘的属性，将结果缓存；
对具有复杂动画的元素使用绝对定位，使它脱离文档流；
分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景
display: none - 不占空间，不能点击，会引起回流，子元素不影响
visibility: hidden - 占据空间，不能点击，引起重绘，子元素可设置 visible 进行显示
opacity: 0 - 占据空间，可以点击，引起重绘，子元素不影响
简述 CSS 盒模型
盒子由 margin、border、padding、content 组成；
标准盒模型：box-sizing: content-box;
IE 盒模型：box-sizing: border-box;
简述 Rem 及其转换原理：
rem 是 CSS3 新增的相对长度单位，是指相对于根元素 html 的 font-size 计算值的大小。
默认根元素的 font-size 都是 16px的。如果想要设置 12px 的字体大小也就是 12px/16px = 0.75rem。
由于 px 是相对固定单位，字号大小直接被定死，无法随着浏览器进行缩放；
rem 直接相对于根元素 html，避开层级关系，移动端新型浏览器对其支持较好；
个人用 vw + 百分比布局用的比较多，可以使用 webpack 的 postcss-loader 的一个插件 postcss-px-to-viewport 实现对 px 到 vw 的自动转换，非常适合开发。
移动端视口配置：name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
initial-scale: 初始的缩放比例；
minimum-scale: 允许用户缩放到的最小比例；
maximum-scale: 允许用户缩放到的最大比例；
user-scalable: 用户是否可以手动缩放；
简述伪类和伪元素:
伪类 :
伪类用于当已有元素处于某种状态时，为其添加对应的样式，这个状态是根据用户行为变化而变化的。比如说 :hover。它只有处于 dom 树无法描述的状态才能为元素添加样式，所以称为伪类。
伪元素 ::
伪元素用于创建一些原本不在文档树中的元素，并为其添加样式，比如说 ::before。虽然用户可以看到这些内容，但是其实他不在文档树中。一共有四个存在的///
区别
/// 伪类的操作对象是文档树中已存在的元素，而伪元素是创建一个文档树外的元素。
css 规范中用双冒号 :: 表示伪元素，用一个冒号 : 表示伪类。
CSS3 新增伪类有那些？（例如 nth-child）
elem:nth-child(n): 选中父元素下的第 n 个标签名为 elem 的元素；
elem:nth-last-child(n): 作用同上，从后开始查找；
elem:last-child：最后一个子元素
elem:only-child：如果 elem 是父元素下唯一的子元素，则选中；
elem:nth-of-type(n)：选择父元素下第 n 个 elem 类型元素；
elem:empty：选中不包含子元素和内容的 elem 类型元素；
:not(elem)：选择非 elem 元素的每个元素；
:enabled：启用状态的表单组件
行内元素的margin 和 padding
水平方向：水平方向上，都有效；
垂直方向：垂直方向上，都无效；（padding-top 和 padding-bottom 会显示出效果，但是高度不会撑开，不会对周围元素有影响）
CSS 中哪些属性可以继承？
字体系列属性:
font-family:字体值
font-size：字体大小
font-weight：字体权重
font-style：字体的类型
文本系列属性:
text-indent
text-align
line-hight
word-spacing
letter-spacing
color
其他:
cursor
visibility
用纯 CSS 创建一个三角形
#demo {
width: 0;
height: 0;
border-width: 20;
border-style: "solid";
border-color: transparent transparent red transparent;
}
原理是相邻边框连接处是均分的原理。
min-width/max-width 和 min-height/max-height 属性间的覆盖规则？
1.max-width 会覆盖 width，即使 width 是行内样式或者设置了 !important。
2.min-width 会覆盖 max-width，此规则发生在 min-width 和 max-width 冲突的时候；
ES6:
第一张：let和const: https://blog.csdn.net/lizhengxv/article/details/80552081
let是不允许在同一个作用域之中重复声明同一个变量的，否则就会报错!
暂时性死区和不存在变量提升，都是为了防止在没有定义变量之前就使用变量。保证使用之前必须优先声明变量/// const声明变量的时候必须在声明的时候进行初始化操作！
const b = {
name:'zs',
age:22
}
//对象和数组元素
b.name = "lzx";
console.log(b.name+"---"+b.age);//输出lzx---22
因为Object类型是引用类型。用const声明常量保存的是对象的地址，不可变的是地址，在上面的代码中就是，不能把 b 指向另一个对象。而修改对象的属性，并不会改变对象的地址，因此用const声明对象的属性是可以修改的。const并不是保证对应申明的值不可以改变，而是保证对应的变量指向的内存的值不可以改变的。普通变量的时候实际上保存的就是变量的地址，值存储在对应的地址中的////。
同时在ES6中定义，只要是使用let、const、class声明的变量不再是属于顶层对象属性，其中也就是：
let a = 1;
window.a; //undefined的/
所以在使用的时候应该注意！
第二章：变量的解构赋值：https://www.cnblogs.com/kefeiGame/p/7988562.html
只要记得是一一对应即可，不需要太多的操作的。。。
（1）交换变量的值：
let x = 1;
let y = 2;
[x, y] = [y, x];
let a = 1;
let b = 2;
a = a ^ b;
b = a ^ b;
a = a ^ b;
console.log(a, b);
可以使用对应的性质去分析对应的过程，因为任何数与自己的异或都是0，同时任何数与0异或都是任何数本身/
（2）从函数返回多个值
函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便。
// 返回一个数组
function example() {
return [1, 2, 3];
}
let [a, b, c] = example();
// 返回一个对象
function example() {
return {
foo: 1,
bar: 2
};
}
let { foo, bar } = example();
3）函数参数的定义
解构赋值可以方便地将一组参数与变量名对应起来。
// 参数是一组有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);
// 参数是一组无次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1})
ES6中字符串拓展：而且有对应的for of迭代器遍历，可以使用其遍历
【includes()】
该方法在给定文本存在于字符串中的任意位置时会返回 true ，否则返回false
【startsWith()】
该方法在给定文本出现在字符串起始处时返回 true ，否则返回 false
【endsWith()】
该方法在给定文本出现在字符串结尾处时返回 true ，否则返回 false
//以上每个方法都接受两个参数：需要搜索的文本，以及可选的搜索起始位置索引
var msg = "Hello world!";
console.log(msg.startsWith("Hello")); // true
console.log(msg.endsWith("!")); // true
console.log(msg.includes("o")); // true
console.log(msg.startsWith("o")); // false
console.log(msg.endsWith("world!")); // true
console.log(msg.includes("x")); // false
console.log(msg.startsWith("o", 4)); // true
console.log(msg.endsWith("o", 5)); // true
console.log(msg.includes("o", 8)); // false
字符串重复：【repeat()】
console.log("x".repeat(3)); // "xxx"
console.log("hello".repeat(2)); // "hellohello"
console.log("abc".repeat(4)); // "abcabcabcabc"
字符串补全
ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全
【padStart()】：头部补全，也就是在头部开始的地方进行填充
【padEnd()】：尾部补全，也就是当前调用本字符串的方法的尾部开始填充
padStart()和padEnd()一共接受两个参数，第一个参数用来指定字符串的最小长度，第二个参数是用来补全的字符串
'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'
'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'
`sdfs `; //反引号的模板字符串。
还可以在字符串中使用${}的方式嵌入遍历的方式。
////ES6中数组的拓展：////
扩展运算符（...），用于将数组转化为逗号分隔的参数序列。
let arr = [1, 2, 34, 5, 4];
let arr1 = [...arr];
// [ 1, 2, 34, 5, 4 ]
console.log(arr1);
合并数组：
[...arr,...arr2,...arr3]
Array.from()
//用于将类数组对象、可遍历的对象转为真正的数组
复制代码
// 类数组对象
let obj = {
0: 'hello',
1: 'world',
4: 'outof bounds data',
length: 3
}
Array.from(obj); // ["hello", "world", undefined]
// 根据属性名对应到数组的index, 超过length部分舍弃。没有对应的属性，置为undefined
// Array.from()是一个很不严谨的角色，只要对象含有length属性，且值为正整数就能转，不保证转出来的东西质量是否符合要求。
数值拓展：
1.使用0b/0B表示二进制数，使用0o或者0O表示八进制数
2.Number.isFinite()//判断是否有限数值
Number.isNaN() //判断是 CSS:
1 box-sizing属性？
用来控制元素的盒子模型的解析模式，默认为content-box
context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽
border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽.
标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin
低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin
3 CSS选择器有哪些？哪些属性可以继承？
CSS选择符：id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器（ul > li）、后代选择器（li a）、通配符选择器（*）、属性选择器（a[rel=”external”]）、伪类选择器（a:hover, li:nth-child）
可继承的属性：font-size, font-family, color
不可继承的样式：border, padding, margin, width, height
优先级（就近原则）：!important > [行内样式 > id > class 和 伪类 > tag 伪元素 ]
==>> 1 0 0 0 -> 0 1 0 0 -> 0 0 1 0 -> 0 0 0 1
!important 比内联优先级高:
优先级相同的时候则使用对应的后者出现的属性进行设置！
5 CSS3新增伪类有那些?
p:first-of-type 选择属于其父元素的首个元素
p:last-of-type 选择属于其父元素的最后元素
p:only-of-type 选择属于其父元素唯一的元素
p:only-child 选择属于其父元素的唯一子元素
p:nth-child(2) 选择属于其父元素的第二个子元素
:enabled :disabled 表单控件的禁用状态。
:checked 单选框或复选框被选中。
11.什么是 BFC机制？
BFC(Block Formatting Context)，块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。
触发条件 (以下任意一条)
float的值不为none
overflow的值不为visible
display的值为table-cell、tabble-caption和inline-block之一
position的值不为static或则releative中的任何一个
在IE下, Layout,可通过zoom:1 触发
BFC布局与普通文档流布局区别:
BFC布局规则:
浮动的元素会被父级计算高度(父级元素触发了BFC)
非浮动元素不会覆盖浮动元素的位置(非浮动元素触发了BFC)
margin不会传递给父级(父级触发BFC)
属于同一个BFC的两个相邻元素上下margin会重叠
普通文档流布局: 浮动的元素是不会被父级计算高度
非浮动元素会覆盖浮动元素的位置
margin会传递给父级元素
两个相邻元素上下的margin会重叠
开发中的应用
阻止margin重叠
可以包含浮动元素 —— 清除内部浮动(清除浮动的原理是两个 div都位于同一个 BFC 区域之中)
自适应两栏布局
可以阻止元素被浮动元素覆盖
15. 用纯CSS创建一个三角形的原理是什么
之前写三角形, 都是直接记住代码,没有探究原因,我也是直到有一次面试时,面试大哥让我说说css创建三角形的原理,我就...回来就赶紧翻资料.接下来我就将当时我理解的过程列举出来:
1. 写一个我们最熟悉的 border应用
.box{
width:100px;
height:100px;
border: 3px solid;
border-color:#1b93fb #1bfb24 #efad48 #ef4848;
}
效果如下:
2. 接下来,我们将border值增大
.box{
width:100px;
height:100px;
border: 50px solid;
border-color:#1b93fb #1bfb24 #efad48 #ef4848;
}
很容易发现, border渲染并不是正方形, 而是梯形的.
3. 在增大border的基础下, 此时我们将盒子宽高变成0,会产生什么效果呢!
.box{
width:0px;
height:0px;
border: 50px solid;
border-color:#1b93fb #1bfb24 #efad48 #ef4848;
}
四个三角形拼合成的矩形呈现在我们眼前,那如如果我们只想要一个三角形, 我们是不是可以设想将其他三个设为不可见;
4. 设置透明, 隐藏其中三个三角形
.box{
width:0px;
height:0px;
border: 50px solid;
border-color:transparent transparent transparent #ef4848;
}
三角形这样就出来, 有木有很简单, 当然我们也可以采用逆向思维来写这个效果, 就是先将所有边框设为透明, 然后需要哪边再对其设置颜色, 效果是一样的
.box{
width:0px;
height:0px;
border: 50px solid transparent;
border-left:50px solid #ef4848;
}
这样给面试你的人讲,讲明白应该不是问题., 重点就是要理解border的应用
16. 实现三栏布局有哪些方法, 分别描述一下?
<div class="container">
<div class="left">1</div>
<div class="main">2</div>
<div class="right">3</div>
</div>
第一种：首先将中间的使用margin:0 Xpx;的方式完成水平居中，然后将父级元素设置为position：relative的值，然后将左右两边的元素分别设置为绝对定位即可。
<style>
.container {
position: relative;
background: #eee;
height: 200px;
}
.main {
height: 200px;
margin: 0 120px;
background-color: yellow;
}
.left {
position: absolute;
width: 100px;
height: 200px;
left: 0;
top: 0;
background-color: red;
}
.right {
position: absolute;
width: 100px;
height: 200px;
background-color: green;
right: 0;
top: 0;
}
</style>
Flex 布局
<style>
.container{
display:flex;
justify-content: center;
height: 200px;
background: #eee;
}
.left {
width: 200px;
background-color: red;
height: 100%;
}
.main {
background-color: yellow;
flex: 1;
}
.right {
width: 200px;
background-color: green;
}
</style>
<div class="container">
<div class="left">1</div>
<div class="main">2</div>
<div class="right">3</div>
</div>
//三者都设置为浮动元素，因为浮动元素本身的性质，其会按照对应的位置依次往左进行布局。所以对应的只需要三个浮动即可！
<style>
.container {
margin-left: 120px;
margin-right: 220px;
}
.main {
float: left;
width: 100%;
height: 300px;
background-color: yellow;
}
.left {
float: left;
width: 100px;
height: 300px;
margin-left: -100%;
position: relative;
left: -120px;
background-color: blue;
}
.right {
float: left;
width: 200px;
height: 300px;
margin-left: -200px;
position: relative;
right: -220px;
background-color: green;
}
</style>
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
19. 开发中为什么要初始化css样式
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
18. link 与 @import 的区别
a.从属关系区别
@import是 CSS 提供的语法规则，只有导入样式表的作用；
link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等
b.加载顺序区别
加载页面时，link标签引入的 CSS 被同时加载；
@import引入的 CSS 将在页面加载完毕后被加载。
c.兼容性区别
@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；
link标签作为 HTML 元素，不存在兼容性问题。
d.DOM可控性区别
可以通过 JS 操作 DOM ，插入link标签来改变样式；
由于DOM方法是基于文档的，无法使用@import的方式插入样式。
19. 开发中为什么要初始化css样式
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
17. css3实现0.5px的细线
<style>
.line {
position: relative;
}
.line:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 1px;
background-color: #000000;
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
}
</style>
<div class="line"></div>
23. ::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用
单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。
::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。
:before 和 :after 这两个伪元素，是在CSS2.1里新出现的。
起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before ::after
20. CSS优化、提高性能的方法有哪些
尽量将样式写在单独的css文件里面，在head元素中引用 将代码写成单独的css文件有几点好处：
内容和样式分离，易于管理和维护
减少页面体积
css文件可以被缓存、重用，维护成本降低
不使用@import
避免使用复杂的选择器，层级越少越好 建议选择器的嵌套最好不要超过三层，比如：
精简页面的样式文件，去掉不用的样式
利用CSS继承减少代码量
避免！important，可以选择其他选择器
21. 什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？
响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。
基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。
页面头部必须有meta声明的viewport。
<meta name="’viewport’" content="”width=device-width," initial-scale="1." maximum-scale="1,user-scalable=no”"/>
22. 视差滚动效果？
视差滚动（Parallax Scrolling）通过在网页向下滚动的时候，控制背景的移动速度比前景的移动速度慢来创建出令人惊叹的3D效果。
CSS3实现优点：开发时间短、性能和开发效率比较好，
缺点是不能兼容到低版本的浏览器jQuery实现通过控制不同层滚动速度，计算每一层的时间，控制滚动效果。
优点：能兼容到各个版本的，效果可控性好
缺点：开发起来对制作者要求高插件实现方式例如：parallax-scrolling，兼容性十分好
32. png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？
png是便携式网络图片（Portable Network Graphics）是一种无损数据压缩位图文件格式.优点是：压缩比高，色彩好。大多数地方都可以用。
jpg是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的不错。在www上，被用来储存和传输照片的格式。
gif是一种位图文件格式，以8位色重现真色彩的图像。可以实现动画效果.
webp格式是谷歌在2010年推出的图片格式，压缩率只有jpg的2/3，大小比png小了45%。缺点是压缩的时间更久了，兼容性不好，目前谷歌和opera支持。
31. 有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度
外层div使用position：relative；
高度要求自适应的div使用position: absolute; top: 100px; bottom: 0; left: 0
高度自适应可以使用position:absolute的属性取值的。
33. style标签写在body后与body前有什么区别？
页面加载自上而下 当然是先加载样式。
写在body标签后由于浏览器以逐行方式对HTML文档进行解析，当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE下可能会出现FOUC现象（即样式失效导致的页面闪烁问题）
35 阐述一下CSS Sprites
将一个页面涉及到的所有图片都包含到一张大图中去，
然后利用CSS的 background-image，background- repeat，background-position 的组合进行背景定位。
利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能；
CSS Sprites能减少图片的字节。
11.什么是 BFC机制？
BFC(Block Formatting Context)，块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。
触发条件 (以下任意一条)
float的值不为none
overflow的值不为visible
display的值为table-cell、tabble-caption和inline-block之一
position的值不为static或则releative中的任何一个
在IE下, Layout,可通过zoom:1 触发
BFC布局与普通文档流布局区别:
BFC布局规则:
浮动的元素会被父级计算高度(父级元素触发了BFC)
非浮动元素不会覆盖浮动元素的位置(非浮动元素触发了BFC)
margin不会传递给父级(父级触发BFC)
属于同一个BFC的两个相邻元素上下margin会重叠
普通文档流布局: 浮动的元素是不会被父级计算高度
非浮动元素会覆盖浮动元素的位置
margin会传递给父级元素
两个相邻元素上下的margin会重叠
开发中的应用
阻止margin重叠
可以包含浮动元素 —— 清除内部浮动(清除浮动的原理是两个 div都位于同一个 BFC 区域之中)
自适应两栏布局
可以阻止元素被浮动元素覆盖
13. 居中布局
水平居中
行内元素: text-align:center
块级元素: margin:0 auto
绝对定位和移动: absolute + transform
绝对定位和负边距: absolute + margin
flex布局: flex + justify-content:center
垂直居中
子元素为单行文本: line-height:height
absolute + transform
flex + align-items:center
table: display:table-cell; vertical-align: middle
利用position和top和负margin
CSS3中的felx布局：
HTML5中常见面试题目：https://zhuanlan.zhihu.com/p/102172270
ES6:总结：
1.对象拓展：属性简写，不论是赋值的时候，还是返回的时候都可以，方法简写，
https://www.cnblogs.com/zhuangch/p/11425879.html
let birth = "2020/10/1";
const Person ={
name: 'zhang',
birth, //等同于 birth:birth;
hello(){
console.log("name"+ this.name)
}
//等于：
hello:function(){
console.log("name"+ this.name)
}
}
function getPoint(){
const x =1;
const y = 10;
return {x,y}
}
getPoint()//{x:1,y:10}
CommonJS中返回对应的模块的时候也可以使用上面birth的简写的方式完成实现。
可以使用表达式的方式来定义对应的属性名字，其中的可以是一个已经定义好的变量或者是一个运算操作符流程。
//理解ES6中的Symbol https://www.cnblogs.com/jyybeam/p/11974250.html
Symbol的使用方法是Symbol(描述信息），其中描述信息可以为任意类型，但若是引用类型则会调用其toString方法；若为undefined，则为Symbol()，相当于不设置描述信息；若为null则Symbol(null)。可以使用String()和toString()的方法来完成转换为字符串，但是不可以进行对应的加减操作。转换为布尔值的时候始终为true的值。
若对象的属性为Symbol类型，则Symbol值必须放在[]中，看代码可以体会一下。否则放在方面的话会被当成作为一个字符串的形式的属性值。
若属性为Symbol类型，则该属性不会出现在for...in、for...of中，也不会通过使Object.keys()、Object.getOwnPropertyName()得到，若想要得到，则需要使用Object.getOwnPropertySymbol()；就是说一般的方式是无法遍历其中的Symbol的属性值的。在ES6中提出的新的方法console.log(Reflect.ownKeys(obj)); // [ 'name', Symbol(jyy) ] //可以得到全部的symbol的属性值。
ES6:set 和 map: