圣杯布局与双飞翼布局

圣杯布局：

.header{
width: 100%;
height: 30px;
background: red;
}
.content{
overflow: hidden;
padding: 0 100px;
}
.footer{
width: 100%;
height: 30px;
background: red;
}
.middle{
position: relative;
width: 100%;
float: left;
height: 80px;
background: green;
}
.left{
position:relative;
width: 100px;
float: left;
left: -100px;
height: 80px;
margin-left: -100%;
background: yellow;
}
.right{
position: relative;
width: 100px;
float: left;
right: -100px;
height: 80px;
margin-left: -100px;
background: pink;
}

在这里插入图片描述

其中margin-left：-100%的作用是使left上移，
去掉left的margin-left将会是这种结果：

我们可以看到圣杯布局当中有相对定位，如果把相对定位和left去掉的话，那么left在元素当中的位置就在：

所以我们添加相对定位和left属性使其往左移100px

双飞翼布局：

.header {
width: 100%;
height: 30px;
background-color: red;
}
.content {
overflow: hidden;
}
.footer {
width: 100%;
height: 30px;
background-color: red;
}
.middle {
width: 100%;
float: left;
}
.inner-middle {
width: 100%;
height: 80px;
background-color: green;
}
.left {
width: 100px;
float: left;
height: 80px;
margin-left: -100%;
background: yellow;
}
.right {
width: 100px;
float: left;
height: 80px;
margin-left: -100px;
background: pink
}

如果去掉left的margin-left：

left将与right重叠

如果去掉right的margin-left：

关于负边距：
会使元素在文档流中的位置发生偏移，但是这种偏移不同于相对定位，相对定位的偏移它偏移后仍然会占据原来的空间，不让其他元素趁虚而入。但是通过负边距进行偏移的元素，它会放弃偏移前占据的空间。需要注意的是文档流只能向左或者是向上流动。

当元素没有设定宽度，或者宽度为auto的时候，负边距会增加元素的宽度。
举个例子：

• 子元素1
• 子元素2
• 子元素3
• 子元素4
• 子元素5
• 子元素6
• 子元素7
• 子元素8

body,ul,li{
padding: 0;
margin: 0;
}
ul,li{
list-style: none;
}
.container{
height: 210px;
width: 460px;
border: 5px solid black;
}
ul
{
height: 210px;
overflow: hidden;
margin-right: -20px;
}
li{
width: 100px;
height: 100px;
background: red;
float: left;
margin-right: 20px;
margin-bottom: 10px;
}
结果：

因为每个块的大小是100，margin-right是20，所以如果没有给ul增加宽度的话，块加间隔的长度为480，而ul的宽度是460，所以容纳不了，结果就会变成：

负边距对浮动元素的影响：
三个向左浮动的元素，宽高都是100px：
正常的应该是这样的：

如果给他们都设置一个margin-right:-50px,那么就会出现：

我们把浏览器缩小了，然后因为宽度不够，元素3掉下来了。我们给元素3设一个margin-left:-80px;看看会怎么样


这时我们看到元素3上去了，而且还覆盖了元素2的一部分

继续元素3设为margin-left:-100px

负边距对绝对定位元素的影响：
绝对定位的元素定义的top、right、bottom、left等值是元素自身的边界到最近的已定位的祖先元素的距离，这个元素自身的边界指的就是margin定义的边界，所以，如果margin为正的时候，那它的边界是向外扩的，如果margin为负的时候，则它的边界是向里收的
我们可以利用这点来实现居中（缺点是必须要知道自身的高度（垂直居中）或宽度（水平居中））