傳送門：
代碼簡寫
布局縮寫
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規(guī)范中假設“90像素=1英寸”），瀏覽器會使用顯示器的實際像素值有關，在目前大多數(shù)的設計者都傾向于使用像素（px）作為單位。
縮進
1em = 兩倍字體大小
當給 font-size 設置單位為
em時，此時計算的標準以p的父元素的 font-size 為基礎。
局中布局
水平居中
- 行內(nèi)元素：
text-align:center; - 定寬塊狀元素：將左右兩邊的 margin 設置為 auto
margin:20px auto 30px; - 不定寬塊狀元素有三種方法：
利用表格的屬性：
display:table; margin:0 auto;設置為行內(nèi)元素：
display:inline;-
通過給父元素設置
position:absolute和left:50%，子元素設置position:relative和left: -50%來實現(xiàn)水平居中。father { position:absolute; left:50%； } son { position:relative; left:-50%; }
垂直居中
單行
設置父元素的 height 和 line-height 高度一致來實現(xiàn)的。(height: 該元素的高度，line-height: 顧名思義，行高(行間距 ))。
line-height 與font-size 的計算值之差，在 CSS 中成為“行間距”。分為兩半，分別加到一個文本行內(nèi)容的頂部和底部。
這種文字行高與塊高一致帶來了一個弊端：當文字內(nèi)容的長度大于塊的寬時，就有內(nèi)容脫離了塊。
多行
- td 標簽默認情況下默認設置了
vertical-align為middle，所以可以利用把內(nèi)容放在 table 標簽中來實現(xiàn)垂直居中。 -
display:table-cell;注：此方法只能在 IE8 以上及Chrome、Firefox 上會生效。
