传送门：
代码简写
布局缩写
padding、border的缩写方法和margin是一致的，这里以 margin 为例。
- 如果上下左右的值都相同，可以省略：
margin:10px 10px 10px 10px; -> margin:10px;
- 如果上下、左右的值分别相同，可以省略：
margin:10px 20px 10px 20px; -> margin:10px 20px;
- 如果左右的值相同，可以省略：
margin:10px 20px 30px 20px; -> margin:10px 20px 30px;
颜色和字体缩写
- 可以省略两位相同的色码
p{color: #336699;} -> p{color: #369;}
- 缩写字体
body{
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:"宋体",sans-serif;
}
可以缩写为：
body{
font:italic small-caps bold 12px/1.5em "宋体", sans-serif;
}
注意：
- 使用这一简写方式你至少要指定
font-size和font-family属性，其他的属性可以使用默认值。 - 在缩写时
font-size与line-height中间要加入/斜扛。
中文页面常用：
body{
font:12px/1.5em "宋体",sans-serif;
}
单位和值
颜色值
颜色值可以有许多定义方法：
p{color:red;}
p{color:rgb(133,45,200);}
p{color:rgb(20%,33%,25%);}
p{color:#00ffff;}
像素
像素指的是显示器上的显示单位（CSS规范中假设“90像素=1英寸”），浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位。
缩进
1em = 两倍字体大小
当给 font-size 设置单位为
em时，此时计算的标准以p的父元素的 font-size 为基础。
局中布局
水平居中
- 行内元素：
text-align:center; - 定宽块状元素：将左右两边的 margin 设置为 auto
margin:20px auto 30px; - 不定宽块状元素有三种方法：
利用表格的属性：
display:table; margin:0 auto;设置为行内元素：
display:inline;-
通过给父元素设置
position:absolute和left:50%，子元素设置position:relative和left: -50%来实现水平居中。father { position:absolute; left:50%； } son { position:relative; left:-50%; }
垂直居中
单行
设置父元素的 height 和 line-height 高度一致来实现的。(height: 该元素的高度，line-height: 顾名思义，行高(行间距 ))。
line-height 与font-size 的计算值之差，在 CSS 中成为“行间距”。分为两半，分别加到一个文本行内容的顶部和底部。
这种文字行高与块高一致带来了一个弊端：当文字内容的长度大于块的宽时，就有内容脱离了块。
多行
- td 标签默认情况下默认设置了
vertical-align为middle，所以可以利用把内容放在 table 标签中来实现垂直居中。 -
display:table-cell;注：此方法只能在 IE8 以上及Chrome、Firefox 上会生效。
