css布局

display

margin:auto

max-width 所有的主流浏览器包括IE7+在内都支持 max-width ，所以放心大胆的用吧。

盒模型

box-sizing:border-box;   box-sizing 是个很新的属性，目前你还应该像我之前在例子中那样使用 -webkit- 和 -moz- 前缀。这可以启用特定浏览器实验中的特性。 同时记住它是支持IE8+

position

float Float 可用于实现文字环绕图片

clear clear 属性被用于控制浮动

清除浮动（clearfix hack） :overflow:auto

百分比宽度 百分比是一种相对于包含块的计量单位。它对图片很有用：如下我们实现了图片宽度始终是容器宽度的50%。

媒体查询      “响应式设计（Responsive Design）”是一种让网站针对不同的浏览器和设备“响应”不同显示效果的策略，这样可以让网站在任何情况下显示的很棒！

媒体查询是做此事所需的最强大的工具。

inline-block  你可以创建很多网格来铺满浏览器。在过去很长的一段时间内使用 float 是一种选择，但是使用 inline-block 会更简单。你得做些额外工作来让IE6和IE7支持 inline-block 。有些时候人们谈到 inline-block 会触发叫做 hasLayout 的东西，你只需要知道那是用来支持旧浏览器的。

可以使用 inline-block 来布局。有一些事情需要你牢记：

• vertical-align 属性会影响到 inline-block 元素，你可能会把它的值设置为 top 。
• 你需要设置每一列的宽度
• 如果HTML源代码中元素之间有空格，那么列与列之间会产生空隙

column：实现文字的多列布局；CSS columns是很新的标准，所以你需要使用前缀，并且它不被IE9及以下和Opera Mini支持。

flexbox   目前只能在支持 flexbox 的 Chrome 浏览器中运行