                        课程
                    
                        /前端开发
                        
                            /Bootstrap
                        
                        /玩转Bootstrap（基础）

为什么隐藏标签要用这么多的css?

.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}

这些属性都起到什么作用？

门内的野蛮人

2015-12-24

源自：玩转Bootstrap（基础） 3-3

关注问题我要回答

1092

操作

收起

4 回答

胡博晗
2018-08-29

个人理解啊！如果不设置高度和宽度，那么模块的尺寸就会随着内容而改变，则无法对内容进行控制，并且隐藏，需要手动为他设置一个大小，即为宽高都是1，无论多少内容只在这个1内显示。最后通过margin属性把这个内容变为无法显示。

0 回复有任何疑惑可以回复我~

收起回答

专长写BUG
2018-05-25

emmm..不知道对不对,猜的:

绝对定位让label脱离文档流.

让宽高都是1px,内边距为0.也就是说,label元素现在没有内边距没有border.

然后设置负外边距margin:-1px.负的外边距导致label标签被其原本位置的其他元素覆盖1px,因为label本身高度和宽度都为1px,也就是label元素会被完全覆盖.这就实现了label的隐藏效果.

0 回复有任何疑惑可以回复我~

收起回答

门内的野蛮人提问者
2015-12-24

不是这个意思我知道，他为什么要把宽高设为1px,padding为0,margin设为-1px，还加上绝对定位呢

1 回复有任何疑惑可以回复我~

收起回答

有心寻性
2015-12-24

position这是定位的 absolute代表绝对定位

width,height宽高

padding,margin盒模型的各种边距(这两个属性自己多实验几次就能懂了)

border是边框

overflow:hidden这句话代表超出容器的内容不显示

clip是图片剪裁,rect(0,0,0,0)就等于把图片剪没了- -.

还有哪里不懂可以继续问,懂了请把积分送我~!

1 回复有任何疑惑可以回复我~

收起回答

0/150

提交

取消

玩转Bootstrap（基础）

参与学习 314544 人
解答问题 2275 个

告诉你使用Bootstrap，并且能够独立定制出适合自己的Bootstrap

进入课程

本课相似问答

1 回答为什么这节里的pre标签内的ul和li标签使用了<>

3 回答为什么要写入一个lebel标签

1 回答为什么按钮不能用input标签

1 回答什么时候会用到jumbotron这个标签？

3 回答为什么<form>标签里要加 role属性？

搜索更多本课相关问答

为什么隐藏标签要用这么多的css?

我要回答关注问题

热搜

最近搜索清空

为什么隐藏标签要用这么多的css?

4 回答

本课相似问答

为什么隐藏标签要用这么多的css?