小笔记（CSS篇）

笔记打算记录，自己整理好的面试题，
争取保持准确性和专业性，然后用直白的语言描述出来，
希望能做成一个API文档，让我日后翻到能直接对着复习就好，
如果也能帮助到你就最好了（我会不定时的更新的）

垂直居中常见的实现方式

• 使用flex

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

• 使用绝对定位的模式

/* 结合父元素 */
.div {
  position: relative;
}
.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

BFC的理解

BFC称为（block formatting context）、块级格式化

• 解决什么问题？

1. 解决元素之间的margin重叠的问题

2. 解决元素高度坍塌的问题

3. BFC区域不会和浮动元素重叠

• 如何创建BFC：

1. DOM节点设置 overflow 样式，设为hidden、auto、scroll

2. 节点使用绝对定位 absolute

3. 设置浮动 float

4. html标签（根元素：body标签）

CSS动画的理解

• transition （实现渐变）：一般指定某个 css元素，过渡的效果
• transform（变形/转变）：常见属性是 translate、rotate、scale
• animation（自定义动画）：常配合 @keyframes 定义元素动画的效果