为什么隐藏标签要用这么多的css?
来源：3-3 内联表单
门内的野蛮人
2015-12-24 13:34
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}这些属性都起到什么作用？
写回答
关注
4回答
-
- 胡博晗
- 2018-08-29 21:31:18
个人理解啊！如果不设置高度和宽度，那么模块的尺寸就会随着内容而改变，则无法对内容进行控制，并且隐藏，需要手动为他设置一个大小，即为宽高都是1，无论多少内容只在这个1内显示。最后通过margin属性把这个内容变为无法显示。
-
- 专长写BUG
- 2018-05-25 17:33:06
emmm..不知道对不对,猜的:
绝对定位让label脱离文档流.
让宽高都是1px,内边距为0.也就是说,label元素现在没有内边距没有border.
然后设置负外边距margin:-1px.负的外边距导致label标签被其原本位置的其他元素覆盖1px,因为label本身高度和宽度都为1px,也就是label元素会被完全覆盖.这就实现了label的隐藏效果.
-
- 门内的野蛮人
- 2015-12-24 16:29:00
不是这个意思我知道，他为什么要把宽高设为1px,padding为0,margin设为-1px，还加上绝对定位呢
-
- 有心寻性
- 2015-12-24 14:43:28
position这是定位的 absolute代表绝对定位
width,height宽高
padding,margin盒模型的各种边距(这两个属性自己多实验几次就能懂了)
border是边框
overflow:hidden这句话代表超出容器的内容不显示
clip是图片剪裁,rect(0,0,0,0)就等于把图片剪没了- -.
还有哪里不懂可以继续问,懂了请把积分送我~!
玩转Bootstrap（基础）
告诉你使用Bootstrap，并且能够独立定制出适合自己的Bootstrap
314546 学习 · 2275 问题
相似问题
为什么要写入一个lebel标签
回答 3
为什么按钮不能用input标签
回答 1