CSS

1. css和js两种方式实现div右移1000px动画

2.1 css和js两种方式实现div右移1000px动画

2. visibility、display、opacity的区别

	作用描述	是否影响布局	是否发生重绘	是否重排	绑定的事件能否触发
visibility	显示或隐藏元素而不更改文档的布局	否	是	否	能
display	设置元素的显示类型	是	是	是	否
opacity	设置透明度	否	不一定（合成层）	否	能

补充定义：

1. 重绘：当页面中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的时候，比如background-color。则称为重绘。
2. 重排：当页面中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(也有人会把回流叫做是重布局或者重排)。每个页面至少需要一次回流，就是在页面第一次加载的时候。

3. flex布局

1. flex:1;的含义：flex-shrink: 1; flex-grow: 1; flex-basis: 0;

4. transition、transform、translate的区别

	作用描述
transition	设置过渡动画
transform	可以设置元素的旋转、缩放、倾斜、平移（translate()）
translate	可以单独定义元素的平移

5. 怎么画一条0.5px的边

juejin.cn/post/684490…

简单总结：理论上px的最小值是1px，但是有特例，比如在高清屏可以直接设置0.5px，但还受浏览器的影响，不同的浏览器表现不一致

6. 说一下BFC

1. 原理：具有BFC特性的元素可以看做是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素。简单理解，BFC是一个大盒子，盒子内部的所有操作都不会对外部产生影响。

2. 形成BFC的条件：

   1. 浮动元素：float除none以外的值
   2. overflow除visible以外的值
   3. 绝对定位：position: absolut / fixed
   4. display:inline-block / table-cells / flex
   5. body根元素

3. 应用场景

   1. 阻止外边距折叠
   2. 包含浮动子元素导致父元素高度塌陷
   3. 元素内容被浮动兄弟元素遮盖

4. 参考链接：

   1. 浅析BFC原理及应用

   2. BFC MDN

5. CSS垂直居中的方案

1. Flex

2. display:relative; display:absolute; top:0; bottom:0;

3. padding

4. 说一下盒模型

1. 标准盒模型：content-box; 元素的可见宽包括width、padding、border，不包括margin。实际宽度width
2. 怪异（IE）盒模型：border-box; 元素的可见宽度即width，不包括padding、border、margin。实际宽度width - padding - border

9. 说一下em和rem的区别

em	在font-size中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小
rem	根元素的字体大小

写在最后

---

往期文章

前端面经整理系列一（javascript篇）