前言：

2020年是多灾多难的一年，疫情持续至今，到目前，全世界的经济都受到不同程序的影响，各大公司裁员，在这样一片严峻的形式下，找工作更是难上加难。

企业的门槛提高，第一，对于学历的要求，必须学信网可查的统招本科；第二，对于技术的掌握程序，更多的是底层原理，项目经验，等等。

下面是面试几周以来，总结的一些面试中常被问到的题目，还有吸取的一些前辈们分享的贴子，全部系统的罗列出来，希望能够帮到正在面试的人。

1. 语义化

• 语义化：用合理、正确的标签来展示内容，比如h1~h6定义标题。

• 优点：
  1.易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。
  2.有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
  3.方便其他设备解析，如盲人阅读器根据语义渲染网页
  4.有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。

• HTML5语义化标签：article nav（导航） aside section（节，段） header footer address等

2. src和href的区别

• href：Hypertext Reference的缩写，超文本引用，它指向一些网络资源，建立和当前元素或者说是本文档的链接关系。

<a href="https://www.aaa.com"></a>

<link type="text/css" rel="stylesheet" href="aaa.css">

• src：source的缩写，表示的是对资源的引用，它指向的内容会嵌入到当前标签所在的位置。

<img src="aaa.jpg">
  
<iframe src="aaa.html">
  
<script src="aaa.js">

• 区别
  1.src用于替代这个元素，而href用于建立这个标签与外部资源之间的关系。
  2.浏览器需要加载完毕src的内容才会继续往下走。而遇到href，页面会并行加载后续内容。

2. IPhoneX的适配

• 适配方案viewport-fit：

auto默认：viewprot-fit:contain;页面内容显示在safe area内
cover：viewport-fit:cover,页面内容充满屏幕
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">

• 媒体查询

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) { }

• 小程序：可以通过wx.getSystemInfo获取设备信息，来动态绑定样式

3. ios键盘问题

• iOS12系统在输入框失去焦点，软键盘关闭后，被撑起的页面无法回退到原来的位置

$("input, select").blur(function(){
 setTimeout(() => {
 const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
 window.scrollTo(0, Math.max(scrollHeight - 1, 0));
 }, 100);
}

• 键盘挡住输入框

element.scrollIntoView() // 让当前的元素滚动到浏览器窗口的可视区域内。

• ios无法自动聚焦唤起键盘
  ios中唤起键盘必须有用户触发，所以无法直接用focus，可以由用户触发一个其他事件来使得输入框focus，从而唤起键盘。

3. 盒子模型

• 一个盒子模型可分成margin(外边距), border(边框), padding(内边距), content(内容)， 四部分组成。

box-sizing:border-box;
box-sizing:content-box;

4. 说说你用过的CSS布局有哪些？

• layout布局、flex布局、双飞翼、圣杯布局等

• 双飞翼，圣杯布局有什么区别?
  1.首先两种布局方式都是解决两边等宽,中间区域自适应的问题
  2.相同之处:都是采用三栏全部浮动(float),左右两边两栏加上负(margin)让其跟中间栏并排，以形成三栏布局
  3.不同之处:解决中间栏不被遮挡的问题,思路不同,圣杯布局采用一层结构,使用(position: relative)配合(left)和(right)属性实现
  4.推荐使用双飞翼布局,虽然多一层结构,但是少几行CSS代码,看起来更清晰,性能更佳

5. link 和 @import的区别

<link rel="stylesheet" href="common.css" type="text/css" />
<style type="text/css">@import url(common.css) </style>

• link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

• link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

• link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

• link支持使用Javascript控制DOM去改变样式；而@import不支持。

6. 移动端 一像素边框

• 通过媒体查询,写具体的数值

.border { border: 1px solid #999 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .border { border: 0.5px solid #999 }
}

• 通过伪类,配合transform,缩放

.border-1px::after {
  display: block;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  transform-origin: center top;
  -webkit-transform-origin: center top;
  border-top: 1px solid #E6E6E6;
  width: 100%;
  height: 200%;
  transform: scaleY(0.5);
  -webkit-transform: scaleY(0.5);
}

7. 移动端点击300ms延迟

• meta禁用缩放或固定视口宽度

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />

• fastclick插件
  1.fastClick的实现原理:是在检测到touchend事件的时候，会通过DOM自定义事件立即出发模拟一个click事件，并把浏览器在300ms之后的click事件阻止掉。
  2.缺点：脚本相对较大
  3.fastclick 在ios 上可能会影响元素自动触发，比如 直接click()；会拦截第一次，需要执行两次click()；才会触发；安卓上不需要；

• tap事件
  1.在touchstart 时会记录一个值x1，y1，在touchend时会记录x2，y2，通过对比这几个值，判断用户是否是点击事件，而不是滑动事件，然后直接触发事件
  2.tap事件存在"点透"的情况

7. 单位问题

• %：
  1.margin,padding是相对父元素的宽度计算的
  2.top,left,bottom,right是相对于父元素的高度计算的
  3.translate是相对自身元素来算的

• px：像素
  1.em：1em等于当前元素的font-size(浏览器默认16px，可继承，em可以省略)
  2.rem：1rem等于html元素的font-size
  3.vw,vh：视口宽度被均分成100vw,视口高度被均分成100vh。视口宽高是页面的可视区域，如键盘弹起安卓的视口宽高发生变化，但iPhone不会。（安卓4.4，iOS6以上支持）

• vmax, vmin：
  1.vmax = max(vw,vh)（vmax安卓4.4，iOS8以上支持）
  2.vmin = min(vw,vh)（vmin安卓4.4，iOS6以上支持）

• ex和ch：
  1.ex以字符"x"的高度为基准；例如1ex表示和字符"x"一样长。
  2.ch以数字"0"的宽度为基准；例如2ch表示和2个数字"0"一样长

8. 居中方案

• 水平居中
  1.行内元素：text-align: center;
  2.固定宽度： + margin: 0 auto;
  3.flex：justify-content: center;
  4.grid：justify-items: center;
  5.定位：left:50%，transformX(-50%);

• 垂直居中
  1.行内元素:：padding-top = padding-bottom
  2.行内元素: line-height = height
  3.display：父display:table; 子display:table-cell; vertical-align: middle;
  4.flex：align-items: center;
  5.grid：align-items: center;
  6.定位：top:50%，transformY(-50%);

• 水平垂直居中
  1.已知高宽，使用负边距法
  2.未知，使用grid, flex或transfrom

9. flex布局

• 比如：上面是内容区域，底部是购物车固定容器，高度50px

.content{
  flex: 1;
}
.bottom{
  height: 50px;
}

10. CSS3新特性（贝塞尔曲线）

• 过渡 transition
• 动画 animation
• 形状转换 transform
• 阴影 box-shadow
• 滤镜 Filter
• 颜色 rgba
• 栅格布局 gird
• 弹性布局 flex
  ...

11. BFC

• 块级格式化上下文，为了便于理解，我们换一种方式来重新定义BFC。一个HTML元素要创建BFC，则满足下列的任意一个或多个条件即可：
  1.body元素
  2.float的值不是none。
  3.position的值不是static或者relative。
  4.display的值是inline-block、table-cell、flex、table-caption或者inline-flex
  5.overflow的值不是visible

• BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

• 特性:
  1.内部的Box会在垂直方向，一个接一个地放置。
  2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠 （margin坍塌）
  3.每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
  4.BFC的区域不会与float box重叠。
  5.计算BFC的高度时，浮动元素也参与计算
  6.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

答案有不对的地方，希望评论区指正，看到之后，第一时间修改，谢谢~