一.CSS描述
CSS全稱為“層疊樣式表(Cascading Style Sheets)”，它主要是用于定義HTML內(nèi)容在瀏覽器內(nèi)的顯示樣式，如文字大小、顏色、字體加粗等。
使用CSS樣式的一個好處是通過定義某個樣式，可以讓不同網(wǎng)頁位置的文字有著統(tǒng)一的字體、字號或者顏色等。
1.CSS 代碼語法
css樣式由選擇符和聲明組成，而聲明又由屬性和值組成。
選擇符：又稱選擇器，指明網(wǎng)頁中要應(yīng)用樣式規(guī)則的元素，
聲明：在英文大括號“{}”中的的就是聲明，屬性和值之間用英文冒號“：”分隔。當(dāng)有多條聲明時，中間可以英文分號“;”分隔
注意：
1.最后一條聲明可以沒有分號，但是為了以后修改方便，一般也加上分號。
2.為了使用樣式更加容易閱讀，可以將每條代碼寫在一個新行內(nèi)
2.CSS注釋代碼
就像在html的注釋一樣，在CSS中也有注釋語句：用/*注釋語句*/來表明（html中使用<!--注釋語句-->）
3.內(nèi)聯(lián)式CSS樣式，直接寫在現(xiàn)有的HTML標(biāo)簽中
CSS樣式代碼插入形式來看，CSS樣式基本可以分為3種：
內(nèi)聯(lián)式、嵌入式和外部式
內(nèi)聯(lián)式:CSS樣式表就是把css代碼直接寫在現(xiàn)有的HTML標(biāo)簽中
如：<p style="color:red">這里的文字時紅色</p>，注意要寫在元素的開始標(biāo)簽里
并且css樣式代碼要寫在style=""雙引號中，如果有多條css樣式代碼設(shè)置可以寫在一起，中間用分號隔開。如：<p style="color:red; font-size:12px">這里的文字為紅色</p>
嵌入式：css樣式表，寫在當(dāng)前的文件中
嵌入式css樣式，就是可以把css樣式代碼寫在<style type="text/css"></style>標(biāo)簽之間，嵌入式css樣式必須寫在<style></style>之間，并且一般情況下嵌入式css樣式寫在<head></head>之間
外部式：css樣式表，寫在單獨的一個文件中
外部式css樣式（也可稱為外聯(lián)式）就是把css代碼寫在一個單獨的外部文件中，這個css樣式文件以“.css”為擴(kuò)展名，在<head>內(nèi)（不是在<style>標(biāo)簽內(nèi)）使用<link>標(biāo)簽將css樣式文件鏈接到HTML文件內(nèi)，如：
<link href="base.css" rel="stylesheet" type="text/css">
注意：
1.css樣式文件名稱以有意義的英文字母命名，如main.css。
2.rel="stylesheet" type="text/css"是固定寫法不可修改。
3.<link>標(biāo)簽位置一般寫在<head>標(biāo)簽之內(nèi)。
三種方法的優(yōu)先級——就近原則（離被設(shè)置元素越近優(yōu)先級別越高）
內(nèi)聯(lián)式>嵌入式>外部式
但是“嵌入式>外部式”有一個前提：嵌入式css樣式的位置一定在外部式的后面
二、選擇器
每一條css樣式聲明（定義）由兩部分組成，形式如下：
選擇器
{
? ?樣式；
}
在{}之前的部分就是“選擇器”，選擇器指明了{(lán)}中的“樣式”的作用對象，也就是“樣式”作用于網(wǎng)頁中的哪些元素。
1.標(biāo)簽選擇器
標(biāo)簽選擇器其實就是html代碼中的標(biāo)簽。如<html>、<body>、<h1>、<p>、<img>等。
2.類選擇器
語法：
? ? ? ?.類選器名稱{css樣式代碼；}
注意：
1.英文圓點開頭
2.其中類選器名稱可以任意取名（但不要起中文）
使用方法：
第一步：使用合適的標(biāo)簽把要修飾的內(nèi)容標(biāo)記起來，如下：
<span>膽小如鼠</span>
第二步：使用class=“類選擇器名稱”為標(biāo)簽設(shè)置一個類，如：
<span class="stress">膽小如鼠</span>
第三步：設(shè)置類選器css樣式，如：
.stress{color:red;}/*類前面要加入一個英文圓點*/
3.ID選擇器
在很多方面，ID選擇器都類似于類選擇符，但也有一些重要的區(qū)別：
1.位標(biāo)簽設(shè)置id=“ID名稱”，而不是class=“類名稱”
2.ID選擇符的前面是井號（#），而不是英文圓點（.）
類和ID選擇器的區(qū)別
相同點：可以應(yīng)用于任何元素
不同點：
1.ID選擇器只能在文檔中使用一次。與類選擇器不同，在一個html文檔中，ID選擇器只能使用一次，而且僅一次，而類選擇器可以使用很多次。
2.可以使用類選擇器詞列表方法為一個元素同時設(shè)置多個樣式。我們可以為一個元素同時設(shè)置多個樣式，但只可以用類選擇器的方法實現(xiàn)，ID選擇器是不可以的（不能使用ID詞列表）
4.子選擇器
還有一個比較有用的選擇器子選擇器，即大于符號(>),用于選擇指定標(biāo)簽元素的第一代子元素。
例：.food>li{border:1px solid red;}
5.包含（后代）選擇器
包含選擇器，即加入空格，用于選擇指定標(biāo)簽元素下的后輩元素
例：.first? span{color:red;}
包含選擇器和子選擇器的區(qū)別:
子選擇器僅是指它的直接后代，后者可以理解為作用于子元素的第一代后代。而后代選擇器是作用于所有子后代元素。后代選擇器通過空格來進(jìn)行選擇，而子選擇器是通過“>”進(jìn)行選擇。
總結(jié)：>作用于元素的第一代后代，空格作用于元素的所有后代。
6.通用選擇器
通用選擇器是功能最強(qiáng)大的選擇器，它使用一個(*)號指定，它的作用是匹配html中所有標(biāo)簽元素，如* {color:red;}使html中任意標(biāo)簽元素字體顏色全部設(shè)置為紅色。
7.偽類選擇符
它允許給html不存在的標(biāo)簽（標(biāo)簽的某種狀態(tài)）設(shè)置樣式，比如說我們給html中一個標(biāo)簽元素的鼠標(biāo)滑過的狀態(tài)來設(shè)置字體顏色
例：a:hover{color: red;}
上面一行代碼就是為a標(biāo)簽鼠標(biāo)滑過的狀態(tài)設(shè)置字體顏色變紅。這樣就會使被修飾的文字加入鼠標(biāo)滑過字體顏色變?yōu)榧t色的特效。
關(guān)于偽類選擇符，到目前為止，可以兼容所有瀏覽器的“偽類選擇符”就是a標(biāo)簽上使用：hover了（其實偽類選擇符還有很多，尤其是css3中，但是因為不能兼容所有瀏覽器）
8.分組選擇符
當(dāng)想為html中多個標(biāo)簽元素設(shè)置同一個樣式時，可以使用分組選擇符（,），如將h1、span標(biāo)簽同時設(shè)置字體顏色為紅色
h1,span{color:red;}
等同于
h1{color:red;}
span{color:red;}
CSS的繼承、層疊和特殊性
繼承
css的某些樣式具有繼承性的，繼承是一種規(guī)則，它允許樣式不僅應(yīng)用于某個特定html標(biāo)簽元素，而且應(yīng)用于其后代。一些css樣式時不具備繼承性的。
特殊性
瀏覽器是根據(jù)權(quán)值來判斷使用哪種css樣式的，權(quán)值高的就使用哪種css樣式
權(quán)值的規(guī)則：
標(biāo)簽的權(quán)值為1，類選擇符的權(quán)值為10，ID選擇符的權(quán)值最高為100,還有一個權(quán)值比較特殊——繼承也有權(quán)值但很低，有的文獻(xiàn)提出它的權(quán)值只有0.1，所以可以理解為集成的權(quán)值最低。
層疊
層疊就是在html文件中對于同一個元素可以有多個css樣式存在，當(dāng)有相同權(quán)重的樣式存在時，會根據(jù)這些css樣式的前后順序來決定，處于最后面的css樣式會被應(yīng)用。
css樣式優(yōu)先級：
內(nèi)聯(lián)樣式表（標(biāo)簽內(nèi)部）>嵌入樣式表（當(dāng)前文件中）>外部樣式表（外部文件中）
重要性
有些特殊的情況需要為某些樣式設(shè)置具有最高權(quán)值，這時可以使用！important來解決
注意：!important要寫在分號前面
三、CSS格式化排版
1.文字排版——字體、字號、顏色、粗體、斜體、下劃線、刪除線
使用css樣式為網(wǎng)頁中的文字設(shè)置字體、字號、顏色等樣式屬性。例：
body{font-family:"宋體";}
注意不要設(shè)置不常用的字體，因為如果用戶本地電腦上沒有安裝率設(shè)置的字體，就會顯示瀏覽器默認(rèn)的字體。（因為用戶是否可以看到設(shè)置的字體樣式主要取決于用戶本地電腦上是否安裝了設(shè)置的字體）
一般的將網(wǎng)頁設(shè)置為微軟雅黑的樣式
body{font-family:"Microsoft Yahei";} ? ?//字體
body{font-size:20px; color:red;} ? ? ? ? ?//字號、顏色
*{font-weight:bold;} ? ? ? ? ? ? ? ? ? ? ? ? ? ?//粗體
*{font-style:italic;} ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //斜體
*{text-decoration:underline;} ? ? ? ? ? ? ?//下劃線
*{text-decoration:line-through; } ? ? ? ?//刪除線
2.段落排版——縮進(jìn)、行高、文字間距、字母間距、對齊
*{text-indent:2em;} ? ? ? ? ? ? ?//縮進(jìn)兩個空格 ? 2em的意思就是文字的2倍大小
*{line-height:2em;} ? ? ? ? ? ? ? //行高設(shè)置
*{letter-spacing:10px;} ? ? ? ?//文字間距、字母間距
*{text-align:center;} ? ? ? ? ? ?//居中對齊
四、css盒模型
1.元素分類
在css中，html中的元素大致被分為三種不同的類型：塊狀元素、內(nèi)聯(lián)元素（又稱行內(nèi)元素）和內(nèi)聯(lián)塊狀元素
常用的塊狀元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>
常用的內(nèi)聯(lián)元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的內(nèi)聯(lián)塊狀元素有：
<img>、<input>
2.塊級元素
在html中<div>、<p>、<h1>、<form>、<ul>和<li>就是塊級元素。設(shè)置display:block就是將元素顯示為塊級元素。
如將內(nèi)聯(lián)元素轉(zhuǎn)換為塊狀元素，從而使得*元素具有塊狀元素的特點。
*{display:block;}
塊狀元素的特點：
1.每個塊級元素都從新的一行開始，并且其后的元素也另起一行。（一個塊級元素獨占一行）
2.元素的高度、寬度、行高以及頂和底邊距都可以設(shè)置。
3.元素寬度在不設(shè)置的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設(shè)定一個寬度。
3.內(nèi)聯(lián)元素
在html中，<span>、<a>、<label>、<strong>、<em>就是典型的內(nèi)聯(lián)元素（行內(nèi)元素）(inline)元素。當(dāng)然，快內(nèi)元素也可以通過代碼display:inline將元素設(shè)置為內(nèi)聯(lián)元素。
如將快內(nèi)元素div轉(zhuǎn)換為內(nèi)聯(lián)元素，從而使div元素具有內(nèi)聯(lián)元素特點。
div{display:inline;}
內(nèi)聯(lián)元素的特點：
1.和其他元素都在一行上；
2.元素的高度、寬度以及頂部和底部邊距不可設(shè)置；
3.元素的寬度就是它包含的文字或圖片的寬度， 不可改變。
4.內(nèi)聯(lián)塊狀元素
內(nèi)聯(lián)塊狀元素（inline-block）就是同時具備內(nèi)聯(lián)元素、塊狀元素的特點，代碼display:inline-block就是將元素設(shè)置為內(nèi)聯(lián)塊狀元素。<img>、<input>標(biāo)簽就是這種內(nèi)聯(lián)塊狀元素。
inline-block元素特點：
1.和其他元素都在同一行上；
2.元素的高度、寬度、行高以及頂和底邊距都可設(shè)置。
5.盒模型
（1）邊框
盒子模型的邊框就是圍繞著內(nèi)容及補(bǔ)白的線，這條線可以設(shè)置粗細(xì)、樣式和顏色（邊框三個屬性）
如：
為div來設(shè)置邊框粗細(xì)為2px、樣式為實心的、顏色為紅色邊框：
div{border:2px ?solid ? red;}
等價于：
div{border-width:2px; border-style:solid; ?border-color:red;}
·邊框又分為：上邊框(border-top)、下邊框()border-bottom、左邊框(border-left)和右邊框(border-right)
p{border-left:2px solid #888}
注意：
1.border-style(邊框樣式)常見樣式有：dashed(虛線)|dotted（點線）|solid（實線）
2.border-color（邊框顏色）中的顏色可設(shè)置為十六進(jìn)制顏色，如：border-color:#888;
3.border-width（邊框?qū)挾龋┲械膶挾纫部梢栽O(shè)置為：thin|medium|thick，最常見的還是用像素來表示：px;
（2）寬度(width)和高度(height)
盒模型的寬度和高度和平常所說的寬度和高度的理解是不一樣的，css內(nèi)定義的寬(width)和高(height)。指的是填充以里的內(nèi)容范圍。因此一個元素實際寬度（盒子的寬度）=左邊界+左邊框+左填充+內(nèi)容寬度+右填充+右邊框+右邊界
比如:
css代碼：
div{
? ? width:200px;
? ? padding:20px;
? ? border:1px solid red;
? ? margin:10px;
}
html代碼：
<body>
? ? ? ? ? <div>文本內(nèi)容</div>
</body>
（3）填充
元素內(nèi)容與邊框之間是可以設(shè)置距離的，稱之為“填充”。填充也可分為上、右、下、左（順時針）
（4）邊界
元素與其他元素之間的距離可以使用邊界(margin)來設(shè)置。邊界也是可分為上、右、下、左。
邊界(margin)語法與padding(填充)一樣。
padding和margin的區(qū)別，padding在邊框里，margin在邊框外。
五.css布局模型
布局模型和盒模型一樣都是css最基本、最核心的概念。但布局模型是建立在盒模型基礎(chǔ)之上，又不同于常說的css布局樣式或css布局模板。如果說布局模型是本，那么css布局模板就是末了，是外在的表現(xiàn)形式。
css包含3中基本的布局模型：Flow、Layer和Float。
在網(wǎng)頁中，元素有三種布局模型：1.流動模型（Flow） 2.浮動模型（Float） 3.層模型（Layer）
1.流動模型
流動（Flow）是默認(rèn)的網(wǎng)頁布局模型。網(wǎng)頁在默認(rèn)狀態(tài)下的HTML網(wǎng)頁元素是根據(jù)流動模型來分布網(wǎng)頁內(nèi)容的。
流動布局模型具有兩個比較典型的特征：
1.塊元素都會在所處的包含元素內(nèi)自上而下按順序垂直延伸分布，因為在默認(rèn)狀態(tài)下，塊狀元素的寬度都為100%。實際上，塊狀元素都會以行的形式占據(jù)位置。
2.在流動模型下，內(nèi)聯(lián)元素都會在所處的包含元素內(nèi)從左到右水平分布顯示。（內(nèi)聯(lián)元素可不像塊狀元素那么霸道獨占一行）
2.浮動模型
塊狀元素都是獨占一行，但是可以通過設(shè)置元素浮動能夠使得兩個塊狀元素并排顯示。
任何元素在默認(rèn)情況下是不能浮動的，但可以用css定義為浮動，如：div、p、table、img等元素都可以定義為浮動。
樣式為:
*{float}
3.層模型
層布局模型就像是圖像軟件PhotoShop中非常流行的圖層編輯功能一樣，每個圖層能夠精確定位操作，但在網(wǎng)頁設(shè)計領(lǐng)域，由于網(wǎng)頁大小的活動性，層布局沒能受到熱捧。但是在網(wǎng)頁上局部使用層布局還是有其方便之處的。
層模型有三種形式：
1.絕對定位(position:absolute)
2.相對定位(position:relative)
3.固定定位(position:fixed)
（1）絕對定位
如果想為元素設(shè)置層模型中的絕對定位，需要設(shè)置position:absolute(表示絕對定位)，這條語句的作用將元素從文檔流中拖出來，然后使用left、right、top、bottom屬性相對于其最接近的一個具有定位屬性的父包含塊進(jìn)行絕對定位。如果不存在這樣的包含塊，則相對于body元素，即相對于瀏覽器窗口。
（2）相對定位
如果想為元素設(shè)置層模型中的相對定位，需要設(shè)置position:relative（表示相對定位），它通過left、right、top、bottom屬性確定元素在正常文檔流中的偏移位置。相對定位完成的過程是首先按static(float)方式生成一個元素（并且元素像層一樣浮動了起來），然后相對于以前的位置移動，移動的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動。
（3）固定定位
fixed：表示固定定位，與absolute定位類型類似，但它的相對移動的坐標(biāo)是視圖（屏幕內(nèi)的網(wǎng)頁窗口）本身。由于視圖本身是固定的，它不會隨瀏覽器窗口的滾動條滾動而變化，除非你在屏幕中
移動瀏覽器窗口的屏幕位置，或改變?yōu)g覽器窗口的顯示大小，因此固定定位的元素會始終位于瀏覽器窗口內(nèi)視圖的某個位置，不會受文檔流動影響，這與background-attachment:fixed;屬性功能相同。
（4）Relative和Absolute組合使用
可以通過Relative和Absolute來實現(xiàn)設(shè)置某個元素相對于其他元素進(jìn)行定位，但必須遵守的規(guī)則：
1.參照元素必須是相對定位元素的前輩元素
2.參照定位的元素必須加入position:relative;
3.定位元素加入position:absolute,便可以使用top、bottom、left、right來進(jìn)行偏移定位了。
六.CSS代碼縮寫，占用更少的帶寬
1.盒模型代碼簡寫
盒模型中的外邊距（margin）、內(nèi)邊距(padding)和邊框(border)設(shè)置上下左右四個方向的邊距是按照順時針方向設(shè)置的：上右下左。
具體例子：
margin:10px 15px 12px 14px;/*上設(shè)置為10px、右設(shè)置為15px、下設(shè)置為12px、左設(shè)置為14px*/
通常有下面三種縮寫方法：
1.如果top、right、bottom、left的值相同，如下面代碼：
margin:10px 10px 10px 10px;
可縮寫為：margin:10px;
2、如果top和bottom值相同、left和 right的值相同，如下面代碼：
margin:10px 20px 10px 20px;
可縮寫為：margin:10px 20px;
3、如果left和right的值相同，如下面代碼：
margin:10px 20px 30px 20px;
可縮寫為：margin:10px 20px 30px;
注意：padding、border的縮寫方法和margin是一致的。
2.顏色縮寫
顏色的css樣式同樣可以縮寫，當(dāng)設(shè)置顏色為16進(jìn)制的色彩值時，如果每兩位的值相同，可以縮寫一半。
例子1：p{color:#000000;}
可以縮寫為：p{color: #000;}
例子2：p{color: #336699;}
可以縮寫為：p{color: #369;}
3.字體縮寫
網(wǎng)頁中的字體css樣式代碼也有他自己的縮寫方式，下面是給網(wǎng)頁設(shè)置字體的代碼：
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;
}
注意：
1.使用這一簡寫方式至少要指定font-size和font-family屬性，其他的屬性（如：font-weight、font-style、font-varient、line-height）如未指定將自動使用默認(rèn)值。
2.在縮寫時font-size與font-height中間要加入"/"斜杠
一般情況下因為對于中文網(wǎng)站，英文還是比較少的，所以下面的縮寫比較常用：
body{font:12px/1.5em? "宋體",sans-serif;}
只是有字號、行間距、中文字體、英文字體設(shè)置
七.單位和值
1.顏色值
在網(wǎng)頁中顏色設(shè)置是非常重要的，有字體顏色(color)、背景顏色(background-color)、邊框顏色(border)等，設(shè)置顏色的方法也有很多種：
1.英文命令顏色
例：p{color:red;}
2.RGB顏色
這個與photoshop中的RGB顏色是一直的，有R(red)、G(green)、B(blue)三種顏色的比例來配色。
例：p{color:rgb(133, 45, 212);}
每一項的值可以是0-255之間的證書，也可以是0%-100%的百分?jǐn)?shù)。
例：p{color:rgb(20%, 33%, 45%);}
3.十六進(jìn)制顏色
這種顏色設(shè)置方法是現(xiàn)在比較普遍使用的方法。
其原理其實也是RGB設(shè)置，但是其每一項的值是由0-255變成十六至今00-ff。
例：p{color:#00ffff;}
2.長度值
長度單位總結(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
例：p{font-size:12px; text-line:2em;}
上面代碼就是可以實現(xiàn)段落首行縮進(jìn)24px（也就是兩個字體大小的距離）。
下面注意一個特殊情況：
但當(dāng)給font-size設(shè)置單位為em時，此時計算的標(biāo)準(zhǔn)以p的父元素的font-size為基礎(chǔ)。
例如：
html:
<p>以這個<span>例子</span>為例。</p>
css:
p{font-size:14px}
span{font-size:0.8em;}
結(jié)果 span 中的字體“例子”字體大小就為 11.2px（14 * 0.8 = 11.2px）。
3.百分比
p{font-size:12px; line-height:130%;}
設(shè)置行高（行間距）為字體的130%（12*1.3=15.6px）
八.CSS樣式的小技巧
1.水平居中設(shè)置
·行內(nèi)元素
被設(shè)置的元素是文本、圖片等行內(nèi)元素時，水平居中是通過父元素設(shè)置text-align:center來實現(xiàn)的
·定寬塊狀元素
被設(shè)置的為塊狀元素時用text-align:center就不起作用了，這是分兩種情況：定寬塊狀元素和不定寬塊狀元素。
滿足定寬和塊狀兩個條件的元素是可以通過設(shè)置“左右margin”值為“auto”來實現(xiàn)居中的
例：
? div.txtCenter{text-align:center;}
·不定寬塊狀元素方法
不定寬的塊狀元素有三種方法居中：
1.加入table標(biāo)簽
2.設(shè)置display:inline方法
3.設(shè)置position:relative和left:50%
1.加入table標(biāo)簽
第一步：為需要設(shè)置的居中的元素外面加一個table標(biāo)簽（包括<tbody>、<tr>、<td>）
第二步：為這個table設(shè)置“左右margin居中”（這個定寬塊狀元素的方法一樣）
2.設(shè)置display:inline方法
改變塊級元素的display為inline類型，然后使用text-align:center來實現(xiàn)居中效果。
這種方法相比于第一種方法的優(yōu)勢是不用增加無語義標(biāo)簽，簡化了標(biāo)簽的嵌套深度，但也存在著一些問題：它將塊狀元素的display類型改成了inline，變成了行內(nèi)元素，所以少了一些功能，比如設(shè)置長度值。
3.設(shè)置position：relative和left：50%
通過給父元素設(shè)置float，然后給父元素設(shè)置position:relative和left：50%，子元素設(shè)置position：relative和left：50%來實現(xiàn)水平居中
2.垂直居中
·父元素高度確定的單行文本
父元素高度確定的單行文本的豎直居中的方法是通過設(shè)置父元素的height和line-height高度一致來實現(xiàn)的。
·父元素高度確定的多行文本
父元素高度確定的多行文本、圖片、塊狀元素的豎直居中的方法有兩種：
方法一：使用插入table(包括tbody、tr、td)標(biāo)簽，同時設(shè)置vertical-align:middle
說到豎直居中，css中有一個用于豎直居中的屬性vertical-align，但這個樣式只有在父元素為td或th時，才會生效。所以要插入table標(biāo)簽了。
方法二：在chrome、firefox以及IE8以上的瀏覽器下可以設(shè)置塊級元素的display為table-cell，激活vertical-align屬性，但I(xiàn)E6、7并不支持這個樣式
這個方法的好處是不用添加多余的無意義的標(biāo)簽，但缺點也很明顯，它的兼容性不是很好，不兼容IE6、7
3.隱性改變display類型
當(dāng)為元素設(shè)置一下2個句之一：
1.position：absolute；
2.float：left或left：right；
元素會自動變?yōu)橐詃isplay:inline-block的方式顯示，當(dāng)然就可以設(shè)置元素的width和height了且默認(rèn)寬度不占滿父元素。
