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 浏览器中运行