该面试题只是为了记录我自己的面试笔记，大多数摘自行内有关大佬总结，本人只是搬运工，有关链接已放置相关笔记的下面
margin 重叠
问题描述：
两个块级元素的上外边距和下外边距可能会合并（折叠）为一个外边距，其大小会取其中外边距值大的那个，这种行为就是外边距折叠。需要注意的是，浮动的元素和绝对定位这种脱离文档流的元素的外边距不会折叠。重叠只会出现在垂直方向。
计算原则：
折叠合并后外边距的计算原则如下：
- 如果两者都是正数，那么就去最大者
- 如果是一正一负，就会正值减去负值的绝对值
- 两个都是负值时，用0减去两个中绝对值大的那个
解决办法：
对于折叠的情况，主要有两种：兄弟之间重叠和父子之间重叠
（1）兄弟之间重叠
- 底部元素变为行内盒子：
display: inline-block - 底部元素设置浮动：
float - 底部元素的position的值为
absolute/fixed
（2）父子之间重叠
- 父元素加入：
overflow: hidden - 父元素添加透明边框：
border:1px solid transparent - 子元素变为行内盒子：
display: inline-block - 子元素加入浮动属性或定位
毛玻璃特效
backrop-filter：blur(10px);
旋转动画
animation: name duration timing-function delay iteration-count direction;
css 动画暂停
animation-play-state：paused；
animation-fill-mode: forwards;// 让css动画停留在最后一帧
Canvas 画一个矩形，五角星
<script>
// 使用id来寻找canvas元素
var myCanvas = document.getElementById('myCanvas');
if (myCanvas.getContext) {
// 创建context对象
// getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
var ctx = myCanvas.getContext("2d");
var horn = 5; // 画5个角
var angle = 360/horn; // 五个角的度数
// 两个圆的半径
var R = 200;
var r = 80;
// 坐标
var x = 200;
var y = 200;
var rot = 10;
function drawStar(ctx, R, r, rotate){
// beginPath：开始绘制一段新的路径
ctx.beginPath();
for (var i = 0; i < horn; i++) {
// 角度转弧度：角度/180*Math.PI
var roateAngle = i * angle - rotate; // 旋转动起来
// 外圆顶点坐标
ctx.lineTo(Math.cos((18 + roateAngle) / 180 * Math.PI) * R + x, -Math.sin((18 + roateAngle) / 180 * Math.PI) * R + y);
// 內圆顶点坐标
ctx.lineTo(Math.cos((54 + roateAngle) / 180 * Math.PI) * r + x, -Math.sin((54 + roateAngle) / 180 * Math.PI) * r + y);
}
// closePath：关闭路径，将路径的终点与起点相连
ctx.closePath();
ctx.lineWidth = "3";
ctx.fillStyle = '#E4EF00';
ctx.strokeStyle = "red";
ctx.fill();
ctx.stroke();
}
drawStar(ctx, R, r, 20);
// setInterval(function (){
// ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
// drawStar(ctx, R, r, rot);
// rot += 2;
// }, 30);
// 更加流畅的动画：window.requestAnimationFrame
function step(){
ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
drawStar(ctx, R, r, rot);
rot += 1;
window.requestAnimationFrame(step);
}
window.requestAnimationFrame(step);
}
</script>
transition 和 animation 区别
| 属性 | 含义 |
|---|---|
| transition（过度） | 用于设置元素的样式过度，和animation有着类似的效果，但细节上有很大的不同 property:填写需要变化的css属性 duration:完成过渡效果需要的时间单位(s或者ms) timing-function:完成效果的速度曲线 delay: 动画效果的延迟触发时间 |
| transform（变形） | 用于元素进行旋转（rotate）、缩放（scale）、移动（translate）或倾斜（skew），和设置样式的动画并没有什么关系，就相当于color一样用来设置元素的“外表” |
| translate（移动） | 只是transform的一个属性值，即移动 |
| animation（动画） | 用于设置动画属性，他是一个简写的属性，包含6个属性 animation-duration 指定动画完成一个周期所需要时间，单位秒（s）或毫秒（ms），默认是 0 animation-timing-function 指定动画计时函数，即动画的速度曲线，默认是 "ease" linear、ease、ease-in、ease-out、ease-in-out animation-delay 指定动画延迟时间，即动画何时开始，默认是 0 animation-iteration-count 指定动画播放的次数，默认是 1 animation-direction 指定动画播放的方向 默认是 normal normal、reverse、alternate、alternate-reverse animation-fill-mode 指定动画填充模式。默认是 none forwards、backwards、both animation-play-state 指定动画播放状态，正在运行或暂停。默认是 running running、pauser animation-name 指定 @keyframes 动画的名称 |
Css 处理兼容性问题
- 浏览器CSS样式初始化
- 浏览器私有属性（webkit,moz,o,ms）
- css hack(选择符级前缀，if条件，属性级前缀)（史上最全的CSS hack方式一览_清枫草塘的博客-CSDN博客）
- 插件autoprefixer （packjson，browserslist）
css浏览器兼容问题
&class 和 class& 区别
- &class 外层父嵌套
- class& 反转嵌套
// 写法
.demo-title {
.demo & {
font-size:20px;
}
}
//编译后
.demo .demo-title {
font-size:20px;
}
