圣杯/双飞翼布局

本身虽然经历着web应用的开发,老是拿着别人写好的Css来引用到本身的项目当中,甚至一度迷上了bootstrap,发现有了它本身能够不用在写程序逻辑的同时还要去修改别人的CSS.固然开发的应用大多数是企业内部应用,个别互联网的程序.2016偶然的机会接触到前端这个概念,发现本身仍是挺喜欢前端的这些知识的.空闲之余,便本身学习了起来.好了废话不说了,先把学习到的这些知识记录下来今天的内容是 --圣杯 & 双飞翼布局

圣杯布局来自国外,你们能够本身找度娘看下,而双飞翼布局则源自于淘宝UED团队.它俩之间其实都一回事,只是在实现思想上有些不一样,都是解决一个经典问题,三栏布局,两边固定宽度,中间自适应.上代码再解释.

圣杯:

第一步:html内容结构:注意,名为main的div要放置第一行优先渲染

　　　　　　

第二步:当前每一个div给出相应样式

　　　　　　

当前面页效果:

 　　　　　　

因为三个div设置了浮动,中间100%宽度,因此把左右两个div给挤到下面去了. 然而正是圣杯布局该上场了.分别设置left的盒子左距为margin-left:-100%;右边(right)盒子margin-left:-100px;效果以下

　　　　　　

此时三个盒子都是浮动的,并且"我是左"的盒子骑到了人家"我是中间"的头上,把字都给覆盖了.可咱们想要的结果是我是左就在左,我是右就在右边,我是中间就在中间,且"我是中间"的文字不该被遮住.但这里还有个疑问,为何左边的left要设置margin-left的方向是-100%呢?而右边的right只是设置成了-100px呢?,能够试着将left的负边距设置为margin-left不停的向负方向增长,看效果就明白,若是一直是以负方向的增长,那么left的盒子会一直往左方向移动,直接在自己宽度(150)与移动的长度相一致,你会看不到这个盒子了,其实这个时候它已然移动上方去了,若是你再试着将这个值增长一点就会看到,以下图

　　　　　　

是能够看到这个盒子正一点点的向左移动,这个值能够任意的调,发现挺有意思的.同理右边的盒子也是设置margin-left,设置多少为合适,由于右边的盒子是100px的宽度,只须要向负方向设置-100px便可.

　　　　　　

接下来是解决中间的部分不该被遮挡的问题.那么圣杯布局的做用来了,首先咱们须要把人家两边盒子所须要的空间给预留出来.左边是150px,右边是100px,利用padding-left以及padding-right.以下样式,注意:这个预留位置是设置在container上的.

　　　　　　

　　　　　　

这时咱们把left的盒子设置定位position:relative,在相对于本身的位置向左再移动-150px这时左边的盒子就跑到左边去了,以下完整代码截图,注意红框内的设置

　　　　　　

页面效果

　　　　　　

这样中间的几个盒子高度没有设,有点不太明显,这里没设,主要是想接下来我们完成一个等高布局设定.例如咱们把中间的内容给增长一些

　　　　　　

 

 　　　　　　

此时中间高度是拉开了,但左右两边没有与中间保持一致,这里咱们能够利用一个方法(margin-bottom和padding-bottom)来完成,代码下如

　　　　　　

这样一放再一收确实也能够达到等高效果.以下

　　　　　　

酱紫基本上圣杯布局算是完成了,其实咱们还有更简便的方法,那就是下面的"双飞翼"布局,双飞翼最大的特色是在我是中间的盒子里再增长一个div,下面给出两种布局的完整css代码,

　　　　　　　　　　　　

　　　　　　

到这里基本上完成了圣杯布局与双飞翼布的学习.

到这里也许有个疑问．这两种到底有啥区别？用在什么地方？如今都有流行的Bootstrap了．．． 

我只能把个人理解说下，例如对圣杯布局中的某一块(div="main")的调整为position:absolute，那么刚刚写的那个圣杯布局就挂掉了．还有就是这个是纯粹学习前端知识，别在写前端页面时动不动上来就弄个bootstrap或是弹性布局，

要知道若是一个公司要开发适配各类浏览器(包括IE6,7,8,9)时该若是去作呢．固然也许会有其余方法．．．．．