#main {max-width:600px; margin: 0 auto;} max-width相对于width可以避免窗口小于宽度时出现左右进度条的情况，对移动端的更加有用。
盒子模型：
{-webkit-box-sizing:border-box;
-moz-box-sizing:border-box; box-sizing:border-box} border-box元素可以让边框和内边距不再增加标签的宽度支持ie8+
position:
static:默认值 基本无意义
relative:无设置其他值同static一样基本无意义 但为元素设置 top 、 right 、 bottom 和 left 属性会使其偏离其正常位置。其他的元素则不会调整位置来弥补它偏离后剩下的空隙。
fixed:相对视窗固定的定位作用，滚动视窗还是固定在老位置，不会保留原来的页面空隙，可设置left top buttom right属性 但对移动端支持不好，代替解决方案
例子 .fixed｛positon:fixed;button:0 ;right:0;width:200px;}
absolute:
与fixed相近，但不是相对视窗而是最近的positioned元素(position不为static的属性), 如果没有则是相对于文档的body元素随着页面滚动而移动。
float: 可实现文字围绕图片 如 img{float:0 0 1em 1em;}
clear: 可清除浮动 例如: .box{clear: left/right/both;}
清除浮动的黑科技：img{overflow: auto;} 支持ie6需{overflow: auto; zoom:1} 这一简单的清除浮动方案已支持主流浏览器
响应式布局：
媒体查询是做此事所需的最强大的工具。让我们使用百分比宽度来布局，然后在浏览器变窄到无法容纳侧边栏中的菜单时，把布局显示成一列：
效果如下：宽度大于600px
宽度小于600px
其他一些资料：同样使用媒体查询的著名站点，MDN文档可以查到更多的媒体查询的知识点，使用meta viewport之后可以让你的移动浏览器显示的更加友好。
inline-block: 你可以创建很多网格来铺满浏览器。在过去很长的一段时间内使用float是一种选择，但是使用inline-block会更简单。
例如： 以前这样干 .box{float:left; weight:200px; height:100px;margin:1em;} .after-box{clear:left;}
现在更容易的方式：inline-block
.box2{display:inline-block; width:200px; height:100px; margin:1em;}
flexbox与column需新版本浏览器或者规范变化频繁暂先放下
css布局很难使用，在框架的功能契合你的需求时使用框架才是个好主意。
