现象：

现有两个div,上面的div设置margin-bottom:200px,下面的设置margin-top:100px,最终两个div距离却是200px。

原因：

当两个在标准流中相邻（兄弟或父子关系）的块级元素的外边距，组合在一起变成单个外边距，但只有上下外边距会发生塌陷。 计算方式： 1. 两个块margin都为正，取其较大的一个 2. 两个块magin都为负，取其绝对值较大的一个 3. 一个块为负，一个块为正，取两个块margin之和

Multiple-column layout 文档

实现步骤

设置父容器（content）的column-count用来指定列数，接着将子容器的img标签宽和高均设置为100%

示例

在线示例 样式（less）

当素材尺寸（宽和高）不是2的n次方时，贴图效果会较为模糊。 控制台会有如下警告：

THREE.WebGLRenderer: image is not power of two (1638x2166). Resized to 1024x2048

解决方案：对贴图做如下设置

texture.generateMipmaps = false;
texture.wrapS = texture.wrapT = THREE.ClampToEdgeWrapping;
texture.minFilter = THREE.LinearFilter

在Vue开发中，我们经常会遇到这样的问题：直接通过索引设置数组项或者给对象添加新属性时，视图并没有更新。这时我们就需要使用Vue提供的$set方法来解决这个问题。本文将深入探讨Vue中$set的实现原理。

为什么需要$set？

在Vue的响应式系统中，并不是所有数据变化都能被检测到。主要有以下两种情况：

1. 数组索引直接设置

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})

// 这种方式不会触发响应
vm.items[1] = 'x'

在Vue 3的Composition API中，ref和reactive是创建响应式数据的两种主要方式。虽然它们都能实现响应式，但在使用场景和行为上存在一些重要区别。本文将详细探讨这两种API的异同点，帮助开发者更好地理解和使用它们。

ref和reactive的基本概念

ref

ref用于创建一个响应式的引用对象，它可以包装任何类型的值（基本类型或对象类型）。ref返回的对象有一个.value属性，指向内部的值。