学习css布局

标签：

　　科技在高速的发展，技术日新月异，不断的进步促使科学技术的发展，各项技术也在不同领域发展的很快，在web前端也在不断出现新的布局方法，这里就简单介绍圣杯布局法和负边距布局法；

　　各种布局的技术实现，被经常使用的三种技术：
　　1.浮动 float
　　2.负边距 negative margin
　　3.相对定位 relative position
　　利用浮动元素的负边距来定位
　　利用相对定位调整位置

　　布局是页面重构中最重要的东西，骨架有了，其他都好办……

　　1、负边距布局法：

　　　　1. 两栏式布局法（两边栏不动，中间动效果）
   　　　 2. 三栏式布局法；

　　　　3.都是通过magin来实现

 　　2、圣杯布局法 
        1. 中间三栏布局div排列顺序是中→左→右；
        2. 首先要三栏设置padding，作用是将左右的位置腾出来
        3. 其中两边距离是等于需要插入的div的宽度，
        4. 左边的就用负边距margin-left：-100%；并且right=边距
        5. 右边就用margin-right：-边距；
        5. 需要在三栏设置相对定位；并且全部浮动，并且padding-bottom-/+10000px；overflow：hidden;
        6. 为防止浏览器放大缩小对边框影响；设置缩小最小宽度：在全局中设置min-width最小值 ；并且最小值需要根据left和right的宽度进行微调

学习css布局

标签：

原文地址：http://www.cnblogs.com/gong-ping/p/4676728.html