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