CSS相关

[wang1dot0]

nth-child 与 nth-of-type的区别

两者都是伪类选择器，直接看例子

<div class="container">
  <p>This is the first sentence</p>
  <p>This is the second sentence</p>
</div>

这里p::nth-child(2)与p::nth-of-type(2)无差别，都是第二个p标签 但是我们变更一下

<div class="container">
  <span>This is a span.</span>
  <p>This is the first sentence</p>
  <p>This is the second sentence</p>
</div>

这里p::nth-child(2)与p::nth-of-type(2)就大大的不同了，nth-child(2)会选中第一个p标签，而nth-of-type(2)依旧选择第二个p标签。 总结：

1. nth-child表示父元素的第2个元素，并且为p标签的元素，这里就选中了第一个，注：如果第二个元素不是p标签，那么就未选中。
2. nth-of-type表示父元素的所有p标签的子元素中第二个。

[wang1dot0]

BFC (Block Formatting Context)

---

三种常见的定位方案

• 普通流： 元素从上到下的布局，行内水平排列直到当行被占满然后换行，块级元素会被渲染为一个完整的新行。默认所有元素都是普通流定位。
• 浮动： 元素按照普通流的位置出现，然后根据浮动方向尽可能向左或者向右偏移。

• 绝对定位： 元素脱离了普通文档流，位置由绝对定位的坐标决定，不会影响兄弟元素。

  概念

  具有BFC特性的元素可以看作隔离了的独立容器，容器里面的元素不会在布局上影响外部的元素，并且BFC具有普通容器所没有的一些特性。

  触发条件

• body根元素
• 浮动元素： float: none之外的元素
• 绝对定位元素：position (absolute, fixed)
• display为inline-block，table-cells, flex, grid
• overflow除了visible之外的值（hidden, auto, scroll）