【CSS】圣杯布局实现1

圣杯布局：

什么是圣杯布局？三栏布局，左右两栏随着浏览器缩放宽度不变，中间栏自适应

知识点：浮动、定位、padding和margin的区别

我没有使用大部分教程的方法，但是效果相同。步骤如下：

第一步.定义基本结构和样式

	
	



	
中间栏
	
左边栏
	
右边栏

效果图

 

 

因为中间main的宽度占据了100%，所以剩下的两个div块级元素自动换行被挤到下面来了。

第二步，我们要把它们放在同一行，所以就是为main、left、right加上float：right。

效果图

表明浮动有效，只不过还是同样的原因。

第三步，使用定位，由于绝对定位是脱离标准流的，所以会浮在蓝色块上方。但是仅仅使用position是不行的，还要为left和right加上边偏移，left:0或者right:0。

效果图

已经初有成效了，但是问题在哪儿，中间栏的文字被遮挡，本质就是被左右两块覆盖了，所以现在要让main移动到中间来。

第四步，此时是使用margin还是padding？答案是padding，因为使用margin后在原来100%的基础上加上宽度便会出现滚动条。

效果图

 

 

内容成功显示，浏览器缩放之后依然符合要求。

完整源代码

	
	



	
中间栏
	
左边栏
	
右边栏