前言：
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的值不是visibleBFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。
特性:
1.内部的Box会在垂直方向，一个接一个地放置。
2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠 （margin坍塌）
3.每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4.BFC的区域不会与float box重叠。
5.计算BFC的高度时，浮动元素也参与计算
6.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
