标签：
#main{ max-width:600px; margin:0 auto; }
用max-width替代width，可以使屏幕比600px窄时自动调整内容宽度，而不是出现滚轮。所有主流浏览器包括IE7都支持。
*{ -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
避免padding和border-width将元素撑宽。免去以往的数学计算，使width一样的元素一样宽。支持IE8+。
.clearfix{ overflow: auto; zoom: 1; //added to support IE6，触发hasLayout }
闭合浮动，比clear清除浮动好，解决浮动元素比包含元素还高从而溢出的问题。包含元素的class="clearfix"。
@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; } }
媒体查询，来进行响应式布局。
.box{ display: inline-block; width:200px; height:100px; margin:1em; }
inline-block,也会出现响应式。
“你可以使用 inline-block 来布局。有一些事情需要你牢记：
vertical-align 属性会影响到 inline-block 元素，你可能会把它的值设置为 top 。标签：
原文地址：http://www.cnblogs.com/babywhale/p/4421420.html
