Bootstrap中.sr-only的作用，属性效果以及源码分析，附带clip的解释

Bootstrap3中.sr-only的作用，属性效果以及源码分析

Bootstrap基于3.3.7版本

我们来看一下网上对这个类的解释：
全称是 screen reader only，意为：（仅供）屏幕阅读器，这个 class 主要用于增强 accessbility（可访问性）。
有时候 UI上会出现一些仅供视觉识别的元素，比如说“汉堡包菜单按钮”，只有视力正常的人才能清楚辨识这些元素的作用。
而残障人士，比如弱势或盲人是不可能知道这些视觉识别元素是什么的。
他们上网使用的是屏幕阅读器，也就是 screen reader（sr），屏幕阅读器需要找到能辨识的文本说明然后“读”出来给用户听。
问题是图形元素怎么可能“读出来”呢？
因此我们还要写上这些元素的文本说明，但是又不需要展示给普通用户看到，于是加上 sr-only 的意义就在于能保证屏幕阅读器正确读取且不会影响 UI 的视觉呈现。

那我们再来看一下.sr-only属性的源码：
.sr-only{
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
border:0;
}

这个属性的最主要的效果就是隐藏标签

可以看到，第一个属性是position:absolute;（绝对定位），用来使标签脱离文档流；width:1px;（宽），height:1px;（高），这里设置为1px，是因为需要把这个标签的的宽高设的很小，加上margin:-1px;（外边距）辅助，这个标签就不会在页面上占位置了。

重点讲一下clip属性：
clip:rect (top, right, bottom, left)；
注意：这个使用这个属性一定要加绝对定位（position:absolute;）
有人无法理解这个属性的意思，甚至不知道为什么他们的属性值为什么不能设置成一样的。我有我的个人理解：rect (top, right, bottom, left)，第一个和最后一个表示的是上边（top）剪切多少，左边（left）剪切多少，而中间两个属性表示从左往右（right）显示多少，从上往下（bottom）显示多少，第一个和最后一个优先级大，就是说如果属性值一样，就是显示多少就被剪切多少。

回到正题，这个类设置了这个clip:rect(0,0,0,0);也是一种把标签文本隐藏的属性，至于为什么要设两种不同的隐藏方式，可能是为了对应行元素和块级元素，因为行元素不能设置宽高，必须变成块级元素才可以设置宽高。

所以总结起来就是，这个属性的作用就是隐藏一个标签。。。