一.語義化
通俗一點就是：明白每個標簽的用途,比如，網頁上的文章的標題就可以用標題標簽，網頁上的各個欄目名稱也可以使用標題標簽。文章中內容的段落就得放在段落標簽中，在文章中有想強調的文本，就可以使用em標簽標示強調等等。
語義化的好處
1.更容易被搜索引擎收錄。
2.更容易讓屏幕閱讀器讀出網頁內容。
二.簡寫?
①盒模型代碼 ?
1.如果top,right,bottom,left的值相同 可縮寫為margin:10px;
2.如果top和bottom值相同，left和right的值相同 可縮寫為margin:10px 20px;
3.如果left和right的值相同,可以縮寫為margin:10px 20px 30px
P:padding，border，margin縮寫方法是一致的
②顏色值縮寫
關于顏色的css樣式也是可以縮寫的，當你設置的顏色是16進制的色彩值時，如果每兩位的值相同，可以縮寫一半.
③字體縮寫
網頁中的字體CSS樣式代碼也有他自己的縮寫方式。
body{
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:"宋體",sans-serif;
}
這么多行代碼可以縮寫為1句
body{font:italic small-cap bold 12px/1.5em "宋體",sans-serif}
PS
1.使用這一簡寫方式你至少需指定font-size和font-family屬性，其他屬性（font-weight,font-style,font-variant,line-height）如未使用將懂使用默認值
2.在縮寫時font-size與line-height中間要加入"/"斜杠
一般情況下因為對于中文網站，英文還是比較少的，所以下面縮寫代碼比較常用：body{font:12px/1.5em “宋體”,sans-serif;}
只是有字號，行間距，中文字體，英文字體設置。
三.顏色值
在網頁中的顏色設置是非常重要，有字體顏色(color)，背景顏色(background-color),邊框顏色(border)等，設置顏色的方法也有很多種
1.英文命令顏色 p {color:red;}
2.RGB顏色
p{color:rgb(133,45,200);}?
p{color:rgb(20%,33%,25%);}
每一項的值可以是0-255之間的整數，也可以是%-100%的百分數
3.十六進制顏色
這種顏色設置方法是現在比較普遍使用的方法，其原理其實也是RGB設置，但是其每一項的值由0-244變成了十六進制00-ff.
p{color:#00ffff;}
四.長度值
長度單位總結一下，目前比較常用到px(像素)，em,%百分比，要注意其實這三種單位都是相對單位。
1.像素
像素為什么是相對單位呢？因為像素指的是顯示器上的小點(CSS規范中假設“90像素=1英寸”)。實際情況是瀏覽器會使用顯示器的實際像素值有關，在目前大多數的設計者都傾向于使用像素(px)作為單位
2.em
就是本元素給定字體的font-size值，如果元素的font-size為14px，那么1em=14px;如果font-size為18px,那么1em=18px.
3.百分比
p{font-size:12px;line-height:130%}設置行高(行間距)為字體的130%(12*1.3=15.6px);
五.水平居中設置
1.行內元素
如果被設置元素為文本，圖片等行內元素時，水平居中是通過給父元素設置text-align:center來實現的。
2.定寬塊元素
當被設置元素為塊狀元素時用text-align：center就不起作用了
這時也分為兩種情況：定寬塊狀元素和不定寬塊狀元素
①滿足定寬和塊狀兩個條件的元素是可以通過設置"左右margin值為auto"來實現居中的.
②不定寬度的塊狀元素有三種方法居中
1.加入table標簽。利用table標簽的長度自適應性-即不定義其長度也不默認父元素body的長度(table其長度根據其內文本長度決定)，因此可以看做義工丁寬度塊元素，然后再利用定寬度塊居中的margin的方法，使其水平居中.
第一步:為需要設置的居中的元素外面加入一個table標簽(包括<tbody>,<tr>,<td>).
第二步：為這個table設置"左右 margin居中"
2.設置display：inline方法:與第一種類似，顯示類型設為行內元素，進行不定寬度元素的屬性設置
這種方法相比第一種方法的優勢是不用增加無語義標簽，但也存在著一些問題；它將塊狀元素的display類型改為inline,變成行內元素，所以少了一些功能，比如設定長度值
3.設置position:relative和let：50% 利用相對定位的方式，將元素向左偏移50%，即達到居中的目的
六.垂直居中
我們在實際工作也會遇到需要設置垂直居中的場景，比如好多報紙的文章標題在左右一側時，常常會設置為垂直居中。
1.父元素高度確定的單行文本
通過設置父元素的height和line-height高度一致來實現.(height：該元素的高度，line-height:行高,指在文本中，行與行之間的基線間距離)
line-height 與font-size的計算值之差，在CSS中稱為間距，分為兩半，分別加到一個文本行內容的頂部和底部。這種文字行高與塊高一致帶來了一個弊端；當文字內容的長度大于塊的寬時，就有內容脫離了塊
2.父元素高度確定的多行文本
方法一：使用插入table(包括tbody、tr、td)標簽，同時設置vertical-align：middle。
css中有一個用于豎直居中的屬性vertical-align，在父元素設置此樣式時，會對inline-block類型的子元素都有用
方法二:在chrome、firefox及IE8以上的瀏覽器下可以設置塊級元素的display為table-cell（設置為表格單元顯示），激活vertical-align屬性，但注意IE6、7并不支持這個樣式,兼容性比較差
七.隱性改變display類型
有一個有趣的現象就是當為元素（不論之前是什么類型元素，display:none除外）設置以下2個句之一：
2.?float : left 或float:right
簡單來說，只要html代碼中出現以上兩句之一，元素的display顯示類型就會自動變為以display:inline-block（塊狀元素）的方式顯示，當然就可以設置元素的width和height了，且默認寬度不占滿父元素。
