css 知识点

#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布局很难使用，在框架的功能契合你的需求时使用框架才是个好主意。