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