老师,如何理解margin-left:-220px;right:-220px;

老师,如何理解margin-left:-220px;right:-220px;

 }

    .right{width:220px;

           background:#30a457;

           margin-left:-220px;

           right:-220px;}


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕夭夭 2020-09-28 16:29:24

同学你好,参考如下理解:

本来左中右三个盒子设置左浮动,应该在同一行显示的。但是中间的盒子设置宽度100%,左右两个小盒子被挤到第二行了。所以如果设置间距,让小盒子强制往左移动,就会回到第一行。右侧的盒子right先设置margin-left为-220px(负值为反方向移动),就是往左侧移动220px。

http://img1.sycdn.imooc.com//climg/5f719d9809717afc11650630.jpg

往左侧移动220px之后,就回到了第一行。右侧空白区域是父元素的padding区域,小盒子设置margin是无法移动到padding区域的。

http://img1.sycdn.imooc.com//climg/5f719e6409a5937811500362.jpg

所以又结合定位,设置   right: -220px,让小盒子往右侧移动,覆盖在父元素的padding区域。

http://img1.sycdn.imooc.com//climg/5f719e6f09f2e33911800360.jpg

圣杯布局比较难理解,可以跟着课程练习一下代码,做完每一步,去浏览器看看实现的效果,会好理解一点。另外,本课程讲解的布局案例在实际开发中是不常用的,简单的练习,作为课外了解即可。

如果我的回答帮到了你,欢迎采纳,祝学习愉快~

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师