CSS零碎知识BFC：BFC的全称是Block Formatting Content；js动画和css动画区别；last

BFC的全称是Block Formatting Content， BFC里面的盒模型，如果是行内元素则会并排排列，如果是块状元素则独占一行，垂直放置。这个概念是在BFC区域内的元素无论如何布局，都不会影响到外面的元素。

触发BFC的方式有：

根元素，即 <html>
浮动元素：float 值为 left 、right
overflow 值不为 visible，即为 auto、scroll、hidden
display 值为 inline-block、table-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
绝对定位元素：position 值为 absolute、fixed

什么情况不是BFC呢？

last-of-type 和 last-child 是 CSS 选择器中的两个伪类，用于选择元素中的最后一个元素。它们之间的区别在于选择的范围不同。

last-of-type 选择器：
- 该选择器选择同一父级下的最后一个具有相同元素类型（标签名）的元素。
- 它不考虑元素的位置或顺序，只关注元素的类型。
- 如果元素是其父级中唯一的一个该类型元素，则会被选中。

示例：

<div>
  <p>第一个段落</p>
  <span>一个 span 元素</span>
  <p>最后一个段落</p> <!-- 被选中 -->
</div>

p:last-of-type {
  color: red;
}

上述代码中，<p> 元素中的最后一个段落会被选中并设置颜色为红色。

last-child 选择器：
- 该选择器选择同一父级下的最后一个子元素，无论这个子元素的类型是什么。
- 它考虑元素的位置和顺序，而不仅仅是元素的类型。

示例：

<div>
  <p>第一个段落</p>
  <span>一个 span 元素</span>
  <p>另一个段落</p>
  <p>最后一个段落</p> <!-- 被选中 -->
</div>

div p:last-child {
  color: blue;
}

上述代码中，<div> 元素中的最后一个子元素 <p> 会被选中并设置颜色为蓝色。

总结：

transtion是过渡属性：语法：transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)
transform是转换属性：
- transform: translate(120px, 50%)：位移
- transform: scale(2, 0.5)：缩放
- transform: rotate(0.5turn)：旋转
- transform: skew(30deg, 20deg)：倾斜

为了处理移动端，页面头部必须有meta声明viewport

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>

属性对应如下：

CSS零碎知识