僅為個人學(xué)習(xí)筆記粘昨，復(fù)習(xí)用
一. 定義
CSS全稱為“層疊樣式表 (Cascading Style Sheets)”，它主要是用于定義HTML內(nèi)容在瀏覽器內(nèi)的顯示樣式窜锯，如文字大小张肾、顏色、字體加粗等锚扎。使用CSS樣式的一個好處是通過定義某個樣式吞瞪，可以讓不同網(wǎng)頁位置的文字有著統(tǒng)一的字體、字號或者顏色等驾孔。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>認(rèn)識CSS樣式</title>
<style type="text/css">
p{
font-size:20px;/*設(shè)置文字字號*/
color:red;/*設(shè)置文字顏色*/
font-weight:bold;/*設(shè)置字體加粗*/
}
</style>
</head>
<body>
<p>啊啊啊啊啊</p>
</body>
</html>
二. 優(yōu)勢和<span></span>
為什么使用css樣式來設(shè)置網(wǎng)頁的外觀樣式呢芍秆？我們想把“超酷的互聯(lián)網(wǎng)”、“服務(wù)及時貼心”翠勉、“有趣易學(xué)”這三個短語的文本顏色設(shè)置為紅色妖啥，這時就 可以通過設(shè)置樣式來設(shè)置，而且只需要編寫一條css樣式語句对碌。
第一步：把這三個短語用<span></span>括起來荆虱。
第二步：寫入下列代碼：
span{
color:red;
}
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS樣式的優(yōu)勢</title>
<style type="text/css">
span{
color:red;
}
</style>
</head>
<body>
<p>慕課網(wǎng)，<span>超酷的互聯(lián)網(wǎng)</span>朽们、IT技術(shù)免費學(xué)習(xí)平臺怀读，創(chuàng)新的網(wǎng)絡(luò)一站式學(xué)習(xí)、實踐體驗骑脱；<span>服務(wù)及時貼心</span>菜枷，內(nèi)容專業(yè)、<span>有趣易學(xué)</span>惜姐。專注服務(wù)互聯(lián)網(wǎng)工程師快速成為技術(shù)高手犁跪！</p>
</body>
</html>
三. css語法代碼
css 樣式由選擇符和聲明組成，而聲明又由屬性和值組成歹袁，如下圖所示：
選擇符：又稱選擇器坷衍，指明網(wǎng)頁中要應(yīng)用樣式規(guī)則的元素，如本例中是網(wǎng)頁中所有的段（p）的文字將變成藍色条舔，而其他的元素（如ol）不會受到影響枫耳。
聲明：在英文大括號“｛｝”中的的就是聲明，屬性和值之間用英文冒號“：”分隔孟抗。當(dāng)有多條聲明時迁杨，中間可以英文分號“;”分隔钻心，如下所示：
p{font-size:12px;color:red;}
注意：
1、最后一條聲明可以沒有分號铅协，但是為了以后修改方便捷沸，一般也加上分號。
2狐史、為了使用樣式更加容易閱讀痒给，可以將每條代碼寫在一個新行內(nèi)，如下所示：
p{
font-size:12px;
color:red;
}
注釋代碼
就像在Html的注釋一樣骏全，在CSS中也有注釋語句：用/*注釋語句*/來標(biāo)明苍柏。
Html中使用<!--注釋語句-->。
四.CSS樣式基本知識
1. 內(nèi)聯(lián)式css樣式姜贡，直接寫在現(xiàn)有的HTML標(biāo)簽中
內(nèi)聯(lián)式css樣式表就是把css代碼直接寫在現(xiàn)有的HTML標(biāo)簽中试吁，如下面代碼：
<p style="color:red">這里文字是紅色。</p>
注意要寫在元素的開始標(biāo)簽里楼咳，下面這種寫法是錯誤的：
<p>這里文字是紅色熄捍。</p style="color:red"> 并且css樣式代碼要寫在style=""雙引號中，如果有多條css樣式代碼設(shè)置可以寫在一起爬橡，中間用分號隔開治唤。如下代碼：
<p style="color:red;font-size:12px">這里文字是紅色棒动。</p>
2.嵌入式css樣式糙申，寫在當(dāng)前的文件中
嵌入式css樣式，就是可以把css樣式代碼寫在<style type="text/css"></style>標(biāo)簽之間船惨。如下面代碼實現(xiàn)把<span>標(biāo)簽中的文字設(shè)置為紅色：
<style type="text/css">
span{
color:red;
}
</style>
嵌入式css樣式必須寫在<style></style>之間柜裸，并且一般情況下嵌入式css樣式寫在<head></head>之間。
3. 外部式css樣式粱锐，寫在單獨的一個文件中
外部式css樣式(也可稱為外聯(lián)式)就是把css代碼寫一個單獨的外部文件中疙挺，這個css樣式文件以“.css”為擴展名，在<head>內(nèi)（不是在<style>標(biāo)簽內(nèi)）使用<link>標(biāo)簽將css樣式文件鏈接到HTML文件內(nèi)怜浅，如下面代碼：
<link href="style.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)自点。
4. 對于同一個元素我們同時用了三種方法設(shè)置css樣式，哪種真正有效
這三種樣式是有優(yōu)先級的脉让，他們的優(yōu)先級：內(nèi)聯(lián)式 > 嵌入式 > 外部式
但是嵌入式>外部式有一個前提：嵌入式css樣式的位置一定在外部式的后面桂敛。如<link href="style.css" ...>代碼在<style type="text/css">...</style>代碼的前面（實際開發(fā)中也是這么寫的）功炮。
其實總結(jié)來說，就是--就近原則（離被設(shè)置元素越近優(yōu)先級別越高）术唬。
但注意上面所總結(jié)的優(yōu)先級是有一個前提：內(nèi)聯(lián)式薪伏、嵌入式、外部式樣式表中css樣式是在的相同權(quán)值的情況下粗仓。
四.CSS選擇器
1. 定義
每一條css樣式聲明（定義）由兩部分組成毅该，形式如下：
選擇器{
樣式;
}
在{}之前的部分就是“選擇器”，“選擇器”指明了{}中的“樣式”的作用對象潦牛，也就是“樣式”作用于網(wǎng)頁中的哪些元素眶掌。
2. 標(biāo)簽選擇器
標(biāo)簽選擇器其實就是html代碼中的標(biāo)簽。如<html>巴碗、<body>朴爬、<h1>、<p>橡淆、<img>召噩。例如下面代碼：
p{font-size:12px;line-height:1.6em;}
上面的css樣式代碼的作用：為p標(biāo)簽設(shè)置12px字號，行間距設(shè)置1.6em的樣式逸爵。
3.類選擇器.
類選擇器在css樣式編碼中是最常用到的具滴，如實現(xiàn)為“膽小如鼠”、“勇氣”字體設(shè)置為紅色师倔。
語法：
.類選器名稱{css樣式代碼;}
注意：
1构韵、英文圓點開頭
2、其中類選器名稱可以任意起名（但不要起中文噢）
使用方法：
第一步：使用合適的標(biāo)簽把要修飾的內(nèi)容標(biāo)記起來趋艘，如下：
<span>膽小如鼠</span>
第二步：使用class="類選擇器名稱"為標(biāo)簽設(shè)置一個類疲恢，如下：
<span class="stress">膽小如鼠</span>
第三步：設(shè)置類選器css樣式，如下：
.stress{color:red;}/類前面要加入一個英文圓點/
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>認(rèn)識html標(biāo)簽</title>
<style type="text/css">
.stress{
color:red;
}
</style>
</head>
<body>
<p>三年級時瓷胧，我還是一個<span class="stress">膽小如鼠</span>的小女孩显拳，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我搓萧。就一直沒有這個<span class="stress">勇氣</span>來回答老師提出的問題杂数。學(xué)校舉辦的活動我也沒勇氣參加。</p>
</body>
</html>
4. ID選擇器#
在很多方面瘸洛，ID選擇器都類似于類選擇器揍移，但也有一些重要的區(qū)別：
- 為標(biāo)簽設(shè)置id="ID名稱"，而不是class="類名稱"
- ID選擇符的前面是井號（#）號货矮，而不是英文圓點
<style type="text/css">
#stress{
color:red;
}
</style>
<span id="stress">膽小如鼠</span>
類和ID選擇器的區(qū)別
相同點：可以應(yīng)用于任何元素
不同點：
- ID選擇器只能在文檔中使用一次羊精。與類選擇器不同，在一個HTML文檔中，ID選擇器只能使用一次喧锦，而且僅一次读规。而類選擇器可以使用多次，ID值是唯一的 不能出現(xiàn)兩個id=box1 不是html整個標(biāo)簽中不能出現(xiàn)兩個id燃少，也就是說<div id="box1">box1</div>
<div id="box2">box2</div> 是可以的- 可以使用類選擇器詞列表方法為一個元素同時設(shè)置多個樣式束亏。我們可以為一個元素同時設(shè)多個樣式，但只可以用類選擇器的方法實現(xiàn)阵具，ID選擇器是不可以的（不能使用 ID 詞列表）碍遍。
下面的代碼是正確的
.stress{
color:red;
}
.bigsize{
font-size:25px;
}
<p>到了<span class="stress bigsize">三年級</span>下學(xué)期時，我們班上了一節(jié)公開課...</p>
上面代碼的作用是為“三年級”三個文字設(shè)置文本顏色為紅色并且字號為25px阳液。
下面的代碼是不正確的
#stressid{
color:red;
}
#bigsizeid{
font-size:25px;
}
<p>到了<span id="stressid bigsizeid">三年級</span>下學(xué)期時怕敬，我們班上了一節(jié)公開課...</p>
上面代碼不可以實現(xiàn)為“三年級”三個文字設(shè)置文本顏色為紅色并且字號為25px的作用。
5. 子選擇器>
還有一個比較有用的選擇器子選擇器帘皿，即大于符號(>),用于選擇指定標(biāo)簽元素的第一代子元素东跪。如
.food>li{border:1px solid red;}
這行代碼會使class名為food下的子元素li（水果、蔬菜）加入紅色實線邊框鹰溜。
<style type="text/css">
.food>li{border:1px solid red;}/*添加邊框樣式（粗細(xì)為1px虽填， 顏色為紅色的實線）*/
</style>
<ul class="food">
<li>水果
<ul>
<li>香蕉</li>
<li>蘋果</li>
<li>梨</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>白菜</li>
<li>油菜</li>
<li>卷心菜</li>
</ul>
</li>
</ul>
6. 包含(后代)選擇器
包含選擇器，即加入空格,用于選擇指定標(biāo)簽元素下的后輩元素曹动。
.first span{color:red;}
<p class="first">三年級時斋日，我還是一個<span>膽小如鼠</span>的小女孩，上課從來不敢回答老師提出的問題墓陈，生怕回答錯了老師會批評我恶守。</p>
這行代碼會使文字內(nèi)容中的“膽小如鼠”字體顏色變?yōu)榧t色。
請注意這個選擇器與子選擇器的區(qū)別跛蛋，子選擇器（child selector）僅是指它的直接后代熬的，或者你可以理解為作用于子元素的第一代后代。而后代選擇器是作用于所有子后代元素赊级。后代選擇器通過空格來進行選擇，而子選擇器是通過“>”進行選擇岔绸。
總結(jié)：>作用于元素的第一代后代理逊，空格作用于元素的所有后代。
7. 通用選擇器*
通用選擇器是功能最強大的選擇器盒揉，它使用一個（*）號指定晋被，它的作用是匹配html中所有標(biāo)簽元素，如下使用下面代碼使用html中任意標(biāo)簽元素字體顏色全部設(shè)置為紅色：
* {color:red;}
8.偽類選擇符
為什么叫做偽類選擇符刚盈，它允許給html不存在的標(biāo)簽（標(biāo)簽的某種狀態(tài)）設(shè)置樣式羡洛，比如說我們給html中一個標(biāo)簽元素的鼠標(biāo)滑過的狀態(tài)來設(shè)置字體顏色：
<style type="text/css">
a:hover{
color:red;
}
</style>
<a >百度</a>
上面一行代碼就是為 a 標(biāo)簽鼠標(biāo)滑過的狀態(tài)設(shè)置字體顏色變紅。這樣就會使第一段文字內(nèi)容中的“膽小如鼠”文字加入鼠標(biāo)滑過字體顏色變?yōu)榧t色特效藕漱。
關(guān)于偽選擇符：
關(guān)于偽類選擇符欲侮，到目前為止崭闲，可以兼容所有瀏覽器的“偽類選擇符”就是 a 標(biāo)簽上使用 :hover 了（其實偽類選擇符還有很多，尤其是 css3 中威蕉，但是因為不能兼容所有瀏覽器刁俭，只講了這一種最常用的）。其實 :hover 可以放在任意的標(biāo)簽上韧涨，比如說 p:hover牍戚，但是它們的兼容性也是很不好的，所以現(xiàn)在比較常用的還是 a:hover 的組合虑粥。
9.分組選擇符
當(dāng)你想為html中多個標(biāo)簽元素設(shè)置同一個樣式時如孝，可以使用分組選擇符（，）娩贷，如下代碼為h1暑竟、span標(biāo)簽同時設(shè)置字體顏色為紅色：
h1,span{color:red;}
它相當(dāng)于下面兩行代碼：
h1{color:red;}
span{color:red;}
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>分組選擇符</title>
<style type="text/css">
h1,span{color:red;}
.first,#second span{
color:green;
}
</style>
</head>
<body>
<h1>勇氣</h1>
<p class="first">三年級時，我還是一個<span>膽小如鼠</span>的小女孩育勺，上課從來不敢回答老師提出的問題但荤，生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題涧至。學(xué)校舉辦的活動我也沒勇氣參加腹躁。</p>
<p id="second">到了三年級下學(xué)期時，我們班上了一節(jié)公開課南蓬，老師提出了一個很<span>簡單</span>的問題纺非，班里很多同學(xué)都舉手了，甚至成績比我差很多的赘方，也舉手了烧颖，還說著："我來，我來窄陡。"我環(huán)顧了四周炕淮，就我沒有舉手。</p>
<img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" >
</body>
</html>
五.CSS的繼承跳夭，層疊和特殊性
1. 繼承
CSS的某些樣式是具有繼承性的涂圆，那么什么是繼承呢？繼承是一種規(guī)則币叹，它允許樣式不僅應(yīng)用于某個特定html標(biāo)簽元素润歉，而且應(yīng)用于其后代。比如下面代碼：如某種顏色應(yīng)用于p標(biāo)簽颈抚，這個顏色設(shè)置不僅應(yīng)用p標(biāo)簽踩衩，還應(yīng)用于p標(biāo)簽中的所有子元素文本，這里子元素為span標(biāo)簽。
p{color:red;}
<p>三年級時驱富，我還是一個<span>膽小如鼠</span>的小女孩锚赤。</p>
p中的文本與span中的文本都設(shè)置為了紅色。但注意有一些css樣式是不具有繼承性的萌朱。如border:1px solid red;
p{border:1px solid red;}
<p>三年級時宴树，我還是一個<span>膽小如鼠</span>的小女孩。</p>
在上面例子中它代碼的作用只是給p標(biāo)簽設(shè)置了邊框為1像素晶疼、紅色酒贬、實心邊框線，而對于子元素span是沒用起到作用的翠霍。
2. 特殊性
有的時候我們?yōu)橥粋€元素設(shè)置了不同的CSS樣式代碼锭吨，那么元素會啟用哪一個CSS樣式呢？下面我們一起來看一下代碼：
p{color:red;}
.first{color:green;}
<p class="first">三年級時寒匙，我還是一個<span>膽小如鼠</span>的小女孩零如。</p>
p和.first都匹配到了p這個標(biāo)簽上，那么會顯示哪種顏色呢锄弱？green是正確的顏色考蕾，那么為什么呢？是因為瀏覽器是根據(jù)權(quán)值來判斷使用哪種css樣式的会宪，權(quán)值高的就使用哪種css樣式肖卧。
下面是權(quán)值的規(guī)則：
標(biāo)簽的權(quán)值為1，類選擇符的權(quán)值為10掸鹅，ID選擇符的權(quán)值最高為100塞帐。例如下面的代碼：
p{color:red;} /*權(quán)值為1*/
p span{color:green;} /*權(quán)值為1+1=2*/
.warning{color:white;} /*權(quán)值為10*/
p span.warning{color:purple;} /*權(quán)值為1+1+10=12*/
#footer .note p{color:yellow;} /*權(quán)值為100+10+1=111*/
注意：還有一個權(quán)值比較特殊--繼承也有權(quán)值但很低，有的文獻提出它只有0.1巍沙，所以可以理解為繼承的權(quán)值最低葵姥。
3.層疊
層疊就是在html文件中對于同一個元素可以有多個css樣式存在，當(dāng)有相同權(quán)重的樣式存在時句携，會根據(jù)這些css樣式的前后順序來決定榔幸，處于最后面的css樣式會被應(yīng)用。
如下面代碼:
p{color:red;}
p{color:green;}
<p class="first">三年級時务甥，我還是一個<span>膽小如鼠</span>的小女孩牡辽。</p>
最后 p 中的文本會設(shè)置為green，這個層疊很好理解敞临，理解為后面的樣式會覆蓋前面的樣式。
所以前面的css樣式優(yōu)先級就不難理解了：
內(nèi)聯(lián)樣式表（標(biāo)簽內(nèi)部）> 嵌入樣式表（當(dāng)前文件中）> 外部樣式表（外部文件中）麸澜。
4. 重要性!important
我們在做網(wǎng)頁代碼的時挺尿，有些特殊的情況需要為某些樣式設(shè)置具有最高權(quán)值，怎么辦？這時候我們可以使用!important來解決编矾。
如下代碼：
p{color:red!important;}
p{color:green;}
<p class="first">三年級時熟史，我還是一個<span>膽小如鼠</span>的小女孩。</p>
這時 p 段落中的文本會顯示的red紅色窄俏。
注意：!important要寫在分號的前面
這里注意當(dāng)網(wǎng)頁制作者不設(shè)置css樣式時刹勃，瀏覽器會按照自己的一套樣式來顯示網(wǎng)頁钳幅。并且用戶也可以在瀏覽器中設(shè)置自己習(xí)慣的樣式，比如有的用戶習(xí)慣把字號設(shè)置為大一些，使其查看網(wǎng)頁的文本更加清楚卖毁。這時注意樣式優(yōu)先級為：瀏覽器默認(rèn)的樣式 < 網(wǎng)頁制作者樣式 < 用戶自己設(shè)置的樣式，但記住!important優(yōu)先級樣式是個例外扣孟，權(quán)值高于用戶自己設(shè)置的樣式良瞧。
六.CSS格式化排版
1. 字體
為網(wǎng)頁中的文字設(shè)置字體為宋體。
<style type="text/css">
body{font-family:"宋體";}
</style>
這里注意不要設(shè)置不常用的字體悄晃，因為如果用戶本地電腦上如果沒有安裝你設(shè)置的字體玫霎，就會顯示瀏覽器默認(rèn)的字體。（因為用戶是否可以看到你設(shè)置的字體樣式取決于用戶本地電腦上是否安裝你設(shè)置的字體妈橄。）
現(xiàn)在一般網(wǎng)頁喜歡設(shè)置“微軟雅黑”庶近，如下代碼：
body{font-family:"Microsoft Yahei";}
或
body{font-family:"微軟雅黑";}
注意：第一種方法比第二種方法兼容性更好一些。
因為這種字體即美觀又可以在客戶端安全的顯示出來（用戶本地一般都是默認(rèn)安裝的）眷蚓。
2. 字號鼻种，顏色
body{font-size:12px;color:#666}
3. 粗體，斜體
span{font-weight:bold;} 粗體
p{font-style:italic;} 斜體
4. 下劃線
p a{text-decoration:underline;}
<p>三年級時溪椎，我還是一個<a>膽小如鼠</a>的小女孩普舆。</p>
5. 刪除線
.oldPrice{text-decoration:line-through;}
<p>原價：<span class="oldPrice">300</span>元 現(xiàn)價：230 元</p>
6. 段落排版--縮進
中文文字中的段前習(xí)慣空兩個文字的空白，這個特殊的樣式可以用下面代碼來實現(xiàn)：
p{text-indent:2em;}
<p>1922年的春天校读，一個想要成名名叫尼克卡拉威的作家沼侣，離開了美國中西部，來到了紐約歉秫。</p>
注意：2em的意思就是文字的2倍大小蛾洛。
7.段落排版--行間距（行高）
如下代碼實現(xiàn)設(shè)置段落行間距為1.5倍。
p{line-height:1.5em;}
<p>菲茨杰拉德雁芙，二十世紀(jì)美國文學(xué)巨擘之一轧膘，兼具作家和編劇雙重身份。</p>
8. 段落排版--中文字間距兔甘、字母間距
如果想在網(wǎng)頁排版中設(shè)置文字間隔或者字母間隔就可以使用 letter-spacing 來實現(xiàn)谎碍，如下面代碼：
h1{
letter-spacing:50px;
}
<h1>了不起的蓋茨比</h1>
注意：這個樣式使用在英文單詞時，是設(shè)置字母與字母之間的間距洞焙。
單詞間距設(shè)置：
如果我想設(shè)置英文單詞之間的間距呢蟆淀？可以使用 word-spacing 來實現(xiàn)拯啦。如下代碼：
h1{
word-spacing:50px;
}
<h1>welcome to imooc!</h1>
9.段落排版--對齊
想為塊狀元素中的文本、圖片設(shè)置居中樣式熔任，可以使用text-align樣式代碼褒链。
如下代碼可實現(xiàn)文本居中顯示：
h1{
text-align:center;
}
<h1>了不起的蓋茨比</h1>
同樣可以設(shè)置居左：
h1{
text-align:left;
}
<h1>了不起的蓋茨比</h1>
還可以設(shè)置居右：
h1{
text-align:right;
}
<h1>了不起的蓋茨比</h1>
七.CSS盒模型
1. 元素分類
在CSS中，html中的標(biāo)簽元素大體被分為三種不同的類型：塊狀元素疑苔、內(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>臀突、
勉抓、<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)元素a轉(zhuǎn)換為塊狀元素瓮顽，從而使a元素具有塊狀元素特點。
a{display:block;}
塊級元素特點：
- 每個塊級元素都從新的一行開始围橡，并且其后的元素也另起一行暖混。（真霸道，一個塊級元素獨占一行）
- 元素的高度翁授、寬度儒恋、行高以及頂和底邊距都可設(shè)置善绎。
- 元素寬度在不設(shè)置的情況下黔漂，是它本身父容器的100%（和父元素的寬度一致）诫尽，除非設(shè)定一個寬度。
3. 元素分類--內(nèi)聯(lián)元素
在html中炬守，<span>牧嫉、<a>、<label>减途、 <strong> 和<em>就是典型的內(nèi)聯(lián)元素（行內(nèi)元素）（inline）元素酣藻。當(dāng)然塊狀元素也可以通過代碼display:inline將元素設(shè)置為內(nèi)聯(lián)元素。如下代碼就是將塊狀元素div轉(zhuǎn)換為內(nèi)聯(lián)元素鳍置，從而使 div 元素具有內(nèi)聯(lián)元素特點辽剧。
div{
display:inline;
}
<div>我要變成內(nèi)聯(lián)元素</div>
內(nèi)聯(lián)元素特點：
- 和其他元素都在一行上；
- 元素的高度税产、寬度及頂部和底部邊距不可設(shè)置怕轿；
- 元素的寬度就是它包含的文字或圖片的寬度，不可改變辟拷。
4. 元素分類--內(nèi)聯(lián)塊狀元素
內(nèi)聯(lián)塊狀元素（inline-block）就是同時具備內(nèi)聯(lián)元素撞羽、塊狀元素的特點，代碼display:inline-block就是將元素設(shè)置為內(nèi)聯(lián)塊狀元素衫冻。(css2.1新增)诀紊，<img>、<input>標(biāo)簽就是這種內(nèi)聯(lián)塊狀標(biāo)簽隅俘。
inline-block 元素特點：
- 和其他元素都在一行上邻奠；
- 元素的高度、寬度为居、行高以及頂和底邊距都可設(shè)置碌宴。
5. 內(nèi)邊距，外邊距颜骤，邊框
內(nèi)邊距：padding
外邊距：margin
邊框：border
內(nèi)邊距唧喉，外邊距，邊框都有四個方向忍抽，如padding-top八孝，padding-right，padding-bottom鸠项，padding-left
塊級標(biāo)簽都具有盒子模型的特征
6. 盒模型--邊框
盒子模型的邊框就是圍繞著內(nèi)容及補白的線干跛，這條線你可以設(shè)置它的粗細(xì)、樣式和顏色(邊框三個屬性)祟绊。
如下面代碼為 div 來設(shè)置邊框粗細(xì)為 2px楼入、樣式為實心的哥捕、顏色為紅色的邊框：
div{
border:2px solid red;
}
上面是 border 代碼的縮寫形式，可以分開寫：
div{
border-width:2px;
border-style:solid;
border-color:red;
}
注意：
- border-style（邊框樣式）常見樣式有：
dashed（虛線）| dotted（點線）| solid（實線）嘉熊。 - border-color（邊框顏色）中的顏色可設(shè)置為十六進制顏色遥赚，如:
border-color:#888;//前面的井號不要忘掉。 - border-width（邊框?qū)挾龋┲械膶挾纫部梢栽O(shè)置為：
thin | medium | thick（但不是很常用）阐肤，最常還是用像素（px）凫佛。
如果有想為 p 標(biāo)簽單獨設(shè)置下邊框，而其它三邊都不設(shè)置邊框樣式怎么辦呢孕惜？css 樣式中允許只為一個方向的邊框設(shè)置樣式：
div{border-bottom:1px solid red;}
同樣可以使用下面代碼實現(xiàn)其它三邊(上愧薛、右、左)邊框的設(shè)置：
border-top:1px solid red;
border-right:1px solid red;
border-left:1px solid red;
7. 盒模型--寬度和高度
盒模型寬度和高度和我們平常所說的物體的寬度和高度理解是不一樣的衫画，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>
元素的實際長度為：10px+1px+20px+200px+20px+1px+10px=262px。在chrome瀏覽器下可查看元素盒模型鲸郊，如下圖：
8. 盒模型--填充
元素內(nèi)容與邊框之間是可以設(shè)置距離的丰榴，稱之為“填充”。填充也可分為上秆撮、右四濒、下、左(順時針)职辨。如下代碼：
div{padding:20px 10px 15px 30px;}
順序一定不要搞混盗蟆。可以分開寫上面代碼：
div{
padding-top:20px;
padding-right:10px;
padding-bottom:15px;
padding-left:30px;
}
如果上舒裤、右喳资、下、左的填充都為10px;可以這么寫
div{padding:10px;}
如果上下填充一樣為10px腾供，左右一樣為20px仆邓，可以這么寫：
div{padding:10px 20px;}
9. 盒模型--邊界
元素與其它元素之間的距離可以使用邊界（margin）來設(shè)置。邊界也是可分為上伴鳖、右节值、下、左榜聂。如下代碼：
div{margin:20px 10px 15px 30px;}
也可以分開寫：
div{
margin-top:20px;
margin-right:10px;
margin-bottom:15px;
margin-left:30px;
}
如果上右下左的邊界都為10px;可以這么寫：
div{ margin:10px;}
如果上下邊界一樣為10px搞疗，左右一樣為20px，可以這么寫：
div{ margin:10px 20px;}
總結(jié)一下：padding和margin的區(qū)別须肆，padding在邊框里匿乃，margin在邊框外桩皿。
八.CSS布局模型
1. 布局模型
布局模型與盒模型一樣都是 CSS 最基本、 最核心的概念幢炸。 但布局模型是建立在盒模型基礎(chǔ)之上泄隔，又不同于我們常說的 CSS 布局樣式或 CSS 布局模板。如果說布局模型是本阳懂，那么 CSS 布局模板就是末了梅尤，是外在的表現(xiàn)形式。
CSS包含3種基本的布局模型岩调，用英文概括為：Flow、Layer 和 Float赡盘。
在網(wǎng)頁中号枕，元素有三種布局模型：
- 流動模型（Flow）
- 浮動模型 (Float)
- 層模型（Layer）
2. 流動模型
流動（Flow）是默認(rèn)的網(wǎng)頁布局模式。也就是說網(wǎng)頁在默認(rèn)狀態(tài)下的 HTML 網(wǎng)頁元素都是根據(jù)流動模型來分布網(wǎng)頁內(nèi)容的陨享。
流動布局模型具有2個比較典型的特征：
第一點葱淳，塊狀元素都會在所處的包含元素內(nèi)自上而下按順序垂直延伸分布，因為在默認(rèn)狀態(tài)下抛姑，塊狀元素的寬度都為100%赞厕。實際上，塊狀元素都會以行的形式占據(jù)位置定硝。如代碼中三個塊狀元素標(biāo)簽(div皿桑，h1，p)寬度顯示為100%蔬啡。
<style type="text/css">
#box1{
width:300px;
height:100px;
}
div,h1,p{
border:1px solid red;
}
</style>
<body>
<div id="box2">box2</div><!--塊狀元素诲侮，由于沒有設(shè)置寬度，寬度默認(rèn)顯示為100%-->
<h1>標(biāo)題</h1><!--塊狀元素箱蟆，由于沒有設(shè)置寬度沟绪，寬度默認(rèn)顯示為100%-->
<p>文本段文本段文本段。</p><!--塊狀元素空猜，由于沒有設(shè)置寬度绽慈，寬度默認(rèn)顯示為100%-->
<div id="box1">box1</div><!--塊狀元素，由于設(shè)置了width:300px辈毯，寬度顯示為300px-->
</body>
第二點坝疼，在流動模型下，內(nèi)聯(lián)元素都會在所處的包含元素內(nèi)從左到右水平分布顯示漓摩。（內(nèi)聯(lián)元素可不像塊狀元素這么霸道獨占一行）
代碼中內(nèi)聯(lián)元素標(biāo)簽a裙士、span、em管毙、strong都是內(nèi)聯(lián)元素
<body>
<a >www.imooc.com</a><span>強調(diào)</span><em>重點</em>
<strong>強調(diào)</strong>
</body>
3. 浮動模型
塊狀元素這么霸道都是獨占一行腿椎，如果現(xiàn)在我們想讓兩個塊狀元素并排顯示桌硫，怎么辦呢？不要著急啃炸，設(shè)置元素浮動就可以實現(xiàn)這一愿望铆隘。
任何元素在默認(rèn)情況下是不能浮動的，但可以用 CSS 定義為浮動南用，如 div膀钠、p、table裹虫、img 等元素都可以被定義為浮動肿嘲。如下代碼可以實現(xiàn)兩個 div 元素一行顯示。
div{
width:200px;
height:200px;
border:2px red solid;
float:left;
}
<div id="div1"></div>
<div id="div2"></div>
當(dāng)然你也可以同時設(shè)置兩個元素右浮動也可以實現(xiàn)一行顯示筑公。
div{
width:200px;
height:200px;
border:2px red solid;
float:right;
}
設(shè)置兩個元素一左一右一行顯示：
div{
width:200px;
height:200px;
border:2px red solid;
}
#div1{float:left;}
#div2{float:right;}
4. 層模型
什么是層布局模型雳窟？層布局模型就像是圖像軟件PhotoShop中非常流行的圖層編輯功能一樣，每個圖層能夠精確定位操作匣屡，但在網(wǎng)頁設(shè)計領(lǐng)域封救，由于網(wǎng)頁大小的活動性，層布局沒能受到熱捧捣作。但是在網(wǎng)頁上局部使用層布局還是有其方便之處的誉结。下面我們來學(xué)習(xí)一下html中的層布局。
如何讓html元素在網(wǎng)頁中精確定位券躁，就像圖像軟件PhotoShop中的圖層一樣可以對每個圖層能夠精確定位操作惩坑。CSS定義了一組定位（positioning）屬性來支持層布局模型。
層模型有三種形式：
- 絕對定位(position: absolute)
- 相對定位(position: relative)
- 固定定位(position: fixed)
層模型--絕對定位
如果想為元素設(shè)置層模型中的絕對定位嘱朽，需要設(shè)置position:absolute(表示絕對定位)旭贬，這條語句的作用將元素從文檔流中拖出來，然后使用left搪泳、right稀轨、top、bottom屬性相對于其最接近的一個具有定位屬性的父包含塊進行絕對定位岸军。如果不存在這樣的包含塊奋刽，則相對于body元素，即相對于瀏覽器窗口艰赞。
如下面代碼可以實現(xiàn)div元素相對于瀏覽器窗口向右移動100px佣谐，向下移動50px。
div{
width:200px;
height:200px;
border:2px red solid;
position:absolute;
left:100px;
top:50px;
}
<div id="div1"></div>
層模型--相對定位
如果想為元素設(shè)置層模型中的相對定位方妖，需要設(shè)置position:relative（表示相對定位）狭魂，它通過left、right、top雌澄、bottom屬性確定元素在正常文檔流中的偏移位置斋泄。相對定位完成的過程是首先按static(float)方式生成一個元素(并且元素像層一樣浮動了起來)，然后相對于以前的位置移動镐牺，移動的方向和幅度由left炫掐、right、top睬涧、bottom屬性確定募胃，偏移前的位置保留不動。
如下代碼實現(xiàn)相對于以前位置向下移動50px畦浓，向右移動100px;
#div1{
width:200px;
height:200px;
border:2px red solid;
position:relative;
left:100px;
top:50px;
}
<div id="div1"></div>
什么叫做“偏移前的位置保留不動”呢痹束？
<body>
<div id="div1"></div><span>偏移前的位置還保留不動，覆蓋不了前面的div沒有偏移前的位置</span>
</body>
效果圖：
從效果圖中可以明顯的看出宅粥，雖然div元素相對于以前的位置產(chǎn)生了偏移参袱，但是div元素以前的位置還是保留著，所以后面的span元素是顯示在了div元素以前位置的后面秽梅。
層模型--固定定位
fixed：表示固定定位，與absolute定位類型類似剿牺，但它的相對移動的坐標(biāo)是視圖（屏幕內(nèi)的網(wǎng)頁窗口）本身企垦。由于視圖本身是固定的，它不會隨瀏覽器窗口的滾動條滾動而變化晒来，除非你在屏幕中移動瀏覽器窗口的屏幕位置钞诡，或改變?yōu)g覽器窗口的顯示大小，因此固定定位的元素會始終位于瀏覽器窗口內(nèi)視圖的某個位置湃崩，不會受文檔流動影響荧降，這與background-attachment:fixed;屬性功能相同。以下代碼可以實現(xiàn)相對于瀏覽器視圖向右移動100px攒读，向下移動50px朵诫。并且拖動滾動條時位置固定不變。
#div1{
width:200px;
height:200px;
border:2px red solid;
position:fixed;
left:100px;
top:50px;
}
<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本薄扁。</p>
Relative與Absolute組合使用
相對于其它元素進行定位
- 參照定位的元素必須是相對定位元素的前輩元素：
<div id="box1"><!--參照定位的元素-->
<div id="box2">相對參照元素進行定位</div><!--相對定位元素-->
</div>
從上面代碼可以看出box1是box2的父元素（父元素當(dāng)然也是前輩元素了）剪返。
- 參照定位的元素必須加入position:relative;
#box1{
width:200px;
height:200px;
position:relative;
}
- 定位元素加入position:absolute，便可以使用top邓梅、bottom脱盲、left、right來進行偏移定位了日缨。absolute將元素從文檔流中拖出來钱反。父相子絕
#box2{
position:absolute;
top:20px;
left:30px;
}
這樣box2就可以相對于父元素box1定位了（這里注意參照物就可以不是瀏覽器了，而可以自由設(shè)置了）。
九. CSS代碼縮寫面哥，占用更少的帶寬
1. 盒模型代碼簡寫
盒模型外邊距(margin)哎壳、內(nèi)邊距(padding)和邊框(border)設(shè)置上下左右四個方向的邊距是按照順時針方向設(shè)置的：上右下左。具體應(yīng)用在margin和padding的例子如下：
margin:10px 15px 12px 14px;/上設(shè)置為10px幢竹、右設(shè)置為15px耳峦、下設(shè)置為12px、左設(shè)置為14px/
通常有下面三種縮寫方法:
- 如果top焕毫、right蹲坷、bottom、left的值相同邑飒，如下面代碼：
margin:10px 10px 10px 10px;
可縮寫為：
margin:10px;
- 如果top和bottom值相同循签、left和 right的值相同，如下面代碼：
margin:10px 20px 10px 20px;
可縮寫為：
margin:10px 20px;
- 如果left和right的值相同疙咸，如下面代碼：
margin:10px 20px 30px 20px;
可縮寫為：
margin:10px 20px 30px;
注意：padding县匠、border的縮寫方法和margin是一致的。
2. 顏色值縮寫
關(guān)于顏色的css樣式也是可以縮寫的撒轮，當(dāng)你設(shè)置的顏色是16進制的色彩值時乞旦，如果每兩位的值相同，可以縮寫一半题山。
例子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;
}
注意：
- 使用這一簡寫方式你
至少要指定 font-size 和 font-family 屬性，其他的屬性(如 font-weight顶瞳、font-style玖姑、font-variant、line-height)如未指定將自動使用默認(rèn)值慨菱。 - 在縮寫時
font-size 與 line-height 中間要加入“/”斜扛焰络。
一般情況下因為對于中文網(wǎng)站，英文還是比較少的符喝，所以下面縮寫代碼比較常用：
body{
font:12px/1.5em "宋體",sans-serif;
}
只是有字號闪彼、行間距、中文字體洲劣、英文字體設(shè)置备蚓。
九.單位和值
1. 顏色值
在網(wǎng)頁中的顏色設(shè)置是非常重要，有字體顏色（color）囱稽、背景顏色（background-color）郊尝、邊框顏色（border）等，設(shè)置顏色的方法也有很多種：
英文命名顏色
p{color:red;}RGB顏色
這個與 photoshop 中的 RGB 顏色是一致的战惊，由 R(red)流昏、G(green)、B(blue) 三種顏色的比例來配色。
p{color:rgb(133,45,200);}
每一項的值可以是 0~255 之間的整數(shù)况凉，也可以是 0%~100% 的百分?jǐn)?shù)谚鄙。如：
p{color:rgb(20%,33%,25%);}-
十六進制顏色
這種顏色設(shè)置方法是現(xiàn)在比較普遍使用的方法，其原理其實也是 RGB 設(shè)置刁绒，但是其每一項的值由 0-255 變成了十六進制 00-ff闷营。
p{color:#00ffff;}
配色表：
2. 長度值
長度單位總結(jié)一下，目前比較常用到px（像素）知市、em傻盟、% 百分比，要注意其實這三種單位都是相對單位嫂丙。
像素
像素為什么是相對單位呢娘赴？因為像素指的是顯示器上的小點（CSS規(guī)范中假設(shè)“90像素=1英寸”）。實際情況是瀏覽器會使用顯示器的實際像素值有關(guān)跟啤，在目前大多數(shù)的設(shè)計者都傾向于使用像素（px）作為單位诽表。em
就是本元素給定字體的 font-size 值，如果元素的 font-size 為 14px 隅肥，那么 1em = 14px竿奏；如果 font-size 為 18px，那么 1em = 18px腥放。如下代碼：
p{font-size:12px;text-indent:2em;}
上面代碼就是可以實現(xiàn)段落首行縮進 24px（也就是兩個字體大小的距離）议双。
下面注意一個特殊情況：
但當(dāng)給 font-size 設(shè)置單位為 em時，此時計算的標(biāo)準(zhǔn)以 span 的父元素的 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）汞舱。
- 百分比
p{font-size:12px;line-height:130%}
設(shè)置行高（行間距）為字體的130%（12 * 1.3 = 15.6px）伍纫。
十.CSS樣式設(shè)置小技巧
1. 水平居中設(shè)置-行內(nèi)元素
我們在實際工作中常會遇到需要設(shè)置水平居中的場景，比如為了美觀昂芜，文章的標(biāo)題一般都是水平居中顯示的莹规。
這里我們又得分兩種情況：行內(nèi)元素 還是 塊狀元素 ，塊狀元素里面又分為定寬塊狀元素泌神，以及不定寬塊狀元素良漱。今天我們先來了解一下行內(nèi)元素怎么進行水平居中？
如果被設(shè)置元素為文本欢际、圖片等行內(nèi)元素時母市，水平居中是通過給父元素設(shè)置 text-align:center 來實現(xiàn)的。(父元素和子元素：如下面的html代碼中损趋，div是“我想要在父容器中水平居中顯示”這個文本的父元素患久。反之這個文本是div的子元素 )如下代碼：
html代碼：
<body>
<div class="txtCenter">我想要在父容器中水平居中顯示。</div>
</body>
css代碼：
<style>
.txtCenter{
text-align:center;
}
</style>
2. 水平居中設(shè)置-定寬塊狀元素
當(dāng)被設(shè)置元素為 塊狀元素 時用 text-align：center 就不起作用了，這時也分兩種情況：定寬塊狀元素和不定寬塊狀元素蒋失。
定寬塊狀元素：塊狀元素的寬度width為固定值返帕。
滿足定寬和塊狀兩個條件的元素是可以通過設(shè)置“左右margin”值為“auto”來實現(xiàn)居中的。我們來看個例子就是設(shè)置 div 這個塊狀元素水平居中：
html代碼：
<body>
<div>我是定寬塊狀元素篙挽，哈哈荆萤，我要水平居中顯示。</div>
</body>
css代碼：
<style>
div{
border:1px solid red;/*為了顯示居中效果明顯為 div 設(shè)置了邊框*/
width:200px;/*定寬*/
margin:20px auto;/* margin-left 與 margin-right 設(shè)置為 auto */
}
</style>
也可以寫成：
margin-left:auto;
margin-right:auto;
注意：元素的“上下 margin” 是可以隨意設(shè)置的铣卡。
3. 水平居中總結(jié)-不定寬塊狀元素方法
在實際工作中我們會遇到需要為“不定寬度的塊狀元素”設(shè)置居中链韭，比如網(wǎng)頁上的分頁導(dǎo)航，因為分頁的數(shù)量是不確定的算行，所以我們不能通過設(shè)置寬度來限制它的彈性梧油。(不定寬塊狀元素：塊狀元素的寬度width不固定。)
不定寬度的塊狀元素有三種方法居中（這三種方法目前使用的都很多）：
- 加入 table 標(biāo)簽
利用table標(biāo)簽的長度自適應(yīng)性---即不定義其長度也不默認(rèn)父元素body的長度（table其長度根據(jù)其內(nèi)文本長度決定）州邢，因此可以看做一個定寬度塊元素儡陨，然后再利用定寬度塊狀居中的margin的方法，使其水平居中量淌。
第一步：為需要設(shè)置的居中的元素外面加入一個 table 標(biāo)簽 ( 包括 <tbody>骗村、<tr>、<td> )呀枢。
第二步：為這個 table 設(shè)置“左右 margin 居中”（這個和定寬塊狀元素的方法一樣）胚股。
舉例如下：
html代碼：
<div>
<table>
<tbody>
<tr><td>
<ul>
<li>我是第一行文本</li>
<li>我是第二行文本</li>
<li>我是第三行文本</li>
</ul>
</td></tr>
</tbody>
</table>
</div>
css代碼：
<style>
table{
border:1px solid;
margin:0 auto;
}
</style>
- 設(shè)置 display: inline 方法：與第一種類似，顯示類型設(shè)為 行內(nèi)元素裙秋，進行不定寬元素的屬性設(shè)置琅拌。
改變塊級元素的 display 為 inline 類型（設(shè)置為 行內(nèi)元素 顯示），然后使用text-align:center來實現(xiàn)居中效果摘刑。如下例子：
html代碼：
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>
css代碼：
<style>
.container{
text-align:center;
}
/* margin:0;padding:0（消除文本與div邊框之間的間隙）*/
.container ul{
list-style:none;
margin:0;
padding:0;
display:inline;
}
/* margin-right:8px（設(shè)置li文本之間的間隔）*/
.container li{
margin-right:8px;
display:inline;
}
</style>
- 設(shè)置 position:relative 和 left:50%：利用 相對定位 的方式进宝，將元素向左偏移 50% ，即達到居中的目的
通過給父元素設(shè)置 float枷恕，然后給父元素設(shè)置 position:relative 和 left:50%悠抹，子元素設(shè)置 position:relative 和 left: -50% 來實現(xiàn)水平居中计寇。
我們可以這樣理解：假想ul層的父層（即下面例子中的div層）中間有條平分線將ul層的父層（div層）平均分為兩份掐禁，ul層的css代碼是將ul層的最左端與ul層的父層（div層）的平分線對齊毛秘；而li層的css代碼則是將li層的平分線與ul層的最左端（也是div層的平分線）對齊，從而實現(xiàn)li層的居中胡控。
代碼如下：
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>
<style>
.container{
float:left;
position:relative;
left:50%
}
.container ul{
list-style:none;
margin:0;
padding:0;
position:relative;
left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}
</style>
4. 垂直居中-父元素高度確定的單行文本
我們在實際工作中也會遇到需要設(shè)置垂直居中的場景扳剿，比如好多報紙的文章標(biāo)題在左右一側(cè)時，常常會設(shè)置為垂直居中铜犬，為了用戶體驗性好舞终。
這里我們又得分兩種情況：父元素高度確定的單行文本轻庆，以及父元素高度確定的多行文本。
父元素高度確定的單行文本的豎直居中的方法是通過設(shè)置父元素的 height 和 line-height 高度一致來實現(xiàn)的敛劝。(height: 該元素的高度余爆，line-height: 顧名思義，行高（行間距）夸盟，指在文本中蛾方，行與行之間的 基線間的距離 )。
line-height 與 font-size 的計算值之差上陕，在 CSS 中成為“行間距”桩砰。分為兩半，分別加到一個文本行內(nèi)容的頂部和底部释簿。
這種文字行高與塊高一致帶來了一個弊端：當(dāng)文字內(nèi)容的長度大于塊的寬時亚隅，就有內(nèi)容脫離了塊。
如下代碼：
<div class="container">
hi,imooc!
</div>
css代碼：
<style>
.container{
height:100px;
line-height:100px;
background:#999;
}
</style>
5. 垂直居中-父元素高度確定的多行文本
父元素高度確定的多行文本庶溶、圖片等的豎直居中的方法有兩種：
方法一：使用插入 table (包括tbody煮纵、tr、td)標(biāo)簽偏螺，同時設(shè)置 vertical-align：middle行疏。
css 中有一個用于豎直居中的屬性 vertical-align，在父元素設(shè)置此樣式時套像，會對inline-block類型的子元素都有用酿联。下面看一下例子：
html代碼：
<body>
<table><tbody><tr><td class="wrap">
<div>
<p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
</body>
css代碼：
table td{height:500px;background:#ccc}
因為 td 標(biāo)簽?zāi)J(rèn)情況下就默認(rèn)設(shè)置了 vertical-align 為 middle夺巩，所以我們不需要顯式地設(shè)置了贞让。
方法二：在 chrome、firefox 及 IE8 以上的瀏覽器下可以設(shè)置塊級元素的 display 為 table-cell（設(shè)置為表格單元顯示）柳譬，激活 vertical-align 屬性震桶，但注意 IE6、7 并不支持這個樣式, 兼容性比較差征绎。
html代碼：
<div class="container">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中磨取。</p>
<p>看我是否可以居中人柿。</p>
</div>
</div>
css代碼：
<style>
.container{
height:300px;
background:#ccc;
display:table-cell;/*IE8以上及Chrome、Firefox*/
vertical-align:middle;/*IE8以上及Chrome忙厌、Firefox*/
}
</style>
這種方法的好處是不用添加多余的無意義的標(biāo)簽凫岖，但缺點也很明顯，它的兼容性不是很好逢净，不兼容 IE6哥放、7而且這樣修改display的block變成了table-cell歼指，破壞了原有的塊狀元素的性質(zhì)。
6. 隱性改變display類型
有一個有趣的現(xiàn)象就是當(dāng)為元素（不論之前是什么類型元素甥雕，display:none 除外）設(shè)置以下 2 個句之一：
float : left 或 float:right
簡單來說踩身，只要html代碼中出現(xiàn)以上兩句之一，元素的display顯示類型就會自動變?yōu)橐?display:inline-block（內(nèi)聯(lián)塊狀元素）的方式顯示社露，當(dāng)然就可以設(shè)置元素的 width 和 height 了挟阻，且默認(rèn)寬度不占滿父元素。
如下面的代碼峭弟， a 標(biāo)簽是 行內(nèi)元素 附鸽，所以設(shè)置它的 width 是 沒有效果的，但是設(shè)置為 position:absolute 以后瞒瘸，就可以了坷备。
<div class="container">
<a href="#" title="">進入課程請單擊這里</a>
</div>
<style>
.container a{
position:absolute;
width:200px;
background:#ccc;
}
</style>
