-
css3属性
-
flex
transform
opacity
filter
will-change
-webkit-overflow-scrolling
- 层叠等级:层叠上下文在z轴上的排序
在同一层叠上下文中,层叠等级才有意义
z-index的优先级最高
- 居中布局
- 水平居中
行内元素: text-align: center
块级元素: margin: 0 auto
absolute + transform
flex + justify-content: center
- 垂直居中
line-height: height
absolute + transform
flex + align-items: center
table
- 水平垂直居中
absolute + transform
flex + justify-content + align-items
- 选择器优先级
- !important > 行内样式 > #id > .class > tag > * > 继承 > 默认
选择器 从右往左 解析
6.去除浮动影响,防止父级高度塌陷
- 通过增加尾元素清除浮动
-
:after /
- clear: both
创建父级 BFC
父级设置高度
7.link 与 @import 的区别
- link功能较多,可以定义 RSS,定义 Rel 等作用,而@import只能用于加载 css
当解析到link时,页面会同步加载所引的 css,而@import所引用的 css 会等到页面加载完才被加载
@import需要 IE5 以上才能使用
link可以使用 js 动态引入,@import不行
- CSS预处理器(Sass/Less/Postcss)
-
CSS预处理器的原理: 是将类 CSS 语言通过 Webpack 编译 转成浏览器可读的真正 CSS。在这层编译之上,便可以赋予 CSS 更多更强大的功能,常用功能:
-
嵌套
-
变量
-
循环语句
-
条件语句
-
自动前缀
-
单位转换
-
mixin复用
面试中一般不会重点考察该点,一般介绍下自己在实战项目中的经验即可~
9.CSS动画
- transition: 过渡动画
transition-property: 属性
transition-duration: 间隔
transition-timing-function: 曲线
transition-delay: 延迟
常用钩子: transitionend
- animation / keyframes
animation-name: 动画名称,对应@keyframes
animation-duration: 间隔
animation-timing-function: 曲线
animation-delay: 延迟
animation-iteration-count: 次数
- infinite: 循环动画
animation-direction: 方向
alternate: 反向播放
animation-fill-mode: 静止模式
forwards: 停止时,保留最后一帧
backwards: 停止时,回到第一帧
both: 同时运用 forwards / backwards
常用钩子: animationend
- 动画属性: 尽量使用动画属性进行动画,能拥有较好的性能表现
translate
scale
rotate
skew
opacity
color
最后
四轮技术面+一轮hr面结束,学习到了不少,面试也是一个学习检测自己的过程,面试前大概复习了 一周的时间,把以前的代码看了一下,字节跳动比较注重算法,面试前刷了下leetcode和剑指offer, 也刷了些在牛客网上的面经。大概就说这些了,写代码去了~
祝大家都能收获大厂offer~
篇幅有限,仅展示部分内容