1.display
display总结：https://developer.mozilla.org/en-US/docs/Web/CSS/display
block： div,p,form,html5中的新元素：header,footer,section
inline：span,a
none：script
display:none;//javascript中在不删除元素的情况下隐藏或显示元素
display:none;不保留元素的本来空间
visibility:hidden;会保留
list-item
table
inline-block
flex
制作水平菜单：li元素改成inline
2.margin:auto;
水平居中：
给块级元素设置width，再设置左右外边距为auto，可水平居中
缺点：当浏览器窗口比元素的宽度窄时，浏览器会显示一个水平滚动条来容纳页面
改进方法：
用max-width代替width
（所有主流浏览器包括IE7+在内均支持max-width）
3.盒模型
.little{
width:500px;
margin:20px auto;
}
.big{
width:500px;
margin:20px auto;
padding:50px;
border-width:10px;
}
改进方法：
CSS属性：box-sizing
加了box-sizing:border-box;后，此时内边距和边框不再增加它的宽度
（box-sizing是新属性，要注意加前缀，课启用特定浏览器实验中的特性）
改进后：
.little {
width: 500px;
margin: 20px auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
.big {
width: 500px;
margin: 20px auto;
padding: 50px;
border: solid blue 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*{
/*支持IE8+*/
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
4.position
position的值：
static：默认值，任意 position: static;的元素不会被特殊的定位。
relative：和static表现一样，除非加了额外的属性；在一个相对定位（position属性的值为relative）的元素上设置 top、right、bottom和left
属性会使其偏离其正常位置。其他的元素则不会调整位置来弥补它偏离后剩下的空隙。
fixed：相对于视窗定位，即使页面滚动，它还会在相同的位置
固定定位的元素不会保留它原本在页面应有的空隙。
移动浏览器对fixed支持很差
解决方案：http://bradfrostweb.com/blog/mobile/fixed-position/
absolute：与fixed类似，区别是相对于最近的positioned祖先元素。如果绝对定位的元素没有positioned的祖先元素，则是相对于文档的body，且会随着页面的滚动而移动
positioned值指的是除了static的值以外的值
5.position例子
.container {
position: relative;
}
nav {
position: absolute;
left: 0px;
width: 200px;
}
section {
/* position is static by default */
margin-left: 200px;
}
footer {
position: fixed;
bottom: 0;
left: 0;
height: 70px;
background-color: white;
width: 100%;
}
body {
margin-bottom: 120px;
}
这个例子在容器比nav元素高时可以正常工作，
比nav高度低的时候，nav会溢出到容器外边
6.float
float，可用于实现文字环绕图片
img {
float: right;
margin: 0 0 1em 1em;
}
7.clear
clear属性用于控制浮动
具体表现参考：http://zh.learnlayout.com/clear.html
8.清除浮动（clearfix hack）
（现代浏览器：chrome，火狐4，Opera，Safari，）
当浮动内容比非浮动内容高时，需要加清除浮动
.clearfix{
overflow: auto;
}
参考链接：http://www.w3school.com.cn/cssref/pr_pos_overflow.asp
.clearfix{
/*专门为ie6的*/
overflow: auto;
zoom: 1;
}
某些浏览器需要特殊解决方式，下面的链接中的基本可解决所有主要的浏览器的问题
9.百分比宽度
百分比是相对于包含块的计量单位
10.媒体查询
响应式设计（Responsive Design）让网站针对不同的浏览器和设备响应不同的显示效果的策略。
媒体查询为响应式设计的工具
@media screen and (min-width:600px) {
nav {
float: left; width: 25%;
}
section {
margin-left: 25%;
}
}
@media screen and (max-width:599px) {
nav li {
display: inline;
}
}
参考链接：
- http://mediaqueri.es/
- https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries（需翻墙）
- https://dev.opera.com/articles/an-introduction-to-meta-viewport-and-viewport/
移动端自适应：
<meta name="viewport" content="width=device-width,initial-scale=1"/>
移动端的代码一般都把宽度写成百分比，图片宽度写成百分比会根据屏幕自动缩放，写一个最大值即可。
11.网格铺满浏览器
- 使用浮动（较困难）
.box {
float: left;
width: 200px;
height: 100px;
margin: 1em;
}
.after-box {
clear: left;
}
- inline-block（较容易）
.box2 {
display: inline-block;
width: 200px;
height: 100px;
margin: 1em;
}
使IE6和IE7支持inline-block：
inline-block会触发hasLayout
https://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/
12.inline-block布局
- vertical-align属性会影响到inline-block元素，要设置成top
- 需设置每一列的宽度
- 若html源代码中元素之间有空格，则列和列之间会产生空隙
13.column
实现文字的多列布局：
.three-column {
padding: 1em;
-moz-column-count: 3;
-moz-column-gap: 1em;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
column-count: 3;
column-gap: 1em;
}
注意：CSS columns是新标准，需要使用前缀，IE9和Opera Mini不支持
14.flexbox
暂时还没有接触过，mark一下，下边是非常牛的布局
.container {
display: -webkit-flex;
display: flex;
}
.initial {
-webkit-flex: initial;
flex: initial;
width: 200px;
min-width: 100px;
}
.none {
-webkit-flex: none;
flex: none;
width: 200px;
}
.flex1 {
-webkit-flex: 1;
flex: 1;
}
.flex2 {
-webkit-flex: 2;
flex: 2;
}
垂直居中布局
.vertical-container {
height: 300px;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
15.框架
blueprint
Bootstrap
