假双飞翼布局和圣杯布局

假双飞翼布局和圣杯布局（超超超基础，大佬勿喷）

第一次发博客灰常的紧张，要是有什么问题各位大佬可一定要即使指出鸭，我可不想误导他人！！感谢啦！

然后的话分享一下我今天刚刚学会的基础的双飞翼布局和圣杯布局，正好趁热乎我也赶紧来再看一遍,因为初学,先是看了博客大佬的一些列子表示一脸蒙蔽,现在来分享一下自己的理解,对于最基础的版本

双飞翼布局：

先贴上我们的HTML代码主题,灰常的简单

		<div id="left"></div>
    	<div id="right"></div>
    	<div id="center"></div>

这里的话是定义了三块,左边的,右边的,和中间的

然后贴上CSS的代码:

		*{margin: 0px; padding: 0px;}
		/* 用通配选择器去掉所有元素自带的内边距和外边距*/
        body,html{height: 100%;min-width: 400px;}
        /* 设置body和html的高度为100%,然后加了个最低的宽度为400px,也就是一直向内部收缩最多缩到400px,目的是为了保证上面粮库浮动的元素不会因为不够宽而掉到下一行去了 */
		#left{width: 200px;height: 100%;background-color: red;float: left;mie}
		/* 这里的话是给左边的块设置的样式,宽度定义了200px,高度的话100%,背景颜色红色,然后让他向左边浮动 */
        #right{width: 200px;height: 100%;background-color: blue;float: right;}
        /* 这里的话是给右边的块设置的样式,宽度定义了200px,高度也是100%,背景颜色红色,然后让他向右浮动
        写到这里的话两个块一个在左边,一个在右边,顶高,200px,颜色不同 */
        #center{width: 100%;height: 100%;background-color: yellow;}
        /* 然后就是给主体设hi一个宽度和高度都是顶边的,背景颜色是黄色*/
        

我对这个的理解呢就是首先定义了两个块,然后他们左右浮动起来之后处于一行中,一个靠左,一个靠右
然后由于这俩都浮动起来了,不占文档流,因此下面的一个center就可以任然从屏幕的左上角开始铺一直平铺到右边.但是这里有个坑就是 你的html必须先写左右,然后再写中间的部分.因为如果你按照顺序来写的话,左 中 右这样写那么虽然左边的浮动了不占文档流,但是中间的没有浮动,他占了文档流并且把文档流下拉了位置,因此会导致你右边的那块虽然写了右浮动却没法到上面那一行,只能在第二行的右边
反正这个坑我是入了,研究了挺久的吧

圣杯布局

然后就是来说一下圣杯布局了

	<div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>

先贴出来了html的代码,一样定义了三个块,只是这次并没有改变顺序之类的,或者 换句话说你可以随意改变顺序

然后是css的代码

	.left{width:200px;height:100%;background:#f00;position:absolute;}
	.right{width:200px;height:100%;background:#ff0;position:absolute;right:0px;}
	.center{background:#0ff;position:absolute;height:100%;left:200px;right:200px;}

这个的CSS代码也没有什么好解释的,
主要就说明一下实现的思路吧,给每一个块我都添加了一个postion:absolute也就是绝对定位
然后是给右边的块加了一个right:0px,也就是让这一块的位置跑到了右边去,随后就是给中间那一块书写了,用了left:200px;right:200px;,让这个块距离左边200px,距离右边也是200px,这样的话,这个块就会被拉伸了,那么这就是圣杯布局.

第一次分享内容鸭,有何很多的问题和不足,大佬莫怪!有什么问题也请多多指出!