CSS一些知识点

CSS

仅是个人总结部分，参考价值不大。不建议继续阅读。

什么是BFC，怎样生成BFC?

BFC可以理解为一个独立的容器，其渲染区域与外部毫不相干。

1. BFC防止float元素的高度坍塌。BFC内部float元素影响（若float元素高度坍塌，则影响到BFC外部的元素，与BFC不影响外部冲突）

2. BFC阻止元素被浮动元素覆盖。 BFC元素与float元素

float元素为文字环绕float元素，将文字区域变为BFC，其不会再影响float元素。 设置BFC后，如果设置margin-left，值太小的话，会不起作用。可设置float元素的margin-right来实现间距

3. 外边距折叠。 BFC内部元素

生成BFC:

• 根元素
• 浮动元素
• overflow不为visiable
• position为absolute， fixed
• display： inline-block, table
• 弹性元素（display为 flex 或 inline-flex元素的直接子元素）
• 网格元素（display为 grid 或 inline-grid 元素的直接子元素）

参考

• MDN块格式化上下文
• [示例

css动画

两种方式： transition， animation

写法：

.box {
  animation: 3s type forwards alterntee infinite;
  transition: width 1s 0.5s ease-in-out;
}
@keyframes type {
    from {
        background: yellowgreen
    }

    to {
        background: aquamarine
    }
}

transition

• 需要触发条件，不能在网页加载时自动发生
• 只有初始和终止两个状态
• 一次性，不能重复，除非一再触发
• 一条transition规则只能定义一个属性

具体属性可参考

• 2019年了，你还不会CSS动画？