圣杯，双飞翼等布局学习总结

以下是观摩了 萌主_iii 的博客及 阮一峰 的网络日志后的学习笔记

首先引入萌主_iii的博客内容中对圣杯及双飞翼布局的描述：

——圣杯布局与双飞翼布局针对的都是三列左右栏固定中间栏边框自适应的网页布局（想象一下圣杯是主体是加上两个耳朵；鸟儿是身体加上一对翅膀）它的布局要求有几点：

• 三列布局，中间宽度自适应，两边定宽；

• 中间栏要在浏览器中优先展示渲染；

• 允许任意列的高度最高；

1.先放圣杯的代码和图(双飞翼图也如下)

html:

		<div class="container">
		　　<div class="main">main</div>
		　　<div class="left">left</div>
		　　<div class="right">right</div>
		</div>

css:

		   *{
				margin: 0;
				padding: 0;
			}
			.main,.left,.right{
				min-height: 130px;
				float: left;
			}
			.main{
				background-color: blue;
				width: 100%;
			}
			.left{
				background-color:red;
				width: 200px;
				margin-left: -100%;
				position: relative;
				left: -200px;
			}
			.right{
				background-color:green;
				width: 300px;
				margin-left: -300px;
				position: relative;
				right: -300px;
			}
			.container{
				padding: 0 300px 0 200px;
			}

以上是其代码

圣杯：

• 整体container利用margin为左右块预留空间。 浮动让左红块和右绿块同行(因为中蓝块满宽)。
• 接着利用margin-left的负值的覆盖作用——左红块值为100%，直接上移；右绿块值为自身宽度，使其蹦到中蓝块末尾。
• 最后用position让左红块和右绿块归位。

2. 然后是双飞翼
html:

	 	<div class="container">
			<div class="main"><div class="content"><span>main</span></div></div>
			<div class="left"><span>left</span></div>
			<div class="right"><span>right</span></div>
		</div>

css:

		   *{
				margin: 0;
				padding: 0;
			}
			.left,.main,.right{
		        float: left;
		        height: 130px;
		        text-align: center; 
		    } 
		    .left{
		        margin-left: -100%;
		        background-color: red;
		        width: 200px;
		    }
		     .right{
		        margin-left: -200px;
		        background-color: green;
		        width: 200px;
		    }
		     .main{
		        background-color: blue;
		        width: 100%;
		    }
		     .content{
		        margin: 0 200px 0 200px; 
		    }

双飞翼：

(双飞翼与圣杯有相似之处)

• 都令中间块宽度占满
• 三个块都进行了浮动
• 都有margin负值的使用

但不同的地方：

• 双飞翼未用position,因为大块container未用margin留白,所以左红块和右绿块用了margin-left的相应负值直接归位。
• 而且在中蓝块中新加了内容div,给它设置margin好让内容不在左右两块中。
• 以上使得代码更为简洁。

圣杯和双飞翼的关键就是利用margin-left的负值的覆盖作用。
(而margin-right的负值是令右边元素覆盖自身(但前提要有),margin-top的负值是覆盖上边元素，margin-bottom的负值是令下边元素覆盖自身(但前提要有))

P.S.在敲圣杯时，出现了"仅空白的文本节点"，稍微困扰了一小会(￣o￣) . z Z

3.Flex

引用阮一峰老师的网络日志中： ——设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
Flex可以解决网页中的垂直居中的问题

(以下引用阮一峰老师的日志)

    .box{
      display: flex;
    }

基本概念： 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main
start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

开启Flex后，可以使用一些容器的属性有：

1. flex-direction属性决定主轴的方向（即项目的排列方向）。
2. 默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
3. flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
4. justify-content属性定义了项目在主轴上的对齐方式。
5. align-items属性定义项目在交叉轴上如何对齐。
6. align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

项目的属性：

1. order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
2. flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
3. flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
4. flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main
   size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
5. flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
6. align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

更多详见阮一峰Flex布局教程
现列出一个弹性布局的例子

html:

		<div class="container">
			<div class="main"></div>
			<div class="left"></div>
			<div class="right"></div>
		</div>

css:

		  *{
				margin: 0;
				padding: 0;
			}
			.container{
				 display: flex;
				 min-height: 450px;
			}
			.left,.main,.right{
		        height: 150px; 
		        width: 150px;
		    } 
			.main{
				background-color: blue;
				align-self: center;
			}
			.left{
				background-color: red;
				order: -1;
			}
			.right{
				background-color: green;
				align-self: flex-end;
			}

代码中的align-self属性可以让项目的位置发生改变。

4.绝对定位布局
下图与圣杯双飞翼同图html:

		<div class="container"> 
			<div class="main">main</div>
			<div class="left">left</div>
			<div class="right">right</div>
		</div>

css:

		   *{
				margin: 0;
				padding: 0;
			}
			.main,.right,.left{
		        top: 0;
		        height: 130px;
		    }
		     .main{
		        margin: 0 300px 0 200px;
		        background-color: blue;
		    } 
		    .right{
		        position: absolute;
		        width: 300px;
		        right: 0;
		        background-color: green;
		    } 
		    .left{
		        position: absolute;
		        width: 200px;
		        background-color: red;
		        left: 0;
		    }

同样是中间块不定宽，且用margin为左右两块预留位置，大块container的position为relative好让左右字块用绝对定位归位。
(完)