                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /css定位 position

如果同时出现left和right或者top和bottom会按照怎样的规则？

如果同时设置了

left和right

或者

top和bottom

会按照怎样的规则？

按照我的测试，似乎left优先于right，top优先于bottom。这样理解对吗？但是在浏览器的调试的Style里看到right和bottom并没有被划掉，为什么呢？

慕前端3151062

2018-11-13

源自：css定位 position 2-3

关注问题我要回答

2265

操作

收起

3 回答

panzp 回答被采纳 +2 积分
2019-03-10

在设置了宽高的情况下，是left优先于right，top优先于bottom；

没设置宽高时，4个属性都设置的话，都会生效，宽高自动拉伸。

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

收起回答

hello_mygirl
2019-07-11

只要设置了position relative ，left，right ，top，bottom四个值都设置了的时候，在没设置宽高，left，top值生效，盒子宽度等于上一级盒子宽度，没有上一级盒子就是浏览器的宽度（默认），如果设置了，left,top的优先级大于right bottom

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

收起回答

慕粉7555160
2018-11-16

在css样式中是由顺序的上右下左

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

收起回答

qq_Extranjero4337875

我一直同时设置这四个样式来撑满整个父容器啊

2019-02-13 回复有任何疑惑可以回复我~

慕前端3151062 提问者回复 qq_Extranjero4337875

也可以用width:100%;height:100%吗？

2019-03-27 回复有任何疑惑可以回复我~

会游泳的兔子先森回复慕前端3151062 提问者

如果给个padding:30px的话，width:100%;height:100%；这种情况下盒子的尺寸就会增加上下左右各增加30px；就会撑开父元素的宽高了。

2019-03-27 回复有任何疑惑可以回复我~

查看1条回复

0/150

提交

取消

css定位 position

参与学习 49043 人
解答问题 92 个

老师带你了解CSS中定位的知识，并运用到实际案例中。

进入课程

本课相似问答

1 回答left,right

4 回答为什么绝对定位没有写left,bottom之类的还是按照正常的文档流来的

2 回答改变left、top不移动，怎么回事？

4 回答position:relative right:50px top:0为什么是div向左移动50px

2 回答为什么和老师写的一样，但是效果图不一样

搜索更多本课相关问答

如果同时出现left和right或者top和bottom会按照怎样的规则？

我要回答关注问题

热搜

最近搜索清空

如果同时出现left和right或者top和bottom会按照怎样的规则？

3 回答

本课相似问答

如果同时出现left和right或者top和bottom会按照怎样的规则？