问下老师，margin-left,margin-right负值的问题
.left设置 margin-left: -220px和margin-right: -220px时，盒子是怎样运动的？为什么margin-right: -220px时，.left可以占据 .con的padding的位置（.left在 .con内容框之外）；而margin-left: -220px时， .left没有占据padding位置只是在 .con内容框以内呢？
我的head和foot宽度有问题
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style>
*{
padding:0;
margin:0;
}
.header,.foot{
width:100%;
height:100px;
background:gray;
text-align:center;
line-height:100px;
}
.con{
height:800px;
width:100%;
padding:0px 200px 0px 220px;
}
.left{
width:220px;
background:blue;
height:200px;
}
.right{
width:200px;
background:yellow;
height:200px;
}
.middle{
background:red;
width:100%;
height:200px;
}
.middle,.left,.right{
float:left;
position:relative;
}
.left{
margin-right:-220px;
/*left:-220px;*/
}
.right{
/*margin-right:-250px;*/
}
</style>
</head>
<body>
<div class="header">header</div>
<div class="con">
<div class="middle">这是中间内容这是中间内容这是中间内容这是中间内容这是中间内容这是中间内容这是中间内容这是中间内容</div>
<div class="left">这是左边内容这是左边内容</div>
<div class="right">这是右边内容这是右边内容</div>
</div>
<div class="foot">foot</div>
</body>
</html>
正在回答 回答被采纳积分+1
同学你好。
1、这里先纠正一个问题 . 中间的大盒子.con设置宽度100% , 在加上padding ,会超出100%出现横向滚动条的 . 如下:
圣杯布局里面 ,大盒子不需要设置宽度100% , 要去掉哦
2、 三个盒子本身设置浮动 ,应该在一行浮动 ,但是中间的盒子设置宽度100% , 把两个小盒子挤下去了 . 所以它们是被迫挤下去的 ：
这里可以想象一下 ,如果中间的盒子宽度比较小 ,left应该紧挨着middle .当你让left往左移动 , 那么它就会覆盖在middle上 , margin-left:-220px就是往左移动 ,所以盖在了中间盒子上：
当设置margin-right:-220px , 它就会往右移动跑到了父元素的padding上：
3、顶部和底部的宽度是没有问题的哦，如下：
如果帮助到了你，欢迎采纳。
祝学习愉快！
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星