参考资料：2021年虾皮、OPPO等十几家公司面经总结
报错系统怎么设计 怎么样确保稳定性什么的， 或者是CDN要怎么确保稳定性
1.get和post的区别
相同点:本质都是tcp
区别产生的原因：http规范，约定。浏览器或服务器的限制
1.参数位置
原因：规范，
2.参数长度（http规范）2083 限制url的长度
服务器处理长的url，会耗费资源，所以加限制
3.安全
可见和不可见【都不安全】
4.数据包
get：1个
post：2个 100继续
2.web性能优化
从地址栏输入url进行考虑
1.降低请求量。资源压损，gzip压缩，减少资源的请求时间，或者可以使用script异步请求。lazyload
2.与解析dns，减少域名数。并行加载，cdn分发
3.减少http请求的数量。缓存http缓存，尤其是耗时长的数据，利用浏览器存储
4.标签的位置
5. 减少重绘和回流
3.如何减少重绘和回流
3.1引起回流和重绘的原因
display：none，引起回流吧
引起回流的原因：导致浏览器重新计算页面元素大小和位置的行为都会引起回流
（1）新增删除元素节点，
（2）修改元素的大小，位置和高度
（3）获取元素和设置offset，client，scrll等开头的属性
（4）getComputedStle，这些属性
浏览器窗口变化
引起重绘的原因：颜色背景，等改变，没有改变样式
3.2如何减少
css
样式切换
如果想动态改变样式，可以通过改变类名
避免使用table，因为每个td的改变，会引起整个table的重新计算
避免使用项目内联样式，css选择符从右往左匹配查找，避免层级过多，使用transform 代替top
requestAnimationFrame
css3硬件加速，可以让transform，opacity，filters 这些动画不会引起回流重绘，但是对于动画的其他属性。
如何开启css3硬件加速：3d变化
对于复杂的动画，position使用fixed/absolute,脱离文档流。
js层面
计算中减少遇到对offset的多次获取，就想办法缓存
如果需要js变化引起样式的，用类名
离线操作：dispay：none，然后操作，然后再block
4.浏览器缓存
强缓存：express cach-control max-size：
发出请求，先读取缓存，查看缓存指标，是否可以用，或者没有过期，如果没有，直接用；否则就去服务端验证
lf-modified-since == last-modified
if-none-match === etag
5.link和@import的区别
（1）加载时间
link同时加载
import 页面加载完成加载
（2）兼容性
link是标签，没有
@importie5
（3）权重
link中的样式大于@import
6.animation和transition
区别：触发方式和帧数
7.flex:1 = 1 1 0%
flex auto =1 1 auto
flex none =0 0 auto
默认：0 1 auto
flex 0 = 0 1 0%
8.圣杯布局双飞翼布局
布局相同，其他不同
9.js动画和css3动画的差异
渲染线程分为主线程和合成线程，
如果直接是css3动画，直接在合成线程上进行
如果是js触发的动画，先在主线程执行，然后触发合成层进行下一步操作
10.块元素和内联元素
width和heigt
块元素：w和h可以设置，padding和height也可以设置
行元素：w和h不能设置，垂直方向的margin会失效，但是padding有效
11.多行元素的文本省略
单行：overflow： word-space ：nowarp；text-overflow
多行文本：
display:-webkit-box
-webkit-line-clamp ;2
-webkit-box-orient:vertical
text-overflow:ellipsis
overflow:hidden
13.visibility=hidden, opacity=0，display:none
区别
点击事件是否生效
v：不生效
o：生效
d：失效
原有空间是否会消失
v;不消失
o：不消失
d；消失
14.双边距问题
15.清除浮动
clear和bfc
16.css选择器，和优先级
1. 优先级
2.从右往左的匹配规则，所以避免层级过多，权重高的，写在后面
3.> +
4.伪类和伪元素
LVHA和focus
伪元素
after，before，first-letter，first-line
属性选择器
= != ~=
5.css3新增的伪类和属性选择器
type系列，first-of-type,last-of-type,only-of-type
child:nth-child last-child root,empty,disable,cheked not
属性：*= ^= $=
作用
6.LVHA
指的是样式书写顺序：hover位于link和visited之后，才能生效
适用的元素：Hover：所有元素
7.css
17.三栏布局实现方式
flex：
1.圣杯布局
flex实现
foat实现：[浮动，负边距，不添加额外标签]
margin的百分
margin-left: -100%;以父元素的宽为基准
marin-left之后，还要positons
2.双飞翼布局
简单，没有使用什么position
18.BFC
是什么
是浏览器中的一块渲染区域，不影响外部，内部有自己的一套排列规则
规则
1.从上到下
2.margin
3.bfc区域不会影响bfc外部元素的排列
5，不会和float元素重叠
4.计算bfc的高度时，浮动元素也参与计算
如何触发
1.根元素
2.overflow：不是visible
3.display：只要不是默认的block和inline。
4.position：是absolute和fixed
5.浮动元素：
应用场景
清楚浮动
负边距重叠
两列布局
文字环绕
18.calc 动态计算，要有空格
4点开始干活
19.有一个 width300，height300，怎么实现在屏幕上垂直水平居中
这个和普通面试题一样，是屏幕垂直水平居中，是不是就意味着就算出现了body滚动，这个元素也是居中的
1.不考虑滚动
正常回答
2.考虑滚动
fixed
20.display：table 和本身的 table 有什么区别
div+css编写出来的文件小
table是页面完全加载后显示，div是逐行显示
21.z-index 的定位方法
如果想要改变一个 DOM 元素的字体颜色，不在它本身上进行操作？
22.如果想要改变一个 DOM 元素的字体颜色，不在它本身上进行操作？
以下几类：
font：，
文本系列属性，text-align text-indent，text-transform
元素可见性
visibility
表格布局属性
border-collapse
列表属性 ：list-style
光标属性 cursor：箭头可以变成需要的形状
哪些属性可以继承
a 标签的字体颜色默认不继承，
h1-h6标签字体的大下也是不能被继承的
23.css3新增的样式
新增的样式分为：盒子、文字、颜色、动画、
边框
border-raduis
border-radius
box-shadow
背景：
background-clip
background-orient
background-size ：contain cover 100%
文字
折叠换行隐藏：word-wrap text-overflow
文字太长了怎么处理
word-wrap：break-word
text-overflow：clip
文字装饰
text-shadow：
text-decoration
颜色：
rgba（）
hsla
动画
transition
animation
transform
渐变
linear-gradient
radial-gradient
transform 集中变换效果
几种效果：
translate（x，y，z）
translate()
translate3d()
translateX
translateY
translateZ
rorate
顺时针是正的，逆时针是负的
rorate是在坐标系中找个一个旋转轴旋转，但是坐标轴不变
rorate（点旋转）
rorateX，rorateY,rotateZ 轴旋转 （+顺时针，y逆时针）
rorate3D（X，Y，Z） 在三维空间利用适量确定一个旋转轴
scale
scaleX
rorate（x，y，z）
skew（x，y）
围绕X轴倾斜，保持高度不变，围绕Y轴，保持宽度不变
inline-block、inline 和 block 的区别；为什么 img 是 inline 还可以设置宽高
25.CSS 画正方体，三角形
26.overflow 的原理
27.两个嵌套的 div，position 都是 absolute，子 div 设置 top 属性，那么这个 top 是相对于父元素的哪个位置定位的。【谷歌测试】
个人测试答案：padding的内边缘
margin 的外边缘
因为定位是相对于整个盒模型定位的
怎么是padding的内边缘
分情况：
1.如果是父元素是positon
则相对于父元素的padding内边缘
2.如果父元素是人relative
也是padding的内边缘
28.常用三列布局方式
1.圣杯布局
2.双飞翼布局
圣杯布局和双飞翼布局的区别
布局
padding和margin
对结果处理不同
双飞翼没有用到绝对定位
3.flex布局
4.绝对定位布局
绝对定位里面只有定位，其他都没有用到
和圣杯以及双飞翼的区别：撑不起高度
5.grid布局
