关于圣杯布局理解与疑问？

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style type="text/css">
.header,.footer{
width: 100%;
height: 100px;
font-size: 20px;
line-height: 100px;
text-align: center;
background-color: #eee;
}
.main{

min-height: 500px;
background-color: green;
padding: 0 220px 0 200px;
}
.middle,.left,.right{
float: left;
position: relative;
min-height: 500px;
}
.middle{
width: 30%;
background-color: #ddd;
}
.left{
margin-left: -30%;
width: 200px;
left: -200px;
background-color: red;

}
.right{
width: 220px;
background-color: blue;
/*margin-left: -220px;
right: -220px;*/
/*margin-right: -220px;*/
}

</style>
</head>

<body>
<div class="header">这是头部</div>
<div class="main">
<div class="middle">这是中间部分，最先渲染</div>
<div class="left">左边</div>
<div class="right">右边</div>
</div>
<div class="footer">这是尾部</div>

</body>
</html>

分析：

1.假设我们给中间的middle的宽度不设置为100%，而是设置为30%，当main的空间足够的时候，三个都使用了flat:left;会一行依次排列

（注意：main的实际宽度为出去两边padding的宽度）如图

2.当我给left使用了margin-left:-30%;也就是middle的宽度以后，出现以下布局：

left部分向左移动middle的宽度，到达middle的最左侧，与最左侧对齐

注意：此时的right并不是跟随left一起移动，而是紧挨着middle部分，与middle相邻

3.由此可得：如果此时middle的宽度是100%的话，

left部分再使用left：-200px;刚好填充main左侧的padding部分

4.而right部分，使用 margin-right:-220px;即刚好可以填充mian右侧的padding部分

对于方法2：margin-left:-220px; 这里使用这样仅仅是为了使right部分在mian空间不够的情况下，从下面移动到上面middle的右侧，与middle的最右侧对齐

然后再使用 right:-220px；向右移动填充mian的右padding

【注意：如果mian空间足够的话，实际上是没移动的！】

不知道这样理解对不对：

疑问：按html布局的话，right的左侧应该是left的，为什么left使用了margin-left:-30%;之后，right紧邻着middle，而此时的margin也是相对middle的

装完B就跑_真刺激 2018-01-10

源自：CSS网页布局基础 3-1 圣杯布局

收起

3回答

好帮手慕糖 2018-01-10 17:49:30

你好，margin属性是设置一个元素的外边距，简单来说，就是相邻元素之间的间距，这里由于值是负数，才导致看起来像是元素在移动。本身是不移动的。

祝学习愉快~

收起回答

好帮手慕糖 2018-01-10 14:17:06

你好，这里说的相对于父元素，主要是说30%，这个值，是父元素的30%，这个百分数是相对于父元素的。

祝学习愉快~

收起回答

提问者装完B就跑_真刺激 #1

这点我能理解，我就是这样测试的，这里的30%都是相对父元素main的，最后对于right，当left使用margin-left：-30%移动走后，right的左侧是middle，右侧就是父元素了，可以理解为此时right使用margin-right：-220px;就是相对父元素main来移动了，因为右侧已经没div了，这样理解对吗？还是说margin属性一直都是相对自身原来的位置来移动的，相对自身的应该是position属性吧？有点混

2018-01-10 17:44:05
提问者装完B就跑_真刺激 #2

这点我能理解，我就是这样测试的，这里的30%都是相对父元素main的，最后对于right，当left使用margin-left：-30%移动走后，right的左侧是middle，右侧就是父元素了，可以理解为此时right使用margin-right：-220px;就是相对父元素main来移动了，因为右侧已经没div了，这样理解对吗？还是说margin属性一直都是相对自身原来的位置来移动的，相对自身的应该是position属性吧？有点混

2018-01-10 17:45:27

好帮手慕糖 2018-01-10 13:55:14

你好，理解没有问的，另关于你的问题：按html布局的话，right的左侧应该是left的，这中是正常情况，就跟你测试的，正常情况下，right的左侧是left，但是你给left设置了margin-left:-30%，把它移走了，就好像原本有1,2,3这样排序的三个数，你把2移走了，那么3前面就是1了呀，3并没有设置什么，不能跟着一块移走呀，这里的margin的百分比是相对于父级的，margin-left: -30%;是父级middle的30%，而middle的宽度又是父级的30%，这里只是数值正好相等哦。

祝学习愉快~

收起回答