CSS 技巧 - 居中外包围框

实现原理：

width: 960px;设置外包围框的宽度。

margin: 0 auto;让浏览器自动计算左右 margin，使外包围框居中。

这个居中技巧只限于有设置宽度的容器。

你常常会看到网页选择 960px 这个宽度，这是因为一般浏览器是 1024 宽，加上滚动条就是 1000-1004。960 给滚动条和其他浏览器 UI 预留了足够的空间。 并且 960 这个数字可以 2，3，4，5，6，8，10，12 等数字除尽，方便做网格。

头部容器

不同显示类型的 HTML 元素需要使用不同的居中技巧。HTML 元素可以简单地分为两大类。

块级元素

p, div, h1, h2, table, ol 等等

行元素- 在文字流里面显示，浏览器不会添加断行。默认宽度刚好适应内容。

span, img, a, button, input 等等

---

CSS 技巧 - 居中元素

HTML:

Centered by setting left/right margin.to auto.

-->

Moby Dick

CSS:

.centered-image{display: block;width:25%;margin:0auto;}.centered-container{text-align: center;}

实现原理：

display: block;把行元素变成块元素

margin: 0 auto;居中块元素

元素一定要有width属性

text-align: center;通过容器来居中行元素

使用text-align居中必须经过一个元素的父元素来居中，这会影响在这个容器里所有的元素。 在前面这个例子你可以看到不只是图片居中了, h1 和 p 里面的文字也被居中了。

如果你想要居中一个行元素（比如图片），但不影响同个容器里面的其他元素，那你可以选择把它设定为块元素来居中。

头像修饰

给头像加阴影

box-shadow: 0 0px 2px 1px rgba(0,0,0,0.2);

把头像变成圆形

border-radius: 999px

有关 margin 折叠的细节和用法可以看 http://www.sitepoint.com/web-foundations/collapsing-margins/

---

怎样排序 CSS 属性

具体的属性排序可以按照以下的规则：

定位属性: position, float, z-index, clear

盒模型相关属性: padding, margin, display, width, height, border

字体相关

CSS2 视觉相关属性 (background)

CSS3 属性 (border-radius, box-shadow)

详情请看http://markdotto.com/2011/11/29/css-property-order/