CSS篇

1、CSS3新增属性
CSS3边框：border-radius box-shadow boder-image
background-size text-shadow word-wrap
transform的一系列转换 css过渡 box-sizing

2、css动画
transition过渡 必须要有事件来触发 只能一次 需要多次 则需要多次触发 具有中间点的属性才行
animation是升级版 与keyframe配合可以在页面加载的时候就可以执行 可触发多次 帧数可控
https://www.cnblogs.com/mmzuo-798/p/6655753.html

3、清除浮动方法以及为什么要清除浮动
为什么：因为设置浮动之后因为浮动元素脱离文档流 不计入高度 所以父元素塌陷等情况 所以需要清除 浮动。
方法：
①、给父元素设置高度
②、clear:both清除浮动

.clear{clear:both}
<div class="divcss5"> 
    <div class="divcss5-left">left浮动</div> 
    <div class="divcss5-right">right浮动</div> 
    <div class="clear"></div> 
</div>

③、父级div定义 overflow:hidden
④、父级div定义伪类：after和zoom
https://www.cnblogs.com/nxl0908/p/7245460.html

4、Css 优先级算法如何计算？
最高等：！important 权值为10000
第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为0100。
第三等：代表类，伪类和属性选择器，如.content，权值为0010。
第四等：代表标签选择器和伪元素选择器，如div p，权值为0001。
第五等：通用选择器（*），子选择器（>），相邻同胞选择器（+），权值为0000

5、哪些css属性可以继承。哪些属性不能继承

image.png

6、如何垂直水平居中一个div
①父元素relative
子元素

.mydiv{ 
 width:300px;  
height:200px;  
 position:absolute;  
left:50%;  
top:50%;  
transform：translate(-50%,-50%)
}

②
子元素

.mydiv{ 
 width:300px;  
height:200px;  
 position:absolute;  
left:0;  
top:0;  
bottom：0；
right：0；
margin：auto；
}

③flex布局
④table布局

7、圣杯双飞翼布局 三栏布局
https://www.jianshu.com/p/81ef7e7094e8

8、flex布局
阮一峰大佬讲的已经很好了 我看来无可挑剔 看就完事！！
https://blog.csdn.net/lm9948/article/details/80732702

9、font-size大小指哪里 ？line-height指哪里的大小？
font-size是指字的高度
line-height指字上下一半的间距。

10、css选择器有哪些
ID 类 标签 后代 子 兄弟 伪类 :first-child伪类等 :link 和 :visited等 :before 和 :after伪元素等

11、display有哪些值？说明他们的作用

image.png

12、zoom:1的清除浮动原理?

image.png

13、移动端字体小于12px怎么处理? 移动端边框小于1px怎么处理？
①

html{-webkit-text-size-adjust:none;}

或者

p{-webkit-text-size-adjust:none;}

② 使用transform的scale(0.5);
③ 有样式的就用图片好了

14、骨架屏了解过吗？知道怎么做的嘛？
骨架屏就是为了再加载资源内容的前面给个用户大体的框架 留下好的用户体验。页面加载完成之后进行替换的方案
https://segmentfault.com/a/1190000016689372

15、css reset文件的作用
reset文件主要是统一一些基础格式，使得在不同浏览器下展示得相同
https://www.cnblogs.com/ZinCode/p/5544633.html

16、描述z-index和叠加上下文是如何形成的？

image.png
https://www.w3cplus.com/css/what-no-one-told-you-about-z-index.html
17、data-是什么？
是自定义属性，可以通过getAttribute('data-**')来读取相应的自定义属性;
18、 对WEB标准以及W3C的理解与认识
web标准一般是将结构、表现和行为独立分开，使其更具有模块化。但一般产生行为时，就会有结构或者表现的变化，也使这三者的界限并不那么清晰。
W3C对web标准提出了规范化的要求，也就是在实际编程中的一些代码规范：包含如下几点
①对于结构要求：（标签规范可以提高搜索引擎对页面的抓取效率，对SEO很有帮助）
1）。标签字母要小写
2）。标签要闭合
3）。标签不允许随意嵌套
2.对于css和js来说
1）。尽量使用外链css样式表和js脚本。是结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验。
2）。样式尽量少用行间样式表，使结构与表现分离，标签的id和class等属性命名要做到见文知义，标签越少，加载越快，用户体验提高，代码维护简单，便于改版
3）。不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性。
19、CSS 中解决浮动中高度塌陷的方案有哪些？
解题思路

可以先概括解决高度塌陷问题的两种类型：clear 属性 和 BFC 法
然后可以介绍两种类型的具体方案：
追加元素并设置 clear 属性
使用 CSS 样式插入伪元素
Bootstrap 的解决高度塌陷方案（BFC）

可能追加的面试题（详见参考链接）
高度塌陷产生的原因是什么？
clear 属性清除浮动的原理是什么？
采用 BFC 解决高度塌陷和clear 属性清除浮动相比的优势是什么？
参考链接
清除浮动

浏览器和 Node.js 的事件循环机制有什么区别?
1.Micro-Task 与 Macro-Task
浏览器端事件循环中的异步队列有两种：macro（宏任务）队列和 micro（微任务）队列。宏任务队列可以有多个，微任务队列只有一个。

常见的 macro-task 比如：setTimeout、setInterval、script（整体代码）、 I/O 操作、UI 渲染等。
常见的 micro-task 比如: new Promise().then(回调)、MutationObserver(html5新特性) 等。

浏览器找中的执行任务队列
链接：https://juejin.im/post/5c337ae06fb9a049bc4cd218

ES6中的symbol数据类型？
是一种基础的数据类型，每一个定义的symbol值都是唯一的 理解和用处参考博客
symbol的理解和使用
在 JavaScript 中如何实现对象的私有属性?
实现对象的私有属性