用css视觉隐藏内容：负数极大值、display、visibility、0px 四者的区别

用css视觉隐藏内容：

.sr-only {
  position: absolute;
  left: -10000px;/*负数极大值*/
  width: 1px;
  height: 1px;
  top: auto;
  overflow: hidden;
}

此时，屏幕阅读器（浏览器）仍然可以访问数据，只是用户在视野里看不到而已。

而display: none;或visibility: hidden;则是为所有人隐藏内容，包括屏幕阅读器，也不能访问它。

像素大小为零，例如width: 0px; height: 0px;则是从文档流中删除该元素，这意味着屏幕阅读器将忽略它，不访问它。