老师,如何理解margin-left:-220px;right:-220px;
}
.right{width:220px;
background:#30a457;
margin-left:-220px;
right:-220px;}
8
收起
正在回答 回答被采纳积分+1
1回答
好帮手慕夭夭
2020-09-28 16:29:24
同学你好,参考如下理解:
本来左中右三个盒子设置左浮动,应该在同一行显示的。但是中间的盒子设置宽度100%,左右两个小盒子被挤到第二行了。所以如果设置间距,让小盒子强制往左移动,就会回到第一行。右侧的盒子right先设置margin-left为-220px(负值为反方向移动),就是往左侧移动220px。
往左侧移动220px之后,就回到了第一行。右侧空白区域是父元素的padding区域,小盒子设置margin是无法移动到padding区域的。
所以又结合定位,设置 right: -220px,让小盒子往右侧移动,覆盖在父元素的padding区域。
圣杯布局比较难理解,可以跟着课程练习一下代码,做完每一步,去浏览器看看实现的效果,会好理解一点。另外,本课程讲解的布局案例在实际开发中是不常用的,简单的练习,作为课外了解即可。
如果我的回答帮到了你,欢迎采纳,祝学习愉快~
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星