css两种好用的布局

一，圣杯布局

 

收集一篇文章《我是如何同时拿到阿里和腾讯offer的》http://www.cnblogs.com/yuanzm/p/4372898.html
首先谈谈三栏布局：

 

圣杯布局实现的步骤：

     1，html结构

 

设置中间栏宽度 100%  侧边栏定宽         普通三行显示

2，设置三个div向左浮动

为什么要向左浮动呢？

因为最初知道的想要让块级元素在一行显示，通过：浮动->脱离文档流->设置外边距 。                     没有达到效果？ 由于main设置宽度100%  后面两个div被挤到了下一行

3,为两栏添加负margin，用来调整位置，左边div设置margin-left:-100%    右边div设置margin-left:-自身宽度(利用了浮动元素的margin负到一定的值后会使其自身移动到上一行的原理)

4，左右两个div跑到了主div上面？（原因：主div宽100%）  主div宽=ct宽

   设margin值  为ct左右留白  ？（空出左右两栏的位置）   所以margin的值依据左右两栏的宽度        

5，使左右两栏移动到空白区域？

      1)左中右设置 相对定位 position:relative (利用了相对定位相对于父容器移动的原理)

      2)再设置  右div （right:-310px）  左div(left:-210px)                get!成功把左右两个div移到左右两边了，而且还有舒服的间距

严重问题出来了，当浏览器宽度缩小，布局->乱

why??  

浏览器宽度缩小   ct宽度缩小  没有能力包含左右两个定宽div   左右两个定宽div不得不换行

怎么办？

设置 ct的最小宽度=左右两个中的最大宽度

 

 6，圣杯布局代码预览

二，为什么双飞翼比圣杯布局好？

1，进行到这一步

2，在main里面添加一个div容器content  为它设置外边距（利用边距重合的原理撑开外部ct这个div的宽度）

为什么选择添加div并为它设置margin?

  因为main这个div宽度100%，不可能设置它的margin值

为什么要撑开？

让左右两个div流动到左右两边