一、CSS定義與編寫CSS
1.1 CSS的定義
全名：Cascading Style Sheets -> 層疊樣式表
定義：CSS成為層疊樣式表，它主要用於設置HTML頁面中的文本內容（字體、大小、對齊方式等）、圖片的外形（寬高、邊框樣式、邊距等）以及版面的布局等外觀顯示樣式。CSS以HTML為基礎，提供了豐富的功能（如字體、顏色、背景的控制以及整體排版等等），還可以針對不同的瀏覽器設置不同的樣式。
1.2 HTML、CSS與JS三者的關系
HTML：頁面結構，負責從語義的角度搭建頁面結構。
CSS：頁面樣式表現，負責從審美的角度美化頁面。
JavaScript：交互行為，負責從交互的角度提升用戶體驗。
1.3 編寫CSS樣式
（1）缺省樣式：瀏覽器樣式
所有的標簽在不同的瀏覽器中都有各自默認的樣式，如h1,h2,p,div,span,ul等，可以通過設置修改瀏覽器的樣式。
（2）內嵌樣式：style屬性
<p style="color:red">This is tag of paragraph</p>
（3）內嵌樣式：head標簽中添加style標簽
<style type="text/css"> p { color:green; /*設置字體顏色*/ } </style>
（4）外部樣式：外聯樣式link -> 推薦方式
<link rel="stylesheet" href="css/main.css">
（5）導入樣式：@import -> 不推薦使用的方式，會導致css不能並行下載，並且要求導入樣式的書寫必須在所有的css規則書寫之前。
<style type="text/css"> /*將某一個css文件的樣式直接導入到當前位置*/ @import url(css/main.css); p { color:green; /*設置字體顏色*/ background-color:silver; } </style>
二、CSS語法與選擇器
2.1 CSS語法
(1) 語法
（2）注釋
單/多行注釋：/* this is comment */
2.2 CSS選擇器
（1）通配符選擇器
通配符選擇器使用“*”號表示，它是所有選擇器中作用范圍最廣的，能匹配頁面中所有的元素，如下面的css代碼，它使用通配符選擇器定義css樣式，清楚所有HTML標記的默認邊距：
* { margin: 0; /* 定義外邊距 */ padding: 0; /* 定義內邊距 */ }
Note: 通配符的穿透力很強，其優先級高於繼承的樣式，會覆蓋繼承的樣式，一般情況下都不會使用。
（2）標簽選擇器
通過變簽名來選擇一類標簽，例如我們將所有的p標簽都設置成為紅色字體：
p { color: red; }
（3）ID選擇器
HTML標簽都有公共ID屬性，而且整個頁面唯一。ID選擇器使用“#”號進行標識，后面緊跟ID名字。
#contentBody { color: blue; font-weight: bold; }
ID選擇器命名規范：
- 只允許出現字母（大小寫均可，嚴格區分）、下划線、數字。
- 只允許以字母開頭。
- 命名沒有長度限制，不過不建議過長。
- 不允許出現標簽名。
Note: ID選擇器的優先級非常高，所以確定在整個頁面內唯一出現時，才開一使用，否則因為優先級問題在后續維護中不能很好進行修改和更新。
（4）類選擇器
類選擇器可以對HTML標簽中class屬性進行選擇，其選擇符是"."，例如：
.demo { color: green; }
ID選擇器與class選擇器的區別：
1.相同的class屬性值，可以在HTML中出現多次，ID屬性值在頁面中則只能出現一次。
2.一個class的屬性可以有多個值，也就是說一個標簽可以有多個類。
（5）復合選擇器
復合選擇器是由兩個或多個基礎選擇器，通過不同的方式組合而成的，具體如下：
① 標簽指定式選擇器
標簽指定式選擇器有兩個選擇器構成，其中第一個為標記選擇器，第二個為class選擇器或id選擇器，兩個選擇器之間不能有空格，如：h3.special, p#one等等。
② 后代選擇器
后代選擇器用來選擇元素或元素組的后代，其寫法就是把外層標記寫在前面，內層標記寫在后面，中間用空格分隔。當標記發生嵌套時，內層標記就曾為外層標記的后代。
③ 並集選擇器
並集選擇器是各個選擇器通過逗號連接而成的，任何形式的選擇器（包括標記選擇器、class累選擇器、id選擇器等等），都可以作為並集選擇器的一部分。如果某些選擇器定義的樣式完全相同，或部分相同，就可以利用並集選擇器為它們定義相同的css樣式。
④ 子元素選擇器
子元素選擇器是讓css選擇器只能選擇兒子輩的元素，例如：h1>strong { color : red; }
解讀為：選擇器 h1 > strong 可以理解為“選擇作為h1元素子元素的所有strong元素”，尖括號和選擇器之間可以有空格也可以沒有，沒有限制。
建議：選擇器和尖括號之間保留空格。
（6）屬性選擇器
/* 選擇所有的文本框標簽 */ input[type="textbox"] { color:red; } /* 選擇包含aside類的所有div標簽 */ div[class~="aside"] { background-color: green; } /* 選擇擁有id和class屬性的p標簽 */ p[id][class] { line-height: 30px; }
2.2 CSS偽類與偽元素
狀態是動態變化的，當一個元素到達一個特定狀態時，它可能得到一個樣式，當狀態改變時，又失去這個樣式。
它的功能和class有些類似，但它是基於文檔之外的抽象，所以叫偽類。
（1）CSS偽類
:link -> 該偽類將應用於未被訪問過的鏈接，IE6不兼容。一般不用此偽類，直接使用a標簽。
:hover -> 該偽類將應用於有鼠標指針懸停於其上的元素，在IE6只能應用於a標簽，IE7+所有元素都兼容。
:active -> 該偽類將應用於被激活的元素，例如被點擊的鏈接、被按下的按鈕登等。
:visited -> 該偽類將應用於已經被訪問過的鏈接。
:focus -> 該偽類將應用於擁有鍵盤輸入焦點的元素。
（2）CSS偽元素
偽元素是控制內容，例如 :
:first-line與:first-letter，這兩個偽元素只能用於塊級元素。前者用於選擇第一行，后者用於選擇第一個字符。
p.artcle:first-line { color:red; } p.artcle:first-letter { color:green; }
:first-child偽元素選擇屬於第一個子元素的元素。
span:first-child { vertical-align: middle; }
:before與:after偽元素則可以設置元素之前和之后的內容，並且配合content設置相關內容。
#demo:after,#demo:before { content:"--"; display: block; }
2.2 CSS層疊性和繼承性
（1）層疊性
所謂層疊性是指多種css樣式的疊加，例如，當使用內嵌css樣式表定義p標記字號大小為12像素，鏈入式定義p標記顏色為紅色，那么段落文本將顯示為12像素紅色，即這兩種樣式產生了疊加。
（2）繼承性
所謂繼承性是指寫css樣式表時，子標記會繼承父標記的某些樣式，例如文本顏色和字號。想要設置一個可繼承的屬性，只需要將它應用於父元素即可。
恰當地使用繼承可以簡化代碼，降低css樣式的復雜性。但是，如果在網頁中所有的元素都大量繼承樣式，那么判斷樣式的來源就會很困難，所以對於字體、文本屬性等網頁中通用的樣式可以使用繼承。例如，字體、字號、顏色、行距等可以在body元素中統一設置，然后通過繼承影響文檔中的所有文本。
Note： 並不是所有的css屬性都可以繼承，例如下面的屬性就不具有繼承性：
邊框、外邊距、內邊距、背景、定位、元素寬高屬性等。
所有盒子相關的屬性都不能繼承。
三、CSS選擇器優先級
3.1 優先級概覽
定義css樣式時，經常出現兩個或多個規則應用在同一元素上，這時就會出現優先級的問題。
- 內聯樣式最大->內聯樣式的優先級最高；
- ID選擇器優先級僅次於內聯樣式；
- 類選擇器優先級次於ID選擇器；
- 標簽選擇器最低；
3.2 繼承樣式權重為0
在嵌套結構中，不管父元素樣式的權重多大，被子元素繼承時，它的權重都為0，也就是說，子元素定義的樣式會覆蓋繼承來的樣式。
3.3 行內樣式權重最高
應用style屬性的元素，其行內樣式的權重非常高，可以理解為遠大於100。總之，它擁有比上面提到的選擇器都大的優先級。
3.4 權重相同則就近原則
權重相同時，CSS遵循就近原則，即靠近元素的樣式具有最大的優先級，或者說排在最后的樣式優先級最高。
所有都相同時，聲明靠后的優先級最大。
3.5 !important命令最大優先級
CSS定義了一個!important命令，該命令被賦予最大的優先級，也就是說不管權重如何以及樣式位置的遠近，!important都具有最大優先級。
綜述：
（1）行內樣式>頁內樣式>外部引用樣式>瀏覽器默認樣式
（2）important>內聯>ID>偽類/類/屬性選擇>標簽>偽對象>通配符>繼承
四、CSS單位與文字排版
4.1 標簽的顯示模式與Display屬性
（1）標簽的類型
HTML標記一般分為 塊標記 和 行內標記 兩種類型，它們也稱為 塊元素 和 行內元素。
塊元素：每個塊元素都會獨自占據一整行或多整行，可以對其設置寬度、高度、對齊等屬性，常用於網頁布局和網頁結構的搭建。常見的塊元素有：h1,h6,p,div,ul,ol,li等，其中div標記是最典型的塊元素。
行內元素：行內元素不會占有獨立的區域，僅僅依靠自身的字體大小和圖像尺寸來支撐結構，一般不可以設置寬度、高度、對齊等屬性，常用於控制頁面中文本的樣式。常見的行內元素有strong,b,em,i,del,s,ins,u,a,span等，其中span標記是最典型的行內元素。
（2）Display屬性
display屬性可以控制標簽的顯示模式，它有四個可選值：none/inline/block/inline-block。
其中，none代表此元素不被顯示，在文檔中被刪除；
block代表按塊級元素顯示，前后帶換行符，自己占一行。
inline代表按內聯元素顯示，一個挨着一個。
inline-block代表按行內標簽進行排版，但是可以設置寬高，而且高度可以影響行高。
4.2 CSS的顏色值和單位
（1）命名顏色
red,black,white,purple,green,yellow,silver,gray,teal,blue,navy ...
（2）RGB顏色表示法
RGB模式表示色彩，三種顏色組合疊加可以產生自然界中所有的顏色，也是計算機常用模式。RGB顏色值規定的規范為：rgb(red, green, blue)，每個參數定義顏色的強度，可以是介於0到255之間的整數，也可以是百分比值。
（3）十六進制顏色值
由於RGB模式書寫十分不方便，三個255值直接用3個十六進制數表示。十六進制顏色規定的規范為：#RRGGBB，其中RR（紅色）、GG（綠色）、BB（藍色）的十六進制整數規定了顏色的部分，所優質必須介於0余FF之間。
取值范圍 #000000 ~ #FFFFFF （黑色到白色），十六進制顏色值其實就是RGB模式的另外一種寫法，所有瀏覽器都兼容。
（4）CSS的長度單位
px：像素點，像素就是顯示器顯示的一個點。
em：1em等於當前的字體大小。例如，當前元素的字體大小為16px，那么1em=16px。
單位之間的關系：1in = 2.54cm = 25.4mm =96px
4.3 CSS的文字排版
（1）font-size ：字號大小
font-size屬性用於設置字號，該屬性的值既可以使用相對長度單位，也可以使用絕對長度單位。其中，相對長度單位比較有用，推薦使用像素單位px，絕對長度單位使用較少。
（2）font-family : 字體
font-family 屬性用於設置字體，可以同時指定多個字體，中間以逗號隔開，表示如果瀏覽器不支持第一個字體，則會嘗試下一個，直到直到合適的字體。
（3）font-weight :字體粗細
（4）font-style : 字體風格
可以設置斜體、傾斜或正常字體。
（5）letter-spacing : 字間距
letter-spacing 屬性用於定義字間距，所謂字間距就是字符與字符之間的空白，其屬性可為不同單位的數值，允許使用負數值，默認為normal。
（6）word-spacing : 單詞間距
word-spacing屬性用於定義英文單詞之間的間距，對中文字符無效。和letter-spacing一樣，其屬性值可以為不同單位的數值，允許使用負數值，默認為normal。
word-spacing和letter-spacing均可對英文進行設置，不同之處在於letter-spacing定義的是字母之間的間距，而word-spacing定義的是英文單詞之間的間距。
（7）line-height : 行間距
line-height屬性用於設置行間距，就是行與行之間的距離，即字符的垂直間距，一般稱為行高。
（8）text-indent : 首行縮進
text-indent屬性用於設置段落首行文本的鎖緊，只能設置塊級標簽。其屬性值可為不同單位的數值、em字符寬度的倍數、或相對於瀏覽器窗口寬度的百分比%，允許使用負數值，建議使用em作為設置單位。
（9）word-break ：自動換行
normal 使用瀏覽器默認的換行規則，不打斷單詞顯示；
break-all 允許在單詞內換行；
keep-all 只能在半角空格或連字符處換行；
（10）word-wrap ：允許長單詞或URL地址換行到下一行
normal 只在允許的段字點換行（瀏覽器保持默認處理）
break-word 在長單詞或URL地址內部進行換行
五、盒子模型
5.1 認識盒子模型
所謂盒子模型就是把HTML頁面中的元素看作是一個矩形的盒子，也就是一個盛裝內容的容器。每個矩形都由元素的內容、內邊距（padding）、邊框（border）和外邊距（margin）組成。因此，可以說網頁就是多個盒子嵌套排列的結果。
內邊距出現在內容區域的周圍，當給元素添加背景色或背景圖像時，該元素的背景色或背景圖像也將出現在內邊距中。
外邊距是該元素與相鄰元素之間的距離。
如果給元素定義邊框屬性，邊框將會出現在內邊距和外邊距之間。
PS: doctype是盒子模型的基礎，沒有確定doctype，直接談盒子模型就是耍流氓。
5.2 盒子模型相關屬性
盒子的總寬度 = width+左右內邊距之和+左右邊框寬度之和；
盒子的總高度 = height+上下邊框寬度之和+上下邊距之和；
5.3 盒子模型邊距
（1）內邊距
padding屬性用於設置內邊距，復合屬性。
.box{ /* 上 右 下 左 */ padding:20px 5px 10px 5px; border:1px solid #09c; width:100px; height:100px; }
（2）外邊距
margin屬性用於設置外邊距，復合屬性。實際中經常對塊元素應用寬度屬性width，並將左右的外邊距設置為auto，可以使塊級元素水平居中，實際工作中常用這種方式進行網頁布局。
.header { width:960px; margin:0px auto; }
此外，為了更方便地控制網頁中的元素，制作網頁時，可以使用如下代碼清除元素的默認內邊距：
* { padding:0; /* 清除內邊距 */ margin:0; /* 清除外邊距 */ }
（3）行內元素關於padding和margin的問題
行內元素不要設置上下的padding和margin，因為上下padding和margin不會起作用，當然，左右padding和margin還是會起作用。
（4）相鄰塊元素垂直外邊距的合並
當上下相鄰的兩個塊元素相遇時，如果上面的元素有下外邊距margin-bottom，下面的元素有上外邊距margin-top，則它們之間的垂直間距不是margin-botton和margin-top之和，而是取兩者之中的較大者。這種現象就被稱為相鄰塊元素垂直外邊距的合並（也稱為外邊距塌陷）。
（5）嵌套塊元素垂直外邊距的合並
當塊級元素進行嵌套時，如果父盒子沒有設置上邊框和上內邊距的話，子盒子的上外邊距和父盒子的上外邊距會進行合並。合並后的外邊距為兩者中的較大者，即使父元素的上外邊距為0，也會發生合並。
如果希望外邊距不合並，那么可以為父元素定義1像素的上邊框或上內邊距。這里以定義父元素的上邊框為例，在父div元素的css樣式中假如以下樣式：
.father { border-top:1px solid #fcc; }
六、深入浮動
6.1 浮動原理
（1）標准流
要了解浮動，就不得不先了解html中的標准流。標准流實際上就是一個網頁內標簽元素正常排列的順序的意思，比如塊級元素會獨占一行，行內元素會按照順序依次從左向右，從上向下排列；按照這種大前提的布局排列之下絕對不會出現列外的情況叫做標准流布局，也稱為流式布局。
（2）浮動原理
浮動的本質就是：解決圖片和文字並排的格式問題。元素浮動后，會脫離標准流，但是還會影響標准流的布局。
6.2 浮動處理
（1）使用元素浮動屬性float
在css中，通過float屬性來定義浮動，其基本語法格式如下：
.box { float:left; }
（2）浮動特性
1.浮動脫離標准流，不占位置，但會影響標准流。浮動只有左右浮動。
2.浮動的元素A排列位置，跟上一個元素（塊級）有關系。
如果上一個元素有浮動，則A元素頂部和上一個元素的頂部對齊；
如果上一個元素是標准流，則A元素的頂部會和上一個元素的底部對齊。
3.一個父盒子里面的子盒子，如果其中一個子級有浮動的，則其他子級都需要浮動，這樣才能一行對其顯示。
4.浮動根據元素書寫的位置來顯示相應的浮動。
5.元素添加浮動之后，如果沒有設置寬高的話，元素會具有行內塊元素的特性。元素的大小完全取決於定義的大小或者默認的內容多少，也就具有了包裹性。
6.浮動具有破壞性，元素浮動后，破壞原來的正常流布局，造成內容塌陷。
6.3 內容溢出處理
（1）父容器高度塌陷
如果一個標准流中的合資所有的子元素都進行了浮動，而且盒子沒有設置高度，那么父容器的整個高度會塌陷。
（2）overflow屬性
如何實現自適應包裹浮動子元素呢？可以使用overflow屬性。當盒子內的元素超出盒子自身的大小時，內容就會溢出（IE6除外），這時如果想要規范溢出的顯示方式，就需要使用css的overflow屬性，其基本語法格式如下：
overflow : 屬性值
overflow常用的屬性值如下：
七、深入布局
7.1 布局基礎
（1）版心與布局流程
版心是指網頁中主體內容所在的區域，一般在瀏覽器窗口中水平居中顯示，常見的寬度值為960px,980px,1000px等。
為了提高網頁制作的效率，布局時通常需要遵守一定的布局流程，具體如下：
Step1.確定頁面的版心（可視區）
Step2.分析頁面中的行模塊，以及每個行模塊中的列模塊
Step3.運用盒模型的原理，通過div+css布局來控制網頁的各個模塊
（2）最基本的布局示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>06LayoutDemoFirst</title> <style> * { padding:0; margin: 0; } .header,.nav,.main,.footer { background-color:silver; border:1px solid black; margin-bottom:10px; } .header { height:100px; } .nav,.main { height:200px; } .nav { float:left; width:200px; } .main { margin-left:202px; } .footer { height:50px; } </style> </head> <body> <div class="header"> header </div> <div class="nav"> nav </div> <div class="main"> main </div> <div class="footer"> footer </div> </body> </html>
7.2 定位
（1）定位模式
在css中，position屬性用於定義元素的定位模式，其基本語法格式為：
.position { position:static|relative|absolute|fixed; }
（2）邊偏移
在css中，通過邊偏移屬性top,bottom,left或right，來經確定位元素的位置，其取值為不同單位的數值或百分比，具體解釋如下表所示：
.box2 { position:relative; right:-30px; top:-30px; }
（3）靜態定位
靜態定位是元素的默認定位方式，當position屬性值為static時，可以將元素定位於靜態位置。所謂靜態位置就是各個元素在HTML文檔流中默認的位置。
在靜態定位狀態下，無法通過邊偏移屬性（top、bottom、left或right）來改變元素的位置。
（4）相對定位
相對定位是將元素相對於它在標准流中的位置進行定位，當position屬性的取值為relative時，可以將元素定位於相對位置。對元素設置相對定位后，可以通過邊偏移屬性改變元素的位置，但是它在文檔流中的位置仍然保留。如下圖所示，這就是一個相對定位的效果展示：
（5）絕對定位
絕對定位是將元素根據最近的已經定位（絕對、固定或相對定位）的父元素進行定位，若所有父元素都沒有定位，則依據body根元素進行定位。當position屬性的取值為absolute時，可以將元素的定位模式設置為絕對定位。如下圖所示，這就是一個絕對定位的效果展示：
（6）固定定位
固定定位是絕對定位的一種特殊形式，它以瀏覽器窗口作為參照物來定義網頁元素。當position屬性的取值為fixed時，即可將元素的定位模式設置為固定定位。
當對元素設置為固定定位后，它將脫離標准文檔流的控制，始終依據瀏覽器窗口來定義自己的顯示位置。不管瀏覽器滾動條如何滾動，也不管瀏覽器窗口的大小如何變化，該元素都會始終顯示在瀏覽器窗口的固定位置。
比如網頁中常見的回到頂部按鈕，就是一個典型固定定位案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>14FixedPositionDemo</title> <style type="text/css"> .box { background-color:teal; height:1500px; } .fixed-box { height:40px; width:40px; background-color:blue; border: 1px solid #000; position:fixed; right:0px; bottom:0px; color:white; } </style> </head> <body> <div class="box"> <div class="fixed-box"> 回到頂部 </div> <h1>1</h1> <h1>2</h1> <h1>3</h1> <h1>4</h1> <h1>5</h1> <h1>6</h1> <h1>7</h1> <h1>8</h1> <h1>9</h1> <h1>10</h1> <h1>11</h1> <h1>12</h1> <h1>13</h1> <h1>14</h1> <h1>15</h1> <h1>16</h1> <h1>17</h1> <h1>18</h1> <h1>19</h1> <h1>20</h1> <h1>21</h1> <h1>22</h1> <h1>23</h1> <h1>24</h1> <h1>25</h1> <h1>26</h1> <h1>27</h1> <h1>28</h1> <h1>29</h1> <h1>30</h1> <h1>31</h1> <h1>32</h1> <h1>33</h1> <h1>34</h1> <h1>35</h1> <h1>36</h1> <h1>37</h1> <h1>38</h1> <h1>39</h1> <h1>40</h1> <h1>41</h1> <h1>42</h1> <h1>43</h1> <h1>44</h1> <h1>45</h1> <h1>46</h1> <h1>47</h1> <h1>48</h1> <h1>49</h1> <h1>50</h1> <h1>51</h1> <h1>52</h1> <h1>53</h1> <h1>54</h1> <h1>55</h1> <h1>56</h1> <h1>57</h1> <h1>58</h1> <h1>59</h1> <h1>60</h1> <h1>61</h1> <h1>62</h1> <h1>63</h1> <h1>64</h1> <h1>65</h1> <h1>66</h1> <h1>67</h1> <h1>68</h1> <h1>69</h1> <h1>70</h1> <h1>71</h1> <h1>72</h1> <h1>73</h1> <h1>74</h1> <h1>75</h1> <h1>76</h1> <h1>77</h1> <h1>78</h1> <h1>79</h1> <h1>80</h1> <h1>81</h1> <h1>82</h1> <h1>83</h1> <h1>84</h1> <h1>85</h1> <h1>86</h1> <h1>87</h1> <h1>88</h1> <h1>89</h1> <h1>90</h1> <h1>91</h1> <h1>92</h1> <h1>93</h1> <h1>94</h1> <h1>95</h1> <h1>96</h1> <h1>97</h1> <h1>98</h1> <h1>99</h1> <h1>100</h1> <h1>101</h1> <h1>102</h1> <h1>103</h1> <h1>104</h1> <h1>105</h1> <h1>106</h1> <h1>107</h1> <h1>108</h1> <h1>109</h1> <h1>110</h1> <h1>111</h1> <h1>112</h1> <h1>113</h1> <h1>114</h1> <h1>115</h1> <h1>116</h1> <h1>117</h1> <h1>118</h1> <h1>119</h1> <h1>120</h1> <h1>121</h1> <h1>122</h1> <h1>123</h1> <h1>124</h1> <h1>125</h1> <h1>126</h1> <h1>127</h1> <h1>128</h1> <h1>129</h1> <h1>130</h1> <h1>131</h1> <h1>132</h1> <h1>133</h1> <h1>134</h1> <h1>135</h1> <h1>136</h1> <h1>137</h1> <h1>138</h1> <h1>139</h1> <h1>140</h1> <h1>141</h1> <h1>142</h1> <h1>143</h1> <h1>144</h1> <h1>145</h1> <h1>146</h1> <h1>147</h1> <h1>148</h1> <h1>149</h1> <h1>150</h1> </div> </body> </html>
（7）z-index層疊等級屬性
當對多個元素同時設置定位時，定位元素之間有可能發生重疊：
在css中，要想調整重疊定位元素的堆疊順序，可以對定位元素應用z-index層疊等級屬性，其取值可以為正整數、負整數和0。z-index的默認屬性是0，取值越大，定位元素在層疊元素中越居上。
定義靠后的，默認在之前的元素之上，但切記不要濫用z-index。同時，父容器的z-index會影響子元素的層級級別。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>13Z-Index Demo</title> <style type="text/css"> *{ padding:0; margin:0; } .wrap{ width:400px; margin:0 auto; background-color:silver; height:400px; border: 1px solid #000; position:relative; } .box1,.box2,.box3 { border: 1px solid teal; height:100px; width:100px; background-color:yellowgreen; position:absolute; } .box1{ background-color:white; top:0px; left:0px; z-index:300; } .box2 { background-color:yellow; top:30px; left:30px; z-index:200; } .box3 { background-color:red; top:60px; left:60px; z-index:250; } </style> </head> <body> <div class="wrap"> <div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div> </div> </body> </html>
7.3 清除浮動
（1）為何要清除浮動
由於浮動元素不再占用原文檔流的位置，所以它會對頁面中其他元素的排版產生影響，這時就需要在該元素中清除浮動。其本質是閉合浮動，之所以要用清除浮動，就是為了解決內部高度為0的問題。
（2）clear屬性清除浮動
在css中，clear屬性用於清除浮動，其基本語法格式為：
.footer { clear:both|left|right; }
（3）常見清除浮動方法
①使用空標記清除浮動，隔牆放->增加一個空標簽
.clear { clear:both; } <div class="clear"> </div>
②使用overflow屬性清除浮動->會誤傷
③使用after偽對象清除浮動
必須要為需要清除浮動的元素偽對象設置height:0的樣式，否則該元素會比其實際高度高出若干像素。
/*對類名為father父元素應用after偽對象樣式*/ .clearfix:after { display:block; clear:both; content:""; visibility:hidden; height:0; }
④使用before after偽對象清除浮動->clearfix
.clearfix { zoom:1; } .clearfix:before,.clearfix:after { content:""; display:block; clear:both; height:0; }
7.4 三欄自適應布局實現
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>15ThreeColumnDemo</title> <style type="text/css"> .sub-nav,.aside { width:200px; height:300px; background-color:teal; } .sub-nav { float:left; } .aside { float:right; } .main { margin-left:202px; margin-right:202px; height:300px; background-color:yellowgreen; } </style> </head> <body> <div class="sub-nav">sub-nav</div> <div class="aside">aside</div> <div class="main">main</div> </body> </html>
現在更為廣泛的是采用類似於淘寶的“聖杯布局”來處理這種布局的實現。
7.5 京東導航案例實現
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jd menu</title> <style type="text/css"> * { padding:0; margin:0 auto; } ul { list-style:none; font-family:"微軟雅黑"; border-bottom: 2px solid #B1191A; display:table; } a,a:visited { color:#000; font-size:15px; text-decoration:none; } a:hover { color:#c81632; text-decoration:none; } li { float:left; } li a { float:left; padding-left:10px; margin-right:30px; height:40px; line-height:40px; } </style> </head> <body> <ul> <li><a href="#">服裝城</a></li> <li><a href="#">美妝館</a></li> <li><a href="#">超市</a></li> <li><a href="#">全球購</a></li> <li><a href="#">閃購</a></li> <li><a href="#">團購</a></li> <li><a href="#">拍賣</a></li> <li><a href="#">金融</a></li> <li><a href="#">智能</a></li> </ul> </body> </html>
八、CSS實戰技巧
8.1 CSS常用技巧
（1）CSS規避脫標
標准流是極其穩定的寫法，很多地方我們盡量使用標准流，其次使用float，最后選擇定位。
①margin-left:auto; 左側外邊距自動
②vertical-align和inline-block可以使盒子和文字對齊
（2）CSS元素可見性
（3）常用標簽嵌套
①內聯元素不能包含塊元素，它只能包含其他的內聯元素
例如：span>div -> 錯誤 div>div>ul>li>div -> 錯誤
②有些塊級元素不能放其他塊級元素
例如：標題標記（h1,h2,h3,h4,h5,h6,caption）、段落標記（p,p>div）、分隔線（hr,dt）
③a標簽不能嵌套a和input 標簽，能嵌套的標簽像b,strong等等
（4）CSS內容溢出某個區域
常用於logo優化
①利用text-index:-2000em；
②利用padding擠開盒子，並且overflow切割；
③利用margin拉動盒子，配合overflow切割；
8.2 CSS精靈技術
（1）CSS精靈背景
當用戶訪問一個網站時，需要向服務器發送請求，網頁上的每張圖像都要經過一次請求才能展現給用戶。然而，一個網頁中往往會應用很多小的背景圖像作為修飾，當網頁中的圖像過多時，服務器就會頻繁地接收和發送請求，這將大大地降低頁面的加載速度。為了有效地減少服務器接受和發送請求的次數，提高頁面的加載速度，出現了CSS精靈技術（也稱為CSS Sprites）。
（2）CSS精靈本質
簡單來說，CSS精靈是一種處理網頁背景圖像的方式，它將一個頁面所涉及到的所有零星背景圖像都集中到一張大圖中去，然后將大圖應用於網頁。這樣當用戶訪問該頁面時，只需要向服務發送一次請求，網頁中的背景圖像即可全部展示出來。通常情況下，這個由很多小的背景圖像合成的大圖被稱為精靈圖。
（3）CSS精靈原理
CSS精靈其實就是將網頁中的一些背景圖像整合到一張大圖中，然而，各個網頁元素通常只需要精靈圖中不同位置的某個小圖，要想精確定位到精靈圖中的某個小圖，就需要使用css中的background-image、background-repeat和background-position屬性進行背景定位，其中最關鍵的就是background-position屬性進行精確地定位。
（4）CSS精靈案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>20CssSpritesDemo</title> <style type="text/css"> * { padding:0; margin:0; font-family:'Microsoft Yahei'; } .icon { vertical-align:middle; display:inline-block; height:55px; width:55px; background:url(image/taobao-css-sprites-image.png) no-repeat 0px -175px; } .wrap { font-size:15px; line-height:55px; margin-left:10px; } </style> </head> <body> <div class="wrap"> <i class="icon"></i><span>旅行</span> </div> </body> </html>
8.3 CSS滑動門技術
（1）CSS滑動門背景
制作網頁時，為了美觀，通常需要為網頁元素設置特殊形狀的背景，如下圖所示，即為設置圓角背景的導航。
如果使用傳統CSS思想，要想為列表項“技術聯盟”設置上圖所示的圓角背景，可以對其所在的li標記應用大圓角背景。這種方式固然可以實現圓角背景的效果，但是，如果以后增加或減少列表項中的文字，就需要重新對li定義背景圖像，以適應文本內容的多少。
（2）CSS滑動門
為了使各種特殊形狀的背景能夠自適應元素中文本內容的多少，出現了CSS滑動門技術。它從新的角度構建頁面，使得各種特殊形狀的背景能夠自由拉伸滑動，以適應元素內部的文本內容，可用性更強。
8.4 Margin負值的應用
制作網頁時，為了拉開元素之間的距離，通常給元素設置大於0的外邊距margin。其實，在實際工作中，為了實現一些特殊的效果，經常需要將元素的margin設置為負值，如下圖所示的元素重疊效果。
而對於應用了inline-block的行內元素，默認會有一些空隙。也可以通過為margin設置負值去除空隙。當然，還有其他的方法：
①去除空格，將代碼都放在一行。
②給父級添加font-size:0。
③使用letter-spacing或word-spacing。
8.5 關於CSS選擇器的解析順序
CSS解析順序：從最右選擇器進行篩選，然后依次向左進行過濾。
例如：
#aside div .tit { color: red; }
如上代碼所示，CSS解析器會首先過濾.tit，然后過濾div，最后過濾#aside元素，因此為了效率，選擇器層次嵌套最好不要超過3層，否則會造成一些性能上的損失（雖然也不是太大）。
參考資料
馬倫，《Web前端基礎教程之CSS》