最后
四轮技术面+一轮hr面结束，学习到了不少，面试也是一个学习检测自己的过程，面试前大概复习了 一周的时间，把以前的代码看了一下，字节跳动比较注重算法，面试前刷了下leetcode和剑指offer， 也刷了些在牛客网上的面经。大概就说这些了，写代码去了~
祝大家都能收获大厂offer~
篇幅有限，仅展示部分内容
2. 外边距折叠
1. 外边距合并
2. 三栏布局
### 居中
定宽高
* absolute+负margin
* absolute+margin auto
* absolute+calc 不定宽高
* absolute+transform
* lineheight
* writing-mode
* table
* css-table
* flex
* grid
#### absolute+负margin
.father { position: relative; } .son { position: absolute; left: 50%; top: 50%; margin-left: -(父元素宽度-子元素宽度)/2 px; margin-top: -(父元素高度-子元素高度)/2 px; }
#### absolute+auto
.father{ position: relative; width: 200px; height: 200px; background-color: red; } .son{ background-color: black; position: absolute; width: 100px; height: 100px; left: 0; right: 0; top: 0; bottom: 0; margin: auto; }
#### absolute+cale
.father { width: 200px; height: 200px; position: relative; } .son { width: 100px; height: 100px; position: absolute; top:cale(50% - 50px); left:cale(50% - 50px); }
#### absollute+transform
.father { position: relative; } .son { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
#### flex
.father { display: flex; justify-content: center; align-items: center; }
#### grid
.father { display: grid; } .son { justify-self: center; align-self: center; }
### 一些概念
* 屏幕尺寸：用对角来计算。1英寸=2.54厘米 
* 像素：硬件和软件所能控制的最小单位。
* 屏幕分辨率：一个屏幕具体由多少个像素点组成
* 物理像素：设备的像素点个数
* 逻辑像素：让n个像素当一个像素使用
* 视觉视口 
* 理想视口：所谓理想视口，即页面绘制区域可以完美适配设备宽度的视口大小，不需要出现滚动条即可正常查看网站的所有内容，且文字图片清晰，如所有iphone的理想视口宽度都为320px，安卓设备的理想视口有320px、360px等等。 width=device-width 宽度等于屏幕宽度 initial-scale=1缩放等于1 maximum-scale=2最大缩放等于2 minimum-scale=0.5最小缩放等于0.5 user-scalable=no不允许缩放
### 移动端适配方案
#### rem
但这样我们会发现在写布局的时候会非常复杂，也就是你需要自己手动去计算一下对应的rem值，比如上面的font-size设计稿上是20px，那我们就要计算一下20px对应的rem是多少，按我们上面的规则，1px = 1/37.5rem，所以20px应该对应20/37.5 = 0.53rem。所以这种方案我们通常搭配着CSS预处理器使用。 rem.less
@device-width:375; @rem:(@device-width/10rem)
然后将@rem配置成less全局变量
font-size:(24/@rem)
##### 特点
* 适配原理稍复杂
* 需要使用JS
* 设计稿标注的px换算到rem
* 方案灵活，既能实现整体缩放，又能实现局部不缩放
#### vw、vh适配
rem.less
@device-width:375; @vw:(100vm/@device-width)
font-size: 16*@vw
##### 特点
* 适配原理简单
* 不需要JS即可适配
* 设计稿标注的px换算到vw
* 方案灵活，既然实现整体缩放，又能实现局部不缩放
#### px
export function initViewport() {
const width = 375; // 设计稿宽度
const scale = window.innerWidth / width
// console.log('scale', scale)
let meta = document.querySelector('meta[name=viewport]')
let content = width=${width}, init-scale=${scale}, user-scalable=no
if(!meta) {
meta = document.createElement('meta')
meta.setAttribute('name', 'viewport')
document.head.appendChild(meta)
}
meta.setAttribute('content', content)
}
* 适配原理简单
* 需要JS
* 无需转换
* 方案死板，只能实现页面级别肢体缩放
### CSS3动画
CSS3动画分为transition、animation、transform
#### transition（过度）
transition: transition-property transition-duration transitino-timing-function transition-delay
包含四个属性 transition-property:执行变换的属性 transition-duration：变换延续的时间 transitino-timing-function：在延续的时间段变换的速率变化 transition-delay：变换延迟时间
##### transitino-timing-function具体值
* linear 缺点：
* 不能重复
* height：auto不会产生动画效果
* 不支持所有的属性
##### 支持的属性
* background-color
* background-position
* border-color
* border-width
* border-spacing
* bottom
* clip
* color
* font-size
* font-weight
* height
* left
* letter-spacing
* line-height
* margin
* max-height
* max-width
* min-height
* min-width
#### animation
### 最后
四轮技术面+一轮hr面结束，学习到了不少，面试也是一个学习检测自己的过程，面试前大概复习了 一周的时间，把以前的代码看了一下，字节跳动比较注重算法，面试前刷了下leetcode和剑指offer， 也刷了些在牛客网上的面经。大概就说这些了，写代码去了~
祝大家都能收获大厂offer~
> **[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://docs.qq.com/doc/DSmRnRGxvUkxTREhO)**
**篇幅有限，仅展示部分内容**
