傳送門(mén)：
代碼簡(jiǎn)寫(xiě)
布局縮寫(xiě)
padding娶牌、border的縮寫(xiě)方法和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;
顏色和字體縮寫(xiě)
- 可以省略?xún)晌幌嗤纳a
p{color: #336699;} -> p{color: #369;}
- 縮寫(xiě)字體
body{
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:"宋體",sans-serif;
}
可以縮寫(xiě)為：
body{
font:italic small-caps bold 12px/1.5em "宋體", sans-serif;
}
注意：
- 使用這一簡(jiǎn)寫(xiě)方式你至少要指定
font-size和font-family屬性，其他的屬性可以使用默認(rèn)值。 - 在縮寫(xiě)時(shí)
font-size與line-height中間要加入/斜扛寻歧。
中文頁(yè)面常用：
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ī)范中假設(shè)“90像素=1英寸”）掌栅，瀏覽器會(huì)使用顯示器的實(shí)際像素值有關(guān)，在目前大多數(shù)的設(shè)計(jì)者都傾向于使用像素（px）作為單位码泛。
縮進(jìn)
1em = 兩倍字體大小
當(dāng)給 font-size 設(shè)置單位為
em時(shí)猾封，此時(shí)計(jì)算的標(biāo)準(zhǔn)以p的父元素的 font-size 為基礎(chǔ)。
局中布局
水平居中
- 行內(nèi)元素：
text-align:center; - 定寬塊狀元素：將左右兩邊的 margin 設(shè)置為 auto
margin:20px auto 30px; - 不定寬塊狀元素有三種方法：
利用表格的屬性：
display:table; margin:0 auto;設(shè)置為行內(nèi)元素：
display:inline;-
通過(guò)給父元素設(shè)置
position:absolute和left:50%噪珊，子元素設(shè)置position:relative和left: -50%來(lái)實(shí)現(xiàn)水平居中晌缘。father { position:absolute; left:50%； } son { position:relative; left:-50%; }
垂直居中
單行
設(shè)置父元素的 height 和 line-height 高度一致來(lái)實(shí)現(xiàn)的痢站。(height: 該元素的高度磷箕，line-height: 顧名思義，行高(行間距 ))阵难。
line-height 與font-size 的計(jì)算值之差岳枷，在 CSS 中成為“行間距”。分為兩半呜叫，分別加到一個(gè)文本行內(nèi)容的頂部和底部空繁。
這種文字行高與塊高一致帶來(lái)了一個(gè)弊端：當(dāng)文字內(nèi)容的長(zhǎng)度大于塊的寬時(shí)，就有內(nèi)容脫離了塊朱庆。
多行
- td 標(biāo)簽?zāi)J(rèn)情況下默認(rèn)設(shè)置了
vertical-align為middle盛泡，所以可以利用把內(nèi)容放在 table 標(biāo)簽中來(lái)實(shí)現(xiàn)垂直居中。 -
display:table-cell;注：此方法只能在 IE8 以上及Chrome娱颊、Firefox 上會(huì)生效傲诵。
