一：居中效果实现小结
1，文本居中
文本水平居中：text-align:center;
文本垂直居中：①设置line-height=父元素的height （单行文本）；②通过设置padding-top、padding-bottom
2，盒子水平居中：
① margin:0 auto; 该盒子需设置了width，不然其width默认为:auto，此时会把值为auto的margin的值改为0
② 使用绝对定位 ，注意其父盒子要设置定位，position值不为static，常用的是设置为相对定位，即子绝父相
[css]
view plain
copy
?
width: 100px; position: absolute; left: 50%; /* 设置负左外边距，其值为自身宽度的一半 */ margin-left: -50px;
width: 100px;
position: absolute;
left: 50%;
/* 设置负左外边距，其值为自身宽度的一半 */
margin-left: -50px; ③ 设置盒子显示为inline-block
[css]
view plain
copy
?
.parent { text-align: center; } .child { display: inline-block; }
.parent {
text-align: center;
}
.child {
display: inline-block;
}
④使用绝对定位
[css]
view plain
copy
?
/* 其父盒子需要设置值不为static的定位，常用相对定位 */ position: absolute; left: 50%; /* 不知道盒子自身的宽度；IE9开始支持 */ transform: translate(-50%,0);
/* 其父盒子需要设置值不为static的定位，常用相对定位 */
position: absolute;
left: 50%;
/* 不知道盒子自身的宽度；IE9开始支持 */
transform: translate(-50%,0);
⑤flex布局
[css]
view plain
copy
?
.parent { display: flex; justify-content: center; }
.parent {
display: flex;
justify-content: center;
}
3，盒子垂直居中
①通过设置display属性
[css]
view plain
copy
?
.parent { /* 注意，使用这种方式会导致其margin失效 */ display: table-cell; vertical-align: middle; }
.parent {
/* 注意，使用这种方式会导致其margin失效 */
display: table-cell;
vertical-align: middle;
}
②使用绝对定位，注意其父盒子要设置定位，position值不为static，常用的是设置为相对定位
[css]
view plain
copy
?
height: 100px; position: absolute; top: 50%; /* 设置负上外边距，其值为自身高度的一半 */ margin-top: -50px;
height: 100px;
position: absolute;
top: 50%;
/* 设置负上外边距，其值为自身高度的一半 */
margin-top: -50px; ③使用绝对定位二
[css]
view plain
copy
?
/* 其父盒子需要设置值不为static的定位，常用相对定位 */ position: absolute; top: 50%; /* 可在盒子高度自适应下实现垂直居中；IE9开始支持 */ transform: translate(0,-50%);
/* 其父盒子需要设置值不为static的定位，常用相对定位 */
position: absolute;
top: 50%;
/* 可在盒子高度自适应下实现垂直居中；IE9开始支持 */
transform: translate(0,-50%);
④flex布局
[css]
view plain
copy
?
.parent { display: flex; align-items: center; }
.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属性。
内墙法：
[html]
view plain
copy
?
4，偏方：设置overflow:hidden;（慎用，原因见下文）
5,使用伪元素，推荐使用这种方法
[css]
view plain
copy
?
/* 使用伪元素:after清除浮动 #版本一# */ .clearfix:after{ visibility:hidden; display:block; clear:both; content:“”; font-size:0; height:0 } /* 下面是用来解决ie6，7浮动问题 */ .clearfix{*zoom:1};
/* 使用伪元素:after清除浮动 #版本一# */
.clearfix:after{
visibility:hidden;
display:block;
clear:both;
content:"";
font-size:0;
height:0
}
/* 下面是用来解决ie6，7浮动问题 */
.clearfix{*zoom:1};
[css]
view plain
copy
?
/* #版本二# */ .clearfix:after { content:“\200B”; display:block; height:0; clear:both; } .clearfix {*zoom:1;}
/* #版本二# */
.clearfix:after {
content:"\200B";
display:block;
height:0;
clear:both;
}
.clearfix {*zoom:1;}
[css]
view plain
copy
?
/* #版本三# （推荐使用） */ /* 同时加入:before以解决现代浏览器上边距折叠的问题 */ .clearfix:before,.clearfix:after{ content:“”; display:table; } .clearfix:after{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很少
注：使用圣杯布局三栏布局时，若中间栏的宽度小于左右定宽栏的宽度时，布局就会发生紊乱！！！使用双飞翼布局不存在这种问题；左右两栏设置百分数宽度也可以避免这种问题。
[html]
view plain
copy
?
Header
main
left
right
Header
main
left
right
2，双飞翼布局
相比圣杯布局，双飞翼不必设置左右栏的position: relative，也不必设置左右left、right值，只需多添加一个子元素包含，相应的padding换成margin
双飞翼布局的好处：1.主要的内容先加载的优化; 这是用圣杯布局和双飞翼布局的主要原因！！！ 2.兼容目前所有的主流浏览器，包括IE6在内； 3.实现不同的布局方式，可以通过调整相关CSS属性即可实现。
[html]
view plain
copy
?
Header
main
left
right
Header
main
left
right
3，一般三栏/多栏布局
布局思想：先左右浮动，然后中栏设置margin 这种布局必须把左右浮动放前面，中栏放最后面，所以无法做到像圣杯布局、双飞翼布局那样可以让主要内容优先加载！
[css]
view plain
copy
?
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; }
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布局
待更新…