写结构的时候注意，父元素的三列必须先写中间框。因为要先渲染中间的盒子~并设置它的适配，即width:100%。第2步：给每个框样式header{width:100%;height:40px;background-color:darkseagreen;}.container{height:200px;overflow:hidden;}.middle{width:100%;height:200px;背景颜色：deeppink；浮动：左；}.left{宽度：200px；高度：200px；背景颜色：蓝色；浮动：左；}.right{宽度：200px；高度：200px；背景颜色：暗兰花；浮动：左；}页脚{宽度：100%；height:30px;background-color:darkslategray;}第三步：看此时的效果图，可以看到三列在父元素Display中不是一行，因为中间的框我们给了100%的宽度.所有左右框都将被挤压。那么如何让它们呈现出一行三列的效果呢？然后让左边的盒子走到中间盒子的最左边，右边的盒子走到中间盒子的最右边。换个思路，如果中间的框不是100%宽，那么按照文档流，左边的框一定要显示在中间的框后面，才会显示右边的框。但是现在中间的框是全屏的，所以左右两个框都挤到下一行显示了。我们要做的就是让左右箱子都上去。这时，CSS负边距就该发挥作用了。第四步：使用负边距布局1、要让左边的框上去，需要设置左边距为负的中间框的宽度，即.left{margin-left:-100%;}。这样，左边的盒子就可以移动到最左边。2.要让右边的盒子往上走，需要给它自己的宽度设置一个负的左边距，即.right{margin-left:-200px;}。这样右边的框就可以显示在该行的最右边。第五步：看此时的效果图第六步：让中间的自适应框安全显示第一：使用父元素设置左右padding的值，挤压父的三个子框到中间。代码如下：.container{padding:0200px;}这里的200px是左右框的宽度。效果如下：我们可以看到左右两边的内边距是有的，但是中间框的内容还是被压住了。第二：给左右框加一个定位。添加定位后，可以为左右框设置左右值。代码如下：.left{position:relative;左：-200px;}.right{位置：相对;右：-210px；现在，圣杯布局终于搞定了，达到了我们想要的效果。左右框固定，中间框自适应，中间框内容完全不受影响。你也明白吗？衷心希望对您有所帮助。