CSS总结(三)：居中效果、清除浮动、三栏布局

一：居中效果实现小结

1，文本居中

文本水平居中：text-align:center;

文本垂直居中：①设置line-height=父元素的height （单行文本）；②通过设置padding-top、padding-bottom

2，盒子水平居中：

① margin:0 auto; 该盒子需设置了width，不然其width默认为:auto，此时会把值为auto的margin的值改为0

② 使用绝对定位，注意其父盒子要设置定位，position值不为static，常用的是设置为相对定位，即子绝父相

width: 100px;
position: absolute;
left: 50%;
/* 设置负左外边距，其值为自身宽度的一半 */
margin-left: -50px;

③ 设置盒子显示为inline-block

.parent {
	text-align: center;
}
.child {
	display: inline-block;
}

④使用绝对定位

/* 其父盒子需要设置值不为static的定位，常用相对定位 */
position: absolute;
left: 50%;
/* 不知道盒子自身的宽度；IE9开始支持 */
transform: translate(-50%,0);

⑤flex布局

.parent {
	display: flex;
	justify-content: center;
}

3，盒子垂直居中

①通过设置display属性

.parent {
	/* 注意，使用这种方式会导致其margin失效 */
	display: table-cell;
	vertical-align: middle;
}

②使用绝对定位，注意其父盒子要设置定位，position值不为static，常用的是设置为相对定位

height: 100px;
position: absolute;
top: 50%;
/* 设置负上外边距，其值为自身高度的一半 */
margin-top: -50px;

③使用绝对定位二

/* 其父盒子需要设置值不为static的定位，常用相对定位 */
position: absolute;
top: 50%;
/* 可在盒子高度自适应下实现垂直居中；IE9开始支持 */
transform: translate(0,-50%);

④flex布局

.parent {
	display: flex;
	align-items: center;
}

二：清除浮动小结

清除浮动：不是删除浮动，而是清除浮动的影响。

1，使用clear

clear: left | right | both | none 应用于块级元素

如：h3 {clear:left;} 确保h3元素左边没有浮动元素
clear工作原理：CSS1和CSS2中，增加元素的上外边距
CSS2.1中，在元素上外边距之上增加额外间隔（即清除区域），并不改变元素的外边距
缺点：靠近浮动元素那边的margin会失效

2，给浮动元素的祖先元素加高度
有高度的盒子才能关住浮动

缺点：直接设置height不好，高度最好让内容去自然撑高

3，隔墙法：

在两部分浮动之间加一个有高度的div，并设置其clear属性。

内墙法：

<div>
	<div class="fl">浮动元素</div>
	<!-- 在下面加一个设置clear属性的元素，这样浮动就不会对后面的元素造成影响了 -->
	<div class="cl">这可看作是一道内墙</div>
</div>

4，偏方：设置overflow:hidden;（慎用，原因见下文）

5,使用伪元素，推荐使用这种方法

/* 使用伪元素:after清除浮动  #版本一# */
.clearfix:after{
        visibility:hidden;
        display:block;
        clear:both;
        content:"";
        font-size:0;
        height:0
}
/* 下面是用来解决ie6，7浮动问题 */
.clearfix{*zoom:1};

/* #版本二# */
.clearfix:after {
    content:"\200B";
    display:block;
    height:0;
    clear:both;
}
.clearfix {*zoom:1;}

/* #版本三#  （推荐使用） */
/* 同时加入:before以解决现代浏览器上边距折叠的问题 */
.clearfix:before,.clearfix:after{         
          content:"";
          display:table;
}
.clearfix:after{clear:both;}   
.clearfix{*zoom:1;}

补充：BFC

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

BFC的主要特征: 1.BFC容器是一个隔离的容器，和其他元素互不干扰；所以我们可以用触发两个元素的BFC来解决垂直边距折叠问题。 2.BFC可以包含浮动；通常用来解决浮动父元素高度坍塌的问题。

       能够触发(Block Formatting Context)BFC的方式有：
        根元素html；
        float的值不为none；
        overflow的值不为visible；
        display的值为table-cell, table-caption, inline-block,flex,inline-flex中的任何一个；
        position的值不为relative和static。

通过overflow闭合浮动，实际上已经创建了新的块级格式化上下文，这将导致其布局和相对于浮动的行为等发生一系列的变化，闭合浮动只不过是一系列变化中的一个作用而已。所以为了闭合浮动去改变全局特性，这是不明智的，带来的风险就是一系列的bug;始终要明白，如果单单只是需要闭合浮动，overflow就不要使用

三：三栏布局小结

1，圣杯布局

圣杯布局：给父容器设置height和左右padding；主子容器放在最前以优先加载，子容器全部左浮动，靠设置负margin和相对定位来实现两栏、三栏布局、多栏布局

       优点: 1.使主要内容列先加载。
       2.允许任何列是最高的。
       3.没有额外的div。

4.需要的hack很少

注：使用圣杯布局三栏布局时，若中间栏的宽度小于左右定宽栏的宽度时，布局就会发生紊乱！！！使用双飞翼布局不存在这种问题；左右两栏设置百分数宽度也可以避免这种问题。

<style type="text/css">
	*{
		padding: 0;
		margin: 0;
	}
	.header,.footer{
		height: 100px;
		text-align: center;
		background-color: green;
	}
	span,h4{
		font-size: 20px;
		line-height: 100px;
	}
	.container{
		height: 250px;
		/* 这里的10%是相对视窗的 */
		padding:0 10%;
		/* padding: 0 200px; */
	}
	.main{
		width: 100%;
		height: 250px;
		background-color: #E14E14;
		float: left;

	}
	.left,.right{
		/* 为什么是12.5%？ */
		/* 这里的12.5%是相对其父元素的宽度的，其父元素的宽度为视窗的80%(去掉左右padding)， */
		/* 所以有12.5*0.8=10，这样就刚好等于视窗的padding的宽度了 */
		width: 12.5%;
		/* width: 200px; */
		height: 250px;
		float: left;
		/* 为什么要用相对定位？因为右边一栏只通过设置margin无法实现*/
		position: relative;
	}
	.left{
		background-color: #1077DB;
		margin-left: -100%;
		left: -12.5%;
		/* left: -200px; */
	}
	.right{
		background-color: #617608;
		margin-left: -12.5%;
		right: -12.5%;
		/* margin-left: -200px; */
		/* right: -200px; */
	}
</style>

<body>
	<div class="header">
		<h4>Header</h4>
	</div>
	<div class="container">
		<div class="main">
		<p>main</p>
		</div>
		<div class="left">
			<p>left</p>
		</div>
		<div class="right">
			<p>right</p>
		</div>
	</div>
	<div class="footer">
		<span>Footer</span>
	</div>
</body>

2，双飞翼布局

相比圣杯布局，双飞翼不必设置左右栏的position: relative，也不必设置左右left、right值，只需多添加一个子元素包含，相应的padding换成margin

       双飞翼布局的好处：1.主要的内容先加载的优化; 这是用圣杯布局和双飞翼布局的主要原因！！！
       2.兼容目前所有的主流浏览器，包括IE6在内；
       3.实现不同的布局方式，可以通过调整相关CSS属性即可实现。

<style type="text/css">
	body,div{
		padding: 0;
		margin: 0;
	}
	.header,.footer{
		height: 100px;
		text-align: center;
		background-color: green;
	}
	span,h4{
		font-size: 20px;
		line-height: 100px;
	}
	.container{
		overflow: hidden;
	}
	.main{
		width: 100%;
		height: 250px;
		background-color: #E14E14;
		float: left;
		/* main本身设置了100%的宽度，所以再设置margin、padding都会使其真实占有宽度超过其父容器， */
		/* 所以这里应该给main的子容器设置margin */
	}
	.main-inner{
		/*margin: 0 10%;*/
		margin: 0 200px;
	}
	.left,.right{
		/*width: 10%;*/
		width: 200px;
		height: 250px;
		float: left;
	}
	.left{
		background-color: #1077DB;
		margin-left: -100%;
	}
	.right{
		background-color: #617608;
		/*margin-left: -10%;*/
		margin-left: -200px;
	}
</style>

<body>
	<div class="header">
		<h4>Header</h4>
	</div>
	<!-- 这里container可以不需要 -->
	<div class="container">
		<div class="main">
			
			<div class="main-inner">
				<p>main</p>
			</div>
		</div>
		<div class="left">
			<p>left</p>
		</div>
		<div class="right">
			<p>right</p>
		</div>
	</div>
	<div class="footer">
		<span>Footer</span>
	</div>
</body>

3，一般三栏/多栏布局

布局思想：先左右浮动，然后中栏设置margin
这种布局必须把左右浮动放前面，中栏放最后面，所以无法做到像圣杯布局、双飞翼布局那样可以让主要内容优先加载！

body,div,p{
	padding: 0;
	margin: 0;
}
.container{
	overflow: hidden;
}
.left{
	float: left;
	width: 200px;
	height: 400px;
	background-color: green;
}
.right{
	float: right;
	width:200px;
	height: 400px;
	background-color: gray;
}
.middle{
	margin: 0 220px;
	height: 400px;
	background-color: #9AA507;
}

4，Flex布局

待更新...