双飞翼HTML圣杯布局,关于圣杯布局与双飞翼布局的理解

html>

圣杯布局

*{margin: 0;

padding: 0;}

body{width: 100%;

margin: 0 auto;

height: 800px;}

.middle,.left,.right{float: left;}

.head,.foot{background: pink;

height: 100px;

text-align: center;

line-height: 100px;

font-size: 32px;

float: left;

width: 100%}

.main{padding-left: 300px;

padding-right: 250px;}

.middle{background: red;

height: 600px;

width: 100%;}

.left{background: yellow;

width: 300px;

height: 600px;

margin-left: -100%;

position: relative;

left: -300px;}

.right{background: blue;

height: 600px;

width: 250px;

margin-left: -250px;

position: relative;

right: -250px;}

这是页面的头部

这是页面主体的中间

这是页面主体的左侧

这是页面主体的右侧

这是页面的尾部

html>

双飞翼布局

*{margin: 0;

padding: 0;}

body{width: 100%;

margin: 0 auto;

height: 800px;}

.head,.foot{width: 100%;

float: left;

text-align: center;

line-height: 100px;

height: 100px;

background: pink;

font-size: 32px;}

.main,.left,.right{float: left;

height: 600px;}

.main{width: 100%;}

.left{width: 300px;

background: yellow;

margin-left: -100%;}

.right{background: blue;

width: 250px;

margin-left: -250px;}

.main-continer{margin-left: 300px;

margin-right: 250px;

background: red;

height: 600px;}

这是页面的头部

这是页面主体中间部分的容器

这是页面主体的左侧

这是页面主体的右侧

这是页面的尾部

可以这样理解吗

圣杯布局左右两部分所占的位置实际是中间最大div内的左右padding(内边距)；

双飞翼布局左右两部分所占的位置实际是中间最大div中的子元素div左右margin(外边距)。

那这个既然效果都是一样的，在实际开发中有什么区别呢？