方法一：display:none

原理：从DOM树中将该元素去除
因为浏览器是将HTML文档解析转换成DOM树，再通过添加样式等操作将元素渲染给用户，如果从DOM树中去除，就跟代码中没写这个元素一样

• 特点：元素不可见，不占据布局，无法响应事件

  方法二：visibility:hidden

  原理：通过样式隐藏该元素
  正如visibility的含义，只是从视觉上进行隐藏，其元素已经位于DOM树中，因此依旧会占据布局，同时绑定于该元素的事件不会触发

• 特点：元素不可见，占据布局，无法响应事件

  方法三：opacity:0

  原理：通过样式设置元素透明度为0
  虽然此方法也是从视觉上进行隐藏，但这个比方法二更像是真正的“仅从视觉上隐藏”，该方法隐藏的元素不仅会占据布局，绑定的事件依旧触发

• 特点：元素不可见，占据布局，可相应事件

  方法四：width:0;height:0/transform: scale(0,0)

  原理：通过宽高将元素缩小至不可见

• 特点：元素不可见，不占据布局，无法相应事件

  方法五：偏移

  原理：将元素偏移至浏览器视口外，从而达到隐藏效果
  偏移方法很多margin,transform,position+top/right/bottom/left

• 特点：元素“不可见”，占据布局，“可相应事件”

• 双引号意思应该懂吧，其实该元素只是偏移至视口外，但元素实质没有任何改变

  方法对比

  此部分对比的比较项可能超纲了点，但无伤大雅，有兴趣的同学多学点，多问点就会了