CSS 高級
一、CSS 盒模型（Box Model）
全部 HTML 元素均可以看做是盒子，在 CSS 中，「Box Model」這一術語主要是在佈局時使用。css
CSS 盒模型（Box Model）規定了處理元素內容、邊框、內邊距 和 外邊距 的方式。html
CSS 盒模型本質上是一個盒子，封裝周圍的 HTML 元素，它包括：外填充也叫外邊距（margin），邊框（border），內填充也叫內邊距（padding）和實際內容（content）。盒模型容許咱們在其它元素和周圍元素邊框之間的空間放置元素。前端
以下 CSS 盒子模型圖：git
盒子模型的最內層是盒子的實際內容（content），顯示文本和圖像。直接包圍內容的是內邊距（padding），清楚內容周圍的區域，內邊距呈現了元素的背景，會受到框中填充的背景顏色影響。內邊距的邊緣是邊框（border），邊框之外是外邊距（margin），外邊距沒有背景顏色，默認是透明的，所以不會遮擋其後的任何元素。背景應用於由內容和內邊距、邊框組成的區域。盒模型就比如一套茶杯，爲了不損壞，每一個茶杯的周圍都會被填充一些東西，這些填充就是內邊距，再用盒子把茶杯裝起來，裝茶杯的盒子就是邊框，一套茶杯不可能只有一個，全部的茶杯會用一個精美包裝的大盒子再裝起來，那麼每一個裝茶杯的小盒子之間的距離就是外邊距。github
內邊距、邊框和外邊距都是可選的，默認值是零。可是，許多元素將由瀏覽器樣式表（瀏覽器缺省值）設置外邊距和內邊距。所以能夠將元素的 margin 和 padding 設置爲零來覆蓋這些瀏覽器樣式。瀏覽器
在 CSS 中，width 和 height 指的是內容區域的寬度和高度。增長內邊距、邊框和外邊距不會影響內容區域的尺寸，可是會增長元素盒子的總尺寸。爲了確保在全部瀏覽器中元素的寬度和高度設置正確，有必要了解盒模型是如何工做的。服務器
當指定一個 CSS 元素的寬度和高度屬性時，只是設置了內容區域的寬度和高度，徹底大小的元素，還必須添加內邊距，邊框和外邊距。以下設置盒子的樣式：ide
1 #box{ 2 width:200px; 3 height:100px; 4 padding:20px; 5 border:10px solid blue; 6 margin:30px; 7 }
上面例子中，ID 爲 box 的寬爲 200 像素，高爲 100 像素，內邊距爲 20 像素，邊框爲 10 像素，外邊距是 30 像素，下圖是在 Firefox 中計算出的佈局樣式：工具
那麼該元素的總寬度實際爲：30+10+20+200+20+10+30= 320px佈局
實際高度爲：30+10+20+100+20+10+30= 220px
最終元素的總寬度計算公式是：總元素的寬度=內容寬度+左外邊距+右外邊距+左邊框+右邊框+左內邊距+右內邊距。
元素的總高度最終計算公式是：總元素的高度=內容高度+頂外邊距+底外邊距+頂邊框+底邊框+頂內邊距+底內邊距。
根據 W3C 的規範，元素內容佔據的空間是由 width 屬性設置的，而內容周圍的 padding 和 border 值是另外計算的。內邊距、邊框和外邊距能夠應用於一個元素的全部邊，也能夠應用於單獨的邊。外邊距能夠是負值，並且在不少狀況下都要使用負值的外邊距，內邊距不能夠是負值。
margin 屬性的值設爲負值即負邊距，在 CSS 佈局中是一個頗有用的技巧。當 margin-top 、 margin-left 爲負值的時候，會把元素上移、左移，同時文檔流中的位置也發生相應變化，這點與 position:relative 的元素設置 top、left 後元素還佔據原來位置不一樣。當 margin-bottom 、 margin-right 設爲負值的時候，元素自己沒有位置變化，後面的元素會下移、右移。
當元素被設置爲絕對定位時，其 top、right、bottom、left 值是指元素自身的邊界到最近的已定位祖先元素的距離，這個元素自身的邊界指的就是 margin 定義的邊界，因此，若是 margin 爲正的時候，那它的邊界是向外擴的，即下移/右移，若是 margin 爲負的時候，則它的邊界是向內收的，即上移/左移，利用這點，就有了經典的利用絕對定位來居中的方法：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>垂直居中</title> 6 <style> 7 *{padding;margin:0;} 8 #box{ 9 width:200px; 10 height:200px; 11 margin:10px auto; 12 border:1px solid blue; 13 position:relative; 14 } 15 #box .content{ 16 width:100px; 17 height:100px; 18 background:green; 19 position:absolute; 20 top:50%; 21 left:50%; 22 margin-top:-50px; 23 margin-left:-50px; 24 } 25 </style> 26 </head> 27 <body> 28 <div id="box">盒子 29 <div class="content">內容</div> 30 </div> 31 </body> 32 </html>
把元素設置爲絕對定位，而後設置 top 和 left 爲 50%，這時候元素的上邊界、左邊界就到了父元素的 50% 處，再對元素設置其自身寬度和高度一半的負邊距，使元素中心移動到父元素中心，實現居中對齊。
負邊距對於浮動元素的影響和上面的狀況同樣，不過有其特殊性，以下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>負邊距對浮動元素的影響</title> 6 <style> 7 *{padding;margin:0;} 8 #box{ 9 width:280px; 10 border:1px solid black; 11 overflow:hidden; 12 } 13 #box .float{ 14 width:100px; 15 height:100px; 16 float:left; 17 } 18 #box .float:nth-child(1){ 19 background:red; 20 } 21 #box .float:nth-child(2){ 22 background:yellow; 23 } 24 #box .float:nth-child(3){ 25 background:blue; 26 } 27 </style> 28 </head> 29 <body> 30 <div id="box"> 31 <div class="float">1</div> 32 <div class="float">2</div> 33 <div class="float">3</div> 34 </div> 35 </body> 36 </html>
上面代碼中，在一個寬度爲 280px 的 div 的容器中向左浮動3個子 div 元素，寬度都爲 100px ，因爲一行放不下，最後一個會被移動到下一行顯示，若是給第三個元素添加 -20px 的外邊距，這時候第三個元素就移上去了，而且覆蓋了第二個元素 20px ，經典的多列布局正是利用此原理。
1 #box .float:nth-child(3){ 2 background:blue; 3 margin-left:-20px; 4 }
實例：兩列布局
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>兩列布局</title> 6 <style> 7 *{padding;margin:0;font:bold 18px "微軟雅黑";} 8 #box{ 9 width:500px; 10 border:1px solid black; 11 margin:10px auto; 12 overflow:hidden; 13 } 14 #box .wrap{ 15 width:100%; 16 float:left; 17 } 18 #box .wrap .content{ 19 height:200px; 20 margin-right:100px; 21 background:pink; 22 } 23 #box .right{ 24 width:100px; 25 height:200px; 26 background:lightgreen; 27 float:left; 28 margin-left:-100px; 29 } 30 </style> 31 </head> 32 <body> 33 <div id="box"> 34 <div class="wrap"> 35 <div class="content"> 36 1左列內容 2左列內容 3左列內容 4左列內容 5左列內容 6左列內容 7左列內容 8左列內容 9左列內容 37 </div> 38 </div> 39 <div class="right">右列內容</div> 40 </div> 41 </body> 42 </html>
上面的代碼很好理解，爲 content 元素定義父元素，設置左浮動，寬度爲 100%，再爲 content 元素設置右邊距，值等於 right 元素的寬度，最後給 right 元素設置左浮動，再設置其寬度的負邊距爲 content 元素設置右邊距，即自身寬度。
原本 right 元素應該在第二行顯示，可是左浮動使它到了第一行的最右邊，覆蓋了 wrap 元素的一部分，可是 content 元素有 right 元素寬度的右邊距，因此覆蓋區域沒有內容，這樣就實現了兩列布局。注意：若是不給 content 元素設置 right 元素寬度的右邊距，那麼 content 元素的內容則會被覆蓋掉。其它此類更復雜的佈局原理與其相似。
二、CSS 邊框
CSS border 屬性能夠爲元素指定邊框的寬度、樣式和顏色。元素的邊框是圍繞元素內容和內邊距的一條或多條線。
在 CSS 規範中指出，邊框是繪製在「元素的背景之上」。這很重要，由於有些邊框是「間斷的「，如：點線邊框或虛線框，元素的背景應當出如今邊框的可見部分之間。CSS2 指出背景只延伸到內邊距，而不是邊框。在 CSS2.1 中定義：元素的背景是內容、內邊距和邊框區的背景。
(1)、邊框樣式（border-style）
border-style 屬性用來定義邊框的樣式。邊框樣式屬性指定要顯示什麼樣的邊界，樣式是邊框最重要的一個屬性，若是沒有樣式，將根本沒有邊框。
CSS 的 border-style 屬性定義了 10 個不一樣的非 inherit(繼承) 樣式，包括 none 和 hidden，該屬性無繼承。以下：
①、默認值爲 none：無邊框。border-color 將被忽略，border-width 計算值爲0，除非邊框輪廓爲圖像，即 border-image。
②、hidden：隱藏邊框。
③、dotted：點狀框。
④、dashed: 虛線框。
⑤、solid: 實線框。
⑥、double: 雙線框。 兩條單線的寬度和 border-width 值相同。
⑦、groove: 3D 凹槽框。效果取決於邊界的顏色值。
⑧、ridge: 3D 凸槽框。效果取決於邊界的顏色值。
⑨、inset：3D 嵌入(凹)邊框。效果取決於邊界的顏色值。
⑩、outset：3D 突出(凸)邊框。效果取決於邊界的顏色值。
border-style 屬性能夠定義多種樣式，即爲一個邊框定義多個樣式，以下：
1 <head> 2 <style> 3 #box{ 4 width:500px; 5 height:300px; 6 color:blue; 7 background:lightgreen; 8 border-style:solid dotted dashed double; 9 } 10 </style> 11 </head> 12 <body> 13 <div id="box"> 14 內容 15 </div> 16 </body>
上面例子中，爲 div 元素的邊框樣式分別爲：頂邊框爲實線框，右邊框爲點狀框，底邊框爲虛線框，左邊框爲雙線框。
border-style 屬性能夠設置一個元素四個邊框的樣式，能夠有 1-4 個值：
①、若是提供所有四個參數值，將按上、右、下、左的順序做用於四邊。
②、若是隻提供一個，將用於所有的四邊。
③、若是提供兩個，第一個用於上、下，第二個用於左、右。
④、若是提供三個，第一個用於上，第二個用於左、右，第三個用於下。
該屬性屬於複合屬性，也叫簡寫屬性，若是隻爲元素框的某一個邊框設置樣式，而不是設置全部 4 個邊的邊框樣式，可使用下面的單邊邊框樣式屬性：
①、border-top-style 設置或檢索對象頂邊框樣式。
②、border-right-style 設置或檢索對象右邊框樣式。
③、border-bottom-style 設置或檢索對象底邊框樣式。
④、border-left-style 設置或檢索對象左邊框樣式。
所以，這兩種方法是等同的：
1 #box1{ 2 border-style:none solid solid solid; 3 } 4 #box2{ 5 border-style:solid; 6 border-top-style:none; 7 }
須要注意：若是使用第二種方法，必須把單邊屬性放在簡寫屬性以後。由於若是把單邊屬性放在 border-style 以前，簡寫屬性的值就會覆蓋單邊值 none。
(2)、邊框寬度（border-width）
經過 border-width 屬性能夠爲邊框指定寬度。
爲邊框指定寬度有兩種方法：
①、能夠指定長度值，好比 2px 或 0.1em。
②、使用關鍵字設置，默認值爲 medium 定義中等的邊框， thin 定義細邊框，thick 定義粗邊框。
須要注意：CSS 沒有定義 3 個關鍵字的具體寬度，因此一個瀏覽器可能把 thin 、medium 和 thick 分別設置爲等於 2px、3px 和 5px，而另外一個瀏覽器則分別設置爲 1px、2px 和 3px。一般建議爲元素指定長度值的邊框。
border-width 屬性能夠設置一個元素四個邊框的寬度，能夠有 1-4 個值，和 border-style 屬性相同。
①、該屬性有 1個 值時，對應元素的四個邊框。
②、該屬性有 2個 值時，對應元素的頂、底邊框，右、左邊框。
③、該屬性有 3個 值時，對應元素的頂邊框，右、左邊框，底邊框。
④、該元素有 4個 值時，對於元素的頂邊框，右邊框，底邊框，左邊框。
該屬性屬於複合屬性，可使用單獨的屬性爲每一個邊框指定寬度：
①、border-top-width 設置或檢索對象頂邊框的寬度。
②、border-right-width 設置或檢索對象右邊框的寬度。
③、border-bottom-width 設置或檢索對象底邊框的寬度。
④、border-left-width 設置或檢索對象左邊框的寬度。
在前面的例子中，若是要顯示某種邊框，就必須設置邊框樣式，好比 solid 或 dashed。若是把 border-style 設置爲 none，以下：
1 <head> 2 <style> 3 #box1{ 4 border-style:none; 5 border-width:10px; 6 } 7 #box2{ 8 border-style:solid; 9 border-width:10px; 10 } 11 </style> 12 </head> 13 <body> 14 <div id="box1"> 15 內容 內容 16 </div> 17 <div id="box2"> 18 內容 19 </div> 20 </body>
經過上面的例子，能夠看到，儘管 box1 的邊框的寬度是 10px，可是邊框樣式設置爲 none。在這種狀況下，不只邊框的樣式沒有了，其寬度也會變成 0。邊框消失了，這是由於若是邊框樣式爲 none，即邊框根本不存在，那麼邊框就不可能有寬度，所以邊框寬度自動設置爲 0，而不論寬度定義的是多少。這一點很是重要，根據下面規則，全部 h1 元素都不會有任何邊框，更不用說 50 像素寬了：
1 h1{ 2 border-width:50px; 3 }
border-style 屬性的默認值是 none，若是沒有聲明樣式，就至關於 border-style:none。因此，若是要想顯示邊框，就必須聲明一個邊框樣式。
(3)、邊框顏色（border-color）
border-color 屬性用於設置邊框的顏色。可使用任何顏色類型的值，如指定顏色的名稱，"red"。如指定 RGB 值，"rgb(255,0,0)"。如指定16進制值， "#FF0000"。該屬性的默認值爲 "transparent" 指定邊框的顏色爲透明。注意： border-color 單獨使用是不起做用的，必須得先使用 border-style 來設置邊框樣式。
border-color 屬性能夠設置一個元素四個邊框的顏色，能夠有 1-4 個值，和 border-width 屬性相同，即按照 top-right-bottom-left 的順序設置元素的各邊邊框。
該屬性屬於複合屬性，可使用單獨的屬性爲每一個邊框指定顏色：
①、border-top-color 設置或檢索對象頂邊框的顏色。
②、border-right-color 設置或檢索對象右邊框的顏色。
③、border-bottom-color 設置或檢索對象底邊框的顏色。
④、border-left-color 設置或檢索對象左邊框的顏色。
默認邊框顏色是元素自己的前景色。若是沒有爲邊框設置顏色，它將與元素的文本顏色相同。另外一方面，若是元素沒有任何文本，假設它是一個表格，其中只包含圖像，那麼該表格的邊框顏色就是其父元素的文本顏色，由於 color 屬性能夠繼承，這個父元素極可能是 body、div 或另外一個 table。
咱們能夠爲網頁上的文字賦予顏色，這就使用到了 CSS 的前景色，前景色使用 color 屬性，且一般使用在文字上。與前景色相對應的就是 CSS 背景色，背景色不一樣於前景色，文字顏色可使用 color 屬性，可是包含文字的 p、div、body 等元素的背景顏色則使用 background-color 屬性，前景色具備繼承性，而背景色則沒有繼承。
綜上所述，前景色影響邊框顏色，以下面的實例，不設置 div 元素的邊框顏色：
1 <head> 2 <style> 3 #box{ 4 width:200px; 5 height:100px; 6 border-style:solid; 7 border-width:5px; 8 background:lightgreen; 9 } 10 </style> 11 </head> 12 <body> 13 <div id="box"> 14 內容 15 </div> 16 </body>
上面的例子，給 div 元素設置了背景色爲淺綠色，能夠看到，元素的背景區包含前景之下直到邊框外邊界的全部空間，包含內容、內邊距，且延伸到邊框。而前景色則影響到了邊框顏色，例子中沒有設置邊框顏色，可是前景色默認是黑色，所以邊框也顯示爲黑色，若是給文本定義前景色，那麼邊框就顯示爲元素的前景色：
1 #box{ 2 width:200px; 3 height:100px; 4 color:red; 5 border-style:solid; 6 border-width:5px; 7 background:lightgreen; 8 }
上面的例子，給 div 元素設置了前景色爲紅色，能夠看到，邊框也顯示爲紅色。‘
透明邊框：
若是邊框沒有樣式，就沒有寬度，不過能夠建立一個不可見的邊框。即便用 border-color 屬性的默認值 transparent 指定邊框的顏色爲透明，從而能夠建立有寬度的不可見邊框，以下：
1 <head> 2 <style> 3 a:link, a:visited{ 4 border-style:solid; 5 border-width:5px; 6 border-color:transparent; 7 } 8 a:hover{ 9 border-color:gray; 10 } 11 </style> 12 </head> 13 <body> 14 <a href="#">AAA</a> 15 <a href="#">BBB</a> 16 <a href="#">CCC</a> 17 </body>
從某種意義上來講，利用 transparent，使用邊框就像是額外的內邊距同樣，此外還有一個好處，就是能在須要的時候使其可見。這種透明邊框至關於內邊距，由於元素的背景會延伸到邊框區域，若是給 a 元素再添加一個背景屬性，就能更形象的展現這種效果。
(4)、邊框屬性簡寫屬性
border 屬性屬於複合屬性，使用該屬性能夠把邊框屬性設置在一個聲明中。好比 border:1px solid red;
當使用簡寫屬性時，屬性值的順序依次爲：
border-width --> border-style --> border-color
若是上述值缺乏一個也沒有關係，例如 border:solid red，也是容許的。
還可使用單獨的複合屬性爲每一個邊框設置特性：
①、border-top 設置對象頂邊框的特性。
②、border-right 設置對象右邊框的特性。
③、border-bottom 設置對象底邊框的特性。
④、border-left 設置對象左邊框的特性。
三、CSS 輪廓
輪廓（outline）是繪製於元素周圍的一條線，位於邊框邊緣的外圍，可起到突出元素的做用。
CSS outline 屬性規定元素輪廓的樣式，顏色和寬度。該屬性和 border 屬性同樣，同爲複合屬性，不一樣的是 border 屬性做用於內容和內邊距外圍，而 outline 屬性做用於 border 屬性外圍。輪廓也能夠叫作外邊框。
下面的實例，在 div 元素的外圍繪製一條邊框，再給邊框繪製一條輪廓：
1 <head> 2 <style> 3 #box{ 4 border:2px solid red; 5 outline:4px dotted green; 6 } 7 </style> 8 </head> 9 <body> 10 <div id="box"> 11 內容 12 </div> 13 </body>
也可使用單獨的屬性爲邊框設置特性：
①、outline-width 設置或檢索對象外的線條輪廓的寬度。
②、outline-style 設置或檢索對象外的線條輪廓的樣式。
③、outline-color 設置或檢索對象外的線條輪廓的顏色。
四、CSS 內邊距
元素的內邊距在邊框和內容區之間，控制該區域最簡單的屬性是 padding 屬性。
CSS padding 屬性定義元素邊框與元素內容之間的空間，即內邊距，該屬性接受任何類型的長度單位或百分比值，但不容許使用負值。百分數值是相對於其父元素的 width 計算的，這一點與外邊距同樣。因此，若是父元素的 width 改變，它們也會改變。若是上下內邊距與左右內邊距一致，即上下內邊距的百分數會相對於父元素寬度設置，而不是相對於高度。
內邊距也叫作填充，當元素的 padding 被清除時，所「釋放」的區域將會受到元素背景顏色的填充。
(1)、單邊內邊距
padding 屬性屬於複合屬性，可使用單獨的屬性設置元素的內邊距：
①、padding-top 設置元素的頂內邊距。
②、padding-right 設置元素的右內邊距。
③、padding-bottom 設置元素的底內邊距。
④、padding-left 設置元素的左內邊距。
(2)、內邊距屬性簡寫
padding 屬性容許在一個聲明中設置元素全部的內邊距屬性，能夠有 1-4 個值。
①、若是提供所有四個參數值，將按上、右、下、左的順序做用於四邊。
②、若是隻提供一個，將用於所有的四邊。
③、若是提供兩個，第一個用於上、下，第二個用於左、右。
④、若是提供三個，第一個用於上，第二個用於左、右，第三個用於下。
這個簡寫屬性設置元素全部內邊距的寬度，或者設置各邊上內邊距的寬度。行內非替換元素上設置的內邊距不會影響行高計算，所以，若是一個元素既有內邊距又有背景，元素的背景會延伸穿過內邊距，從視覺上看可能會延伸到其餘行，有可能還會與其餘內容重疊。
五、CSS 外邊距
圍繞在元素邊框的空白區域是外邊距，設置外邊距會在元素外建立額外的「空白」。
CSS margin 屬性設置元素周圍的空間，即外邊距，該屬性屬性接受任何類型的長度單位、百分比值，甚至是負值。百分數是相對於父元素的 width 計算的，負值則重疊內容。
外邊距清除周圍的元素邊框外的區域，margin 沒有背景顏色，是徹底透明的。
margin 屬性的值能夠是 auto 瀏覽器計算外邊距，這樣作的結果會依賴於瀏覽器，更常見的作法是爲外邊距設置長度值。可是設置爲 auto 也有一個好處，那就是能夠在頁面上居中一個元素。下面的例子，將 div 元素的上下外邊距設置爲 0，左右外邊距設置爲 auto，就能夠實現該元素在頁面上居中顯示。
1 <head> 2 <style> 3 *{padding:0;margin:0;} 4 #box{ 5 width:400px; 6 height:200px; 7 background:green; 8 margin:0 auto; 9 } 10 </style> 11 </head> 12 <body> 13 <div id="box"> 14 內容 15 </div> 16 </body>
margin 屬性的默認值是 0，因此若是沒有爲 margin 聲明一個值，就不會出現外邊距。可是，在實際中，瀏覽器對許多元素提供了預約的樣式，外邊距也不例外。例如，在瀏覽器中，外邊距會在每一個段落元素的前邊和後邊生成一個「空行」。所以，若是沒有爲 p 元素聲明外邊距，瀏覽器會本身應用一個外邊距。固然，若是特別做了聲明，就會覆蓋默認樣式。
(1)、單邊外邊距
margin 屬性屬於複合屬性，可使用單獨的屬性設置元素的外邊距：
①、margin-top 設置元素的頂外邊距。
②、margin-right 設置元素的右外邊距。
③、margin-bottom 設置元素的底外邊距。
④、margin-left 設置元素的左外邊距。
(2)、外邊距屬性簡寫
margin 屬性容許在一個聲明中設置元素全部的外邊距屬性，能夠有 1-4 個值。
①、若是提供所有四個參數值，將按上、右、下、左的順序做用於四邊。
②、若是隻提供一個，將用於所有的四邊。
③、若是提供兩個，第一個用於上、下，第二個用於左、右。
④、若是提供三個，第一個用於上，第二個用於左、右，第三個用於下。
這個簡寫屬性設置一個元素全部外邊距的寬度，或者設置各邊上外邊距的寬度。塊級元素的垂直相鄰外邊距會重疊，而行內元素實際上不佔上下外邊距，行內元素的的左右外邊距不會重疊。一樣地，浮動元素的外邊距也不會重疊。容許指定負的外邊距值，不過須要當心使用。
(3)、外邊距重疊
外邊距重疊，也叫外邊距合併，指的是當兩個或多個垂直外邊距相遇時，它們將造成一個外邊距，重疊後的外邊距的高度等於兩個發生重疊的外邊距的高度中的較大者。若是出現負邊距，則都取絕對值，而後用正值減去最大值。若是都爲負邊距，則都取絕對值，而後用零減去最大值。
外邊距合併疊加是不難理解，可是，在實踐中對網頁進行佈局時，它會形成許多混淆。
當一個元素出如今另外一個元素上面時，第一個元素的下外邊距與第二個元素的上外邊距會發生重疊。以下：
1 <head> 2 <style> 3 *{padding:0;margin:0;} 4 #box1{ 5 width:100px; 6 height:100px; 7 background:red; 8 margin-top:20px; 9 margin-bottom:20px; 10 } 11 #box2{ 12 width:100px; 13 height:100px; 14 background:blue; 15 margin-top:30px; 16 } 17 </style> 18 </head> 19 <body> 20 <div id="box1"> 21 1 22 </div> 23 <div id="box2"> 24 2 25 </div> 26 </body>
上面的例子，box1 設置了底外邊距爲 20px，box2 設置了頂外邊距爲 30px，在 Firefox 中打開上面的文檔，鼠標分別移動到 box1 和 box2 元素上，能夠看到，這兩個元素的外邊距是 30px，而不是 50px(20px+30px)。
發生重疊的條件是子元素的上外邊距或下外邊距與父元素的上邊界或下邊界之間不能出現 padding 或 border。當一個元素包含在另外一個元素中時，假設沒有內邊距或邊框把外邊距分隔開，它們的上 和/或 下外邊距也會發生重疊。以下：
1 <head> 2 <style> 3 *{padding:0;margin:0;} 4 #box1{ 5 width:200px; 6 height:200px; 7 background:red; 8 margin-top:20px; 9 } 10 #box2{ 11 width:50px; 12 height:50px; 13 background:blue; 14 margin-top:30px; 15 } 16 </style> 17 </head> 18 <body> 19 <div id="box1"> 20 <div id="box2"> 21 </div> 22 </div> 23 </body>
若是不設置 div 的內邊距和邊框，那麼內部 div 的上外邊距將與外部 div 的上外邊距疊加，此時2個 div 距離頁面頂部的距離爲 30px。
甚至外邊距能夠與自身發生重疊，假設有一個空元素，它有外邊距，可是沒有邊框或填充。在這種狀況下，上外邊距與下外邊距就碰到了一塊兒，它們就會發生重疊。若是這個外邊距遇到另外一個元素的外邊距，它還會發生重疊。這就是一系列的段落元素佔用空間很是小的緣由，由於它們的全部外邊距都重疊在一塊兒，造成了一個小的外邊距。
外邊距的重疊只產生在普通流文檔的上下外邊距之間，這個看起來有點奇怪的規則，可是實際上，它是有意義的。假設上下排列一系列規則的塊級元素時，好比段落，第一個段落上面的空間等於段落的上外邊距。若是沒有外邊距重疊，後續全部段落之間的外邊距都將是相鄰上外邊距和下外邊距的和。這意味着段落之間的空間是頁面頂部的兩倍，由於塊元素之間存在外邊距重疊，段落之間就不會產生雙倍的距離，段落之間的上外邊距和下外邊距就合併在一塊兒，這樣各處的距離就一致了。
注意：只有兩個或多個普通文檔流中塊元素的垂直外邊距纔會發生外邊距重疊。行內元素、浮動元素或絕對定位之間的外邊距不會合並，且水平邊距永遠不會重疊，根元素的垂直邊距也不會被重疊。
合併操做是以 margin、padding、border 的值爲基礎的，即在瀏覽器解析全部這些值以後，合併後的 margin 計算將覆蓋已使用的不一樣 margin 的值。所以，簡單爲元素添加 padding 或者 border 就能夠不使邊距重疊。給內層元素能夠設置透明邊框 border:1px solid transprent，或者給內層元素設置內邊距 padding:1px。
六、CSS 尺寸和長度單位
(1)、尺寸
CSS 尺寸屬性能夠控制元素的高度和寬度。一樣，它也能夠增長行間距。CSS 尺寸屬性以下：
| 屬性 | 說明 |
| width | 設置元素的寬度 |
| height | 設置元素的高度 |
| line-height | 設置行高 |
| max-width | 設置元素的最大寬度 |
| max-height | 設置元素的最大高度 |
| min-width | 設置元素的最小寬度 |
| max-height | 設置元素的最小高度 |
(2)、長度單位
在寫 CSS 時最經常使用到的單位長度就是 px(像素)，也會使用 em 、%(相對父元素的大小) 單位等等，其實 CSS 中的長度單位有8個：px，em，ex，pt，pc，in，mm，cm
①、相對長度單位
相對長度單位是網頁中的基本單位，既然是相對，那就代表了其長度單位會隨着他的參考值的變化而變化，不是固定的。由於相對單位沒有一個可觀的測量，相反，他們的實際大小是經過父元素的尺寸來肯定的，這覺得着他們的大小能夠經過相關元素的大小來改變。屬於相對長度單位的有3個：px，em，ex
px：像素（Pixel）,相對於設備的長度單位，像素是相對於顯示器屏幕分辨率而言的，是屏幕上顯示數據的最基本的點。px 是一個點，它不是天然界的長度單位，由於並不能精確描述一個「點」到底有多長多大，因此點能夠很小，也能夠很大，相對於設備來講，若是點很小，那畫面就清晰，就能夠稱它爲「分辨率高」，反之，就是「分辨率低」。所以，「點」的大小是會「變」的，被稱爲「相對長度」。
在 Web 上，網頁佈局時經常使用像素爲單位，像素是典型的度量單位，不少其餘長度單位直接映射成像素，最終，他們被按照像素處理。
em：相對於當前對象內文本的字體尺寸，若是當前行內文本的字體尺寸未被人爲設置，則相對於瀏覽器的默認字體尺寸。
在沒有任何 CSS 規則的前提下，1em 的長度是：
100% = 1em = 1rem = 16px = 12pt = 1pc = 0.17in = 4.2mm = 0.42cm
若是有任何 CSS 規則改變了字體大小，無論在文檔的什麼位置，1em 的長度會變成相對於新的 font-size 的大小。
任意瀏覽器的默認字體大小都是 16px，所以 1em = 16px，那麼 10px = 0.625em = 62.5%，12px = 0.75em = 75%，顯然這樣的話，如 1.2em則=19.2px，像素的最小單位是點，平時在設置時也不可能用 19.2px 表示，使用 px 時數值不帶小數位。爲了簡化 font-size 的換算，能夠在 CSS 中的 body 選擇器中聲明 font-size:62.5%，這就使 em 值變爲 16px * 62.5%=10px, 即 1em = 10px，那麼 12px = 1.2em, 也就是說只須要將原來的 px 數值除以 10，再換上 em 做爲單位就行了。也能夠自定義設置字體大小，不過這樣設置更簡單，也準確多了，具體須要根據實際的開發去定義。還能夠設置爲 100%，須要注意在寫 CSS 時若是採用 em 做單位，要避免字體大小的重複聲明，即重複運算。以下：
em 並非一個固定的值，它會繼承父級元素的字體大小，當設置了 font-size 屬性後，它會逐級向上相乘，因此若是一個設置了 font-size:1.2em 的元素在另外一個設置了 font-size:1.2em 的元素裏，則結果是 1.2 * 1.2= 1.44，而這個元素又在另外一個設置了 font-size:1.2em 的元素裏，那麼最後計算的結果是 1.2 * 1.2 * 1.2。這意味着即便一個元素設置爲 10em，這個元素也不會在他出現的每一個地方都是 10em。若是 font-size 變化了，它可能會寬點，也可能會窄點。 好比說在 #content 中聲明瞭字體大小爲 1.2em，那麼在聲明 p 的字體大小時就只能是 1em，而不是 1.2em, 由於此 em 非彼 em，它因繼承 #content 的字體大小而變爲了 1em=12px。
ex：相對於字符「x」的高度。爲小寫字母「x」的高度，一般爲字體尺寸的一半。若是當前對行內文本的字體尺寸未被人爲設置，則相對於瀏覽器的默認字體尺寸。和 em 不一樣，當改變 font-family 時 em 不會改變，而 ex 單位會變化，由於一個單位的值和該字體是特殊的約束關係。
②、絕對長度單位
絕對單位是固定的，是天然界標準的長度單位，也稱爲「絕對長度」。他們一旦被聲明，將不能經過改變其餘元素的字體大小來改變他的大小。屬於絕對長度單位的有5個：pt，pc，in，mm，cm
pt：Point，翻譯爲點，但其實應該叫磅，pt 是一個物理度量單位，1pt = 1/72英寸，在 CSS 以外 pt 是最經常使用的尺寸類型，常被用在印刷排版中，他在語言中也很常見，好比在電腦上 word 字體的字號就使用這個單位，默認爲宋體五號字，即10.5pt，10.5pt = 14px = 0.875em = 87.5%，而小五號字爲 9pt，9pt = 12px = 0.75em = 75%，在瀏覽器中默認字體爲16px，字號則爲笑四，1em = 16px = 12pt = 100%。
pc：派卡（Pica），至關於我國新四號鉛字的尺寸。pc 和 pt 同樣，只不過 1pc = 12pt。
in：英寸（Inch），英寸是一個物理度量單位，可是在 CSS 領域，英寸只不過被直接映射成像素罷了。
1in = 96px = 72pt = 6pc = 2.54cm = 25.4mm
mm：毫米（Millimeter），毫米是個小數量級的物理度量單位，1mm = 0.1cm = 3.78px。
cm：釐米（Centimeter），經常使用的物理度量單位，也會被映射成像素，1cm = 37.8px。
(3)、CSS3 長度單位
在 CSS3 中引入了一些新的相對長度單位：ch、rem、vw、vh、vmin、vmax
ch：相對長度單位，ch 的含義和 ex 的 x-height 類似，只不過 ch 是基於字符「0」的寬度而不是基於字符「x」高度的，當font-family 改變的時候 ch 也會隨着改變。
rem：（root element，html），rem 和 em 同樣也是一個相對單位，可是和 em 不一樣的是 rem 老是相對於根元素（html）的 font-size，而不像 em 的計算是基於父級的，且 font-size 具備繼承性，所以嵌套層數越深字體越大。因此使用 rem 這種相對單位更簡單，不再用擔憂父級元素的 font-size 了，由於它始終是基於根元素的。rem 單位不只能夠應用在字體上，還能夠實現到 CSS 網格系統中。使用 rem 也能夠簡化 font-size 的換算，以下：
1 html{ 2 font-size:62.5%; /* 10÷16=62.5% */ 3 } 4 body{ 5 font-size:14px; 6 font-size:1.4rem; /* 14÷10=1.4 */ 7 } 8 p{ 9 font-size:12px; 10 font-size:1.2rem; 11 }
其實不用太糾結究竟是默認的 font-size:100%，仍是設置爲 font-size:62.5%，若是引入了 CSS 預處理工具那麼天然可使用默認值，可是因爲其餘緣由使用 font-size:62.5% 也無可厚非，徹底能夠在 body 中重置爲須要的 font-size。
在網站建設中，通常中文的字體大小是 12px 和 14px，這基本已經成了大多數網站字體的標準大小，而 16px 爲中等字體，18px 爲較大字體，12px 則爲偏小字體。隨着顯示器分辨率不斷提升，12px 的文字在大於 1440*900 的顯示器中看起來會顯得比較小，不宜閱讀，因此如今網頁設計裏面用 12px 的已經比較少了，特別是文章正文部分，廣泛都會用 14px。通常來講設置爲宋體，也能夠設置爲微軟雅黑。可是對於大於 14px 的文字，特別是大於 16px 的文字，宋體就顯得比較難看了，因此設置爲黑體或者微軟雅黑，看起來會舒服一些。
vw：（viewpointWidth），可視區寬度單位，1vw等於視口寬度的1%。vw 單位跟百分比很類似，不一樣的是 vw 的值對全部的元素都同樣，與父元素的寬度無關。有點像 rem 單位那樣老是相對於根元素。
vh：（viewpointHeight），可視區高度單位，1vh等於視口高度的1%。與 vw 單位同樣，不一樣的是 vh 是相對於可視區的高度。
vmin：1%的視口的小尺寸，值是當前 vw 和 vh 中較小的值，在標準尺寸類型的使用實例中，和由本身肯定屏幕大小的vw、vh單位相比，vmin是一個更有用的度量標準。
vmax：1%的視口的大尺寸，值是 vw 和 vh 中的較大的值。
顯然 vw、vh、vmin、vmax 是針對移動設備的單位，若是視口大小變化了，這三個值也會跟着相應的變化。在進行響應式佈局時，經常會使用百分比來佈局，然而 CSS 的百分比不老是解決每一個問題的最佳方案，CSS 的寬度相對於離它最近的父元素的寬度。 那麼使用 vw 和 vh 單位，是基於視口的寬高而不是父元素的寬高， 使用 vh 和 vw 就能夠保證元素的寬高適應不一樣設備。vw 和 vh 對應於 viewport 的 width 和 height，而 vmin 和 vmax 分別對應於 width、height 中的最小值和最大值，假如瀏覽器的寬/高被設置爲1000px/600px，那麼：
1vmin = 600 * 1/%;
1vmax = 1000 * 1/%;
(4)、%
以百分比爲單位的長度值是基於具備相同屬性的父元素的長度值。假如一個元素呈現的寬度是 600px，子元素的寬度設置爲 50%，那麼子元素呈現的寬度爲 300px。百分比不是一個專門的長度單位，可是百分比和長度關係很大，能夠相互換算。
七、CSS Display（顯示） 和 Visibility（可見性）
display 屬性設置一個元素應如何顯示，visibility 屬性規定一個元素是否可見。
(1)、隱藏元素：display:none 或 visibility:hidden
隱藏一個元素能夠經過把 display 屬性設置爲 "none"，或把 visibility 屬性設置爲 "hidden"。可是請注意，這兩種方法會產生不一樣的結果。
visibility:hidden 能夠隱藏某個元素，但隱藏的元素仍需佔用與未隱藏以前同樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響佈局。
該屬性的默認值是 visible 元素是可見的。值爲 hidden 則元素是不可見的。即便不可見的元素也會佔據頁面上的空間。建議使用 display 屬性來建立不佔據頁面空間的不可見元素。值爲 collapse 時，當在表格元素中使用時，此值可刪除一行或一列，可是它不會影響表格的佈局。被行或列佔據的空間會留給其餘內容使用。若是此值被用在其餘的元素上，會呈現爲 "hidden"。
display:none 能夠隱藏某個元素，且隱藏的元素不會佔用任何空間。也就是說，該元素不但被隱藏了，並且該元素本來佔用的空間也會從頁面佈局中消失。
該屬性的默認值爲 inline 此元素會被顯示爲內聯元素，元素先後沒有換行符。值爲 none 此元素不會被顯示。值爲 block 此元素將顯示爲塊級元素，此元素先後會帶有換行符。值爲 inline-block 表示行內塊元素。該屬性也有多個值可用於表格設置。
(2)、CSS Display - 塊和內聯元素
大多數 HTML 元素被定義爲塊級元素或內聯元素：
塊級元素在瀏覽器顯示時，一般會以新行來開始（和結束），塊狀元素排斥其餘元素與其位於同一行，能夠設定元素的寬和高以及內外邊距，塊級元素通常是其餘元素的容器，能夠容納內聯元素和其餘塊元素。常見的塊級元素有： <h1> - <h6>, <div>，<p>, <pre>，<hr>，<ul>, <ol>，<dl>，<from>，<table>，<menu>。
內聯元素在顯示時一般不會以新行開始，不能夠設置寬和高，但能夠設置與其餘內聯元素位於同一行，高度由元素內部的文字大小決定，寬度由內容的長度決定，內聯元素通常不能包含塊級元素，內聯元素只能容納文本或者其餘內聯元素。常見的內聯元素有：<a>, <span>，<img>，<br>，<input>，<textarea>，<strong>，<em>，<mark>，<i>，<small>。
塊元素是一個元素，佔用了所有寬度，在先後都是換行符。而內聯元素只須要必要的寬度，不強制換行。內聯元素的例子：<span>、<a>、<img>。
能夠更改內聯元素和塊元素，反之亦然，可使頁面看起來是以一種特定的方式組合，並仍然遵循 Web 標準。
下面的例子把列表項顯示爲內聯元素：
1 <head> 2 <style> 3 li{ 4 display:inline; 5 } 6 </style> 7 </head> 8 <body> 9 <ul> 10 <li><a href="#" target="_blank">HTML</a></li> 11 <li><a href="#" target="_blank">CSS</a></li> 12 <li><a href="#" target="_blank">JavaScript</a></li> 13 <li><a href="#" target="_blank">jQuery</a></li> 14 </ul> 15 </body>
下面的例子把 span 元素做爲塊元素：
1 <head> 2 <style> 3 span{ 4 display:block; 5 color:red; 6 } 7 </style> 8 </head> 9 <body> 10 <p>display 屬性<span>可把一個塊元素轉換爲內聯元素，</span>反之亦然，<span>也能夠把一個內聯元素轉換爲塊元素。</span></p> 11 </body>
注意：一個內聯元素設置爲 display:block 是不容許有它內部的嵌套塊元素。
八、CSS Position（定位）
CSS position 屬性能夠對元素進行定位。
CSS 的定位和浮動屬性，可用於創建列式佈局，將佈局的一部分與另外一部分重疊，便可以將一個元素放在另外一個元素後面，並指定一個元素的內容太大時，應該發生什麼。元素可使用頂部，底部，左側和右側屬性進行定位。可是，這些屬性沒法單獨工做，除非是先設定 position 屬性。
定位的基本思想很簡單，它容許你定義元素框（盒子模型）相對於其正常位置應該出現的位置，或者相對於父元素、另外一個元素甚至瀏覽器窗口自己的位置。這個功能很是強大，而浮動不徹底是定位，不過，它固然也不是正常流佈局。
CSS 有三種基本的定位機制：普通流、浮動和絕對定位。
除非專門指定，不然全部框都在普通流中定位，也就是說，普通流中的元素的位置由元素在 HTML 中的位置決定。塊級框從上到下一個接一個地排列，框之間的垂直距離是由框的垂直外邊距計算出來。行內框在一行中水平佈置，可使用水平內邊距、邊框和外邊距調整它們的間距。可是，垂直內邊距、邊框和外邊距不影響行內框的高度。由一行造成的水平框稱爲行框（Line Box），行框的高度老是足以容納它包含的全部行內框。不過，設置行高能夠增長這個框的高度。
定位有四種不一樣的方法：靜態定位、固定定位、相對定位和絕對定位。
(1)、靜態定位（static)
HTML 元素的默認值，即沒有定位，元素出如今正常的流中，塊級元素生成一個矩形框，做爲文檔流的一部分，行內元素則會建立一個或多個行框，置於其父元素中。靜態定位的元素不會受到 top, bottom, left, right 影響。
(2)、固定定位（fixed）
元素的位置相對於瀏覽器窗口是固定位置。相似於將 position 設置爲 absolute，不過其包含塊是視窗自己。固定定位使元素的位置與文檔流無關，所以不佔據空間，固定定位的元素和其餘元素重疊。
下面的例子，將 div 固定在瀏覽器右下角：
1 <head> 2 <style> 3 #box{ 4 width:150px; 5 height:200px; 6 background:green; 7 position:fixed; 8 right:0; 9 bottom:0; 10 } 11 </style> 12 </head> 13 <body style="height:2000px"> 14 <div id="box">固定在右下角。 15 </div> 16 </body>
(3)、相對定位（relative）
相對定位元素的定位是相對其正常位置，仍處在文檔流中，元素的位置相對於它在普通流中的位置偏移某個距離，元素仍保持其未定位前的形狀，它本來所佔的空間仍保留。相對定位元素常常被用來做爲絕對定位元素的容器塊。
若是對一個元素設置相對定位，它將出如今它所在的位置上。而後，能夠經過設置垂直或水平位置，讓這個元素「相對於」它的起點進行移動。以下：
1 <head> 2 <style> 3 #pos1{ 4 color:blue; 5 } 6 #pos2{ 7 color:red; 8 position:relative; 9 top:-50px; 10 left:60px; 11 } 12 </style> 13 </head> 14 <body> 15 <h1 id="pos1">我是普通流中的大標題。</h1> 16 <h1 id="pos2">我是設置了相對定位的大標題。</h1> 17 <h1>我也是普通流中的大標題。</h1> 18 </body>
注意，在使用相對定位時，不管是否進行移動，元素仍然佔據原來的空間。所以，移動元素會致使它和其餘元素重疊。
(4)、絕對定位（absolute）
絕對定位的元素的位置相對於最近的已定位父元素，若是元素沒有已定位的父元素，那麼它的位置相對於 <html>，絕對定位使元素的位置與文檔流無關，所以不佔據空間。這一點與相對定位不一樣，相對定位實際上被看做普通流定位模型的一部分，由於元素的位置相對於它在普通流中的位置。絕對定位的元素和其餘元素也會重疊。
設置爲絕對定位的元素框從文檔流徹底刪除，並相對於其包含塊定位，包含塊多是文檔中的另外一個元素或者是初始包含塊（<html>）。元素原先在正常文檔流中所佔的空間會關閉，就好像該元素原來不存在同樣。元素定位後生成一個塊級框，而不論原來它在正常流中生成何種類型的框。
可使用上面的例子，觀察絕對定位和相對定位的不一樣，能夠將其頂部屬性設置爲0，若是使用負值，會超出瀏覽器窗口：
1 <head> 2 <style> 3 #pos1{ 4 color:blue; 5 } 6 #pos2{ 7 color:red; 8 position:absolute; 9 top:0; 10 left:60px; 11 } 12 </style> 13 </head> 14 <body> 15 <h1 id="pos1">我是普通流中的大標題。</h1> 16 <h1 id="pos2">我是設置了絕對定位的大標題。</h1> 17 <h1>我也是普通流中的大標題。</h1> 18 </body>
(5)、堆疊順序（z-index）
由於元素的定位與文檔流無關，因此它們能夠覆蓋頁面上的其它元素。能夠經過 z-index 屬性控制這些元素的堆放次序。
z-index 屬性用於指定一個元素的堆疊順序，即哪一個元素應該放在前面，或後面。一個元素能夠有正數或負數的堆疊順序，默認值爲 auto 堆疊順序與父元素相等。擁有更高堆疊順序的元素老是會處於堆疊順序較低的元素前面。 注意： 若是兩個定位元素重疊，沒有指定z-index，最後定位在 HTML 代碼中的元素將被顯示在最前面。該屬性只能用於定位元素，且無繼承。該屬性設置一個定位元素沿 z 軸的位置，z 軸定義爲垂直延伸到顯示區的軸。若是爲正數，則離用戶更近，爲負數則表示離用戶更遠。
1 <head> 2 <style> 3 *{padding:0;margin:0;} 4 #box1{ 5 width:500px; 6 height:100px; 7 background:blue; 8 position:relative; 9 z-index:100; 10 } 11 #box2{ 12 width:800px; 13 height:200px; 14 background:red; 15 position:absolute; 16 top:20px; 17 left:50px; 18 } 19 #box3{ 20 width:1000px; 21 height:300px; 22 background:green; 23 position:absolute; 24 top:40px; 25 left:100px; 26 z-index:-1; 27 } 28 </style> 29 </head> 30 <body> 31 <div id="box1">1 32 </div> 33 <div id="box2">2 34 </div> 35 <div id="box3">3 36 </div> 37 </body>
上面的例子，默認的堆疊順序是 box1 在最底層，下來是 box2，box3 顯示在最上層。給 box3 設置爲 z-index:-1;，那麼 box3 會顯示在最底層，下來是 box1，box2 會顯示在最上層。再給 box1 設置 z-index:100;，最終 box1 顯示在最上層，下來是 box2，box3 被顯示在最底層。
(6)、固定層效果
固定層效果是固定定位的應用，這種效果在網站中也很常見，好比在頁面頂部固定導航欄菜單，當頁面滾動時，內容從導航欄菜單下面穿過，或者側邊欄固定在頁面右底部。以下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>固定層效果</title> 6 <style> 7 *{padding:0;margin:0;} 8 body{ 9 background:#EEEEE0; 10 } 11 #header{ 12 width:100%; 13 height:50px; 14 background:#99CC33; 15 position:fixed; 16 top:0; 17 left:0; 18 } 19 #conten{ 20 width:80%; 21 height:1000px; 22 border:1px solid black; 23 margin:0 auto; 24 margin-top:70px; 25 } 26 #conten .main{ 27 width:200px; 28 height:400px; 29 background:yellow; 30 } 31 #sidebar{ 32 width:80px; 33 height:80px; 34 background:green; 35 position:fixed; 36 right:0; 37 bottom:0; 38 } 39 #footer{ 40 width:100%; 41 background:#cdcdc1; 42 text-align:center; 43 margin-top:20px; 44 padding:20px 0; 45 } 46 </style> 47 </head> 48 <body> 49 <div id="header"> 50 <h2>網站頭部</h2> 51 </div> 52 <div id="conten"> 53 <div class="main"> 54 <h2>內容</h2> 55 </div> 56 </div> 57 <div id="sidebar"> 58 <h2>側邊欄</h2> 59 </div> 60 <div id="footer"> 61 <h2>頁腳</h2> 62 </div> 63 </body> 64 </html>
爲了提升用戶體驗，加強交互效果，能夠配合 JS 對頁面進行控制，就像電商網站的頁面效果，當頁面從商品簡介滾動到商品詳情、用戶評論時，將導航欄菜單固定在頁面頂部，這樣評論數就會從導航欄菜單下穿過，方便用戶使用。
position 三種形式定位的影響因素：屬性的取值、元素的偏移量和元素偏移的參考基準。
absolute 與 fixed 相同點都是徹底脫離文檔流，未設置偏移量時都定位在父元素的左上角。元素設置定位後就具有偏移屬性和堆疊屬性，只有元素在設置相對定位，或者絕對定位後，堆疊屬性纔有效，它的做用是設置元素所在的 z 軸層級。z-index值越大，元素層級越大。
他們的不一樣點是設置偏移時，偏移的參考基準，absolute 無已定位祖先元素時，以 <html> 爲基準偏移；有已經定位的祖先元素時，以距其最近的已定位元素爲基準偏移，一般設置了 relative 的元素常被用來作 absolute 元素的容器塊。fixed 有、無已定位祖先元素，都已瀏覽器可視窗口爲基準偏移。
他們還存在表現形式的差別，即滾動條，absolute 的位置會隨滾動條變化，而 fixed 的位置是固定不變的，不會隨滾動條變化，兄弟元素能夠從其下穿過。
fixed 的定位形式也屬於絕對對位，但不一樣於 absolute，fixed 的位置固定不變，未設置偏移量時，有已定位的祖先元素，以祖先元素爲基準定位；無已定位祖先元素時，以瀏覽器窗口爲基準定位。設置偏移量後，有無已定位祖先元素，均以瀏覽器窗口定位。
九、CSS Float（浮動）
在 CSS 中，經過 float 屬性來實現元素的浮動。浮動會使元素向左或向右移動，直到他的外邊緣碰到包含框或另外一個浮動框的邊框爲止，其周圍的元素也會從新排列。浮動元素以後的元素將圍繞它，浮動元素以前的元素不會受到影響。因爲浮動框不在文檔的普通流中，因此文檔的普通流中的塊框表現得就像浮動框不存在同樣。浮動每每是用於圖像，但它在佈局時同樣很是有用。浮動也能夠理解爲向一邊看齊，即就是向左看齊或者向右看齊，元素是在水平方向浮動，那麼意味着元素只能左右移動而不能上下移動。
(1)、浮動
①、建立浮動，可使文本圍繞圖像。
若是圖像是左浮動，下面的文本流將環繞在它右邊，若是圖像是右浮動，下面的文本流將環繞在它左邊。以下：
1 <head> 2 <style> 3 img{ 4 /* float:left; */ 5 float:right; 6 } 7 </style> 8 </head> 9 <body> 10 <p>浮動元素以後的元素將圍繞它，浮動元素以前的元素不會受到影響。</p> 11 <p>浮動會使元素向左或向右移動，直到它的外邊緣碰到包含框或另外一個浮動框的邊框爲止，其周圍的元素也會從新排列。浮動元素以後的元素將圍繞它，浮動元素以前的元素不會受到影響。浮動每每是用於圖像，但它在佈局時同樣很是有用。浮動也能夠理解爲向一邊看齊，即就是向左看齊或者向右看齊，元素是在水平方向浮動，那麼意味着元素只能左右移動而不能上下移動。 12 13 <img src="images/1.jpg" width="90px" height="90px" alt=""> 14 15 浮動會使元素向左或向右移動，直到它的外邊緣碰到包含框或另外一個浮動框的邊框爲止，其周圍的元素也會從新排列。浮動元素以後的元素將圍繞它，浮動元素以前的元素不會受到影響。浮動每每是用於圖像，但它在佈局時同樣很是有用。浮動也能夠理解爲向一邊看齊，即就是向左看齊或者向右看齊，元素是在水平方向浮動，那麼意味着元素只能左右移動而不能上下移動。 16 17 浮動會使元素向左或向右移動，直到它的外邊緣碰到包含框或另外一個浮動框的邊框爲止，其周圍的元素也會從新排列。浮動元素以後的元素將圍繞它，浮動元素以前的元素不會受到影響。浮動每每是用於圖像，但它在佈局時同樣很是有用。浮動也能夠理解爲向一邊看齊，即就是向左看齊或者向右看齊，元素是在水平方向浮動，那麼意味着元素只能左右移動而不能上下移動。 18 19 浮動會使元素向左或向右移動，直到它的外邊緣碰到包含框或另外一個浮動框的邊框爲止，其周圍的元素也會從新排列。浮動元素以後的元素將圍繞它，浮動元素以前的元素不會受到影響。浮動每每是用於圖像，但它在佈局時同樣很是有用。浮動也能夠理解爲向一邊看齊，即就是向左看齊或者向右看齊，元素是在水平方向浮動，那麼意味着元素只能左右移動而不能上下移動。 20 </p> 21 </body>
彼此相鄰的浮動元素，若是有空間的話，它們將彼此相鄰，即在一行顯示，以下：
1 <head> 2 <style> 3 #box{ 4 width:400px; 5 height:350px; 6 border:1px solid black; 7 margin:10px auto; 8 overflow:hidden; 9 } 10 img{ 11 float:left; 12 margin:0 10px 10px 0; 13 } 14 </style> 15 </head> 16 <body> 17 <p>浮動元素以後的元素將圍繞它，浮動元素以前的元素不會受到影響。</p> 18 <div id="box"> 19 <img src="images/1.jpg" width="90px" height="90px" alt=""> 20 <img src="images/1.jpg" width="90px" height="90px" alt=""> 21 <img src="images/1.jpg" width="90px" height="90px" alt=""> 22 <img src="images/1.jpg" width="90px" height="90px" alt=""> 23 <img src="images/1.jpg" width="90px" height="90px" alt=""> 24 <img src="images/1.jpg" width="90px" height="90px" alt=""> 25 <img src="images/1.jpg" width="90px" height="90px" alt=""> 26 <img src="images/1.jpg" width="90px" height="90px" alt=""> 27 <img src="images/1.jpg" width="90px" height="90px" alt=""> 28 <img src="images/1.jpg" width="90px" height="90px" alt=""> 29 <img src="images/1.jpg" width="90px" height="90px" alt=""> 30 <img src="images/1.jpg" width="90px" height="90px" alt=""> 31 <img src="images/1.jpg" width="90px" height="90px" alt=""> 32 <img src="images/1.jpg" width="90px" height="90px" alt=""> 33 <img src="images/1.jpg" width="90px" height="90px" alt=""> 34 <img src="images/1.jpg" width="90px" height="90px" alt=""> 35 </div> 36 </body>
上面的例子，若是不給浮動的圖像設置外邊距，全部的圖像會緊挨在一塊兒顯示，猶如一張圖像。
②、浮動不在文檔普通流中
下面的例子，3個 div 元素在普通流中垂直顯示，當把 box1 向右浮動時，他會脫離文檔流而且向右移動，知道他的右邊緣碰到包含框（<html>）的右邊緣：
1 <head> 2 <style> 3 #box1{ 4 width:200px; 5 height:100px; 6 background:blue; 7 float:right; 8 } 9 #box2{ 10 width:200px; 11 height:100px; 12 background:red; 13 } 14 #box3{ 15 width:200px; 16 height:100px; 17 background:green; 18 } 19 </style> 20 </head> 21 <body> 22 <p>因爲浮動框不在文檔的普通流中，因此文檔的普通流中的塊框表現得就像浮動框不存在同樣。</p> 23 <div id="box1">1 24 </div> 25 <div id="box2">2 26 </div> 27 <div id="box3">3 28 </div> 29 </body>
若是把 box1 向左浮動，他會脫離文檔流而且向左移動，直到他的左邊緣碰到包含框的左邊緣。由於它再也不處於文檔流中，因此它不佔據空間，實際上會覆蓋掉 box2，使 box2 從視圖中消失。爲了達到演示效果，能夠稍微修改下3個 div 元素的的樣式：
1 #box1{ 2 width:200px; 3 height:100px; 4 background:blue; 5 float:left; 6 } 7 #box2{ 8 width:300px; 9 height:100px; 10 background:red; 11 } 12 #box3{ 13 width:400px; 14 height:100px; 15 background:green; 16 }
若是把全部3個 box 都向左浮動，那麼 box1 向左浮動直到碰到包含框，另外兩個 box 向左浮動直到碰到前一個浮動框：
1 #box1{ 2 width:200px; 3 height:100px; 4 background:blue; 5 float:left; 6 } 7 #box2{ 8 width:200px; 9 height:100px; 10 background:red; 11 float:left; 12 } 13 #box3{ 14 width:200px; 15 height:100px; 16 background:green; 17 float:left; 18 }
若是包含框太窄，沒法容納水平排列的三個浮動元素，那麼其它浮動塊向下移動，直到有足夠的空間。若是浮動元素的高度不一樣，那麼當它們向下移動時可能被其它浮動元素「卡住」，以下：
1 <head> 2 <style> 3 #box{ 4 width:450px; 5 height:300px; 6 border:1px solid black; 7 margin:10px auto; 8 } 9 #box1{ 10 width:200px; 11 height:150px; 12 background:blue; 13 float:left; 14 } 15 #box2{ 16 width:200px; 17 height:100px; 18 background:red; 19 float:left; 20 } 21 #box3{ 22 width:200px; 23 height:100px; 24 background:green; 25 float:left; 26 } 27 </style> 28 </head> 29 <body> 30 <p>若是包含框太窄，沒法容納水平排列的三個浮動元素，那麼其它浮動塊向下移動，直到有足夠的空間。若是浮動元素的高度不一樣，那麼當它們向下移動時可能被其它浮動元素「卡住」。</p> 31 <div id="box"> 32 <div id="box1">1 33 </div> 34 <div id="box2">2 35 </div> 36 <div id="box3">3 37 </div> 38 <p>浮動會影響處於其後的元素，須要清除浮動的影響。</p> 39 </div> 40 </body>
(2)、清除浮動
元素浮動以後，周圍的元素將從新排列，浮動元素以後的元素會圍繞它，爲了不這種狀況，可使用 clear 屬性。
clear 屬性指定元素兩側不能出現浮動元素。該屬性的默認值是 none 容許浮動元素出如今兩側，還能夠是 left、right、both，它表示框的哪些邊不該該挨着浮動框。
大多狀況下都會使用 clear:both; 左右兩端均不出現浮動元素。
對於上面例子中的狀況，就能夠用 clear 屬性給 p 元素設置清除浮動影響：
1 p{ 2 clear:both; 3 }
(3)、overflow
overflow 屬性指定若是內容溢出一個元素的框，會發生什麼。在上面彼此相鄰元素的浮動中，給父容器設置了寬高，由於圖像不少，超出了父容器，在代碼中使用了 overflow:hidden; 對溢出的內容進行了隱藏。下面再經過一個例子來看下：
1 <head> 2 <style> 3 #box{ 4 width:200px; 5 height:200px; 6 border:5px solid black; 7 } 8 #box .content{ 9 width:300px; 10 height:400px; 11 background:red; 12 } 13 </style> 14 </head> 15 <body> 16 <div id="box"> 17 <div class="content"> 18 </div> 19 </div> 20 <p>子元素高度超出了父容器的高度，超出的部分就屬於溢出的內容。</p> 21 </body>
爲了防止佈局被撐開，只須要給父容器設置 overflow:hidden 就能夠強制隱藏溢出的內容。在網站開發中，經常會使用到該方法。overflow 屬性的默認值是 visible 內容不會被修剪，會呈如今元素框以外。值爲 hidden 時內容會被修剪，而且其他內容是不可見的。值爲 scroll 時內容會被修剪，可是瀏覽器會顯示滾動條以便查看其他的內容。值爲 auto 時，若是內容被修剪，則瀏覽器會顯示滾動條以便查看其他的內容。
使用了溢出隱藏以後，若是把父容器的高度註釋掉，設置子元素左浮動，會發現父容器的高度自動被子元素的高度撐開了，若是不設置溢出隱藏，則父容器不會被撐開，將上面例子中的代碼稍微改動下：
1 <head> 2 <style> 3 #box{ 4 width:450px; 5 /* height:200px; */ 6 border:5px solid black; 7 overflow:hidden; 8 } 9 #box .content{ 10 float:left; 11 width:200px; 12 height:400px; 13 background:red; 14 margin-right:20px; 15 } 16 </style> 17 </head> 18 <body> 19 <div id="box"> 20 <div class="content"> 21 </div> 22 <div class="content"> 23 </div> 24 </div> 25 <p>子元素高度超出了父容器的高度，超出的部分就屬於溢出的內容。</p> 26 </body>
按照以前的解釋，因爲浮動框不在文檔的普通流中，因此文檔普通流中的塊框表現得就像浮動框不存在同樣。浮動也能夠理解爲向一邊看齊，元素是在水平方向浮動，這就意味着元素只能左右移動而不能上下移動，即就是在一個平面上的浮動，可是上面的例子，浮動並不只僅是一個平面上的浮動，而是一個立體的浮動，當子元素設置了浮動以後，在顯示器側面，他已經脫離了父容器，也就是說此時的子元素的寬高是多少，對於已經脫離了的父容器來講，是不起做用的。因此使用 overflow:hidden 還能夠清除浮動，也就是說，當給父容器設置這個屬性時，其內的子元素等帶浮動屬性的元素在這個立體的浮動已經被清除了。
若是給父容器設置高度，或者釋放以前的高度註釋，那麼不管子元素的高度是多少，父容器的高度都是指定的值，並不會被撐開，而當子元素的高度超出父容器的高度時，超出的部分就會被隱藏，該屬性能夠保證 div 的高度或寬度不變。該屬性主要用於規定，當一個塊元素容器的內容溢出元素的盒模型邊界時是否對其進行修剪，也就是隱藏，他影響被應用元素的全部內容的修剪，即做爲全部子元素的包含塊，但若是後代元素的包含塊是整個視區（一般指瀏覽器內容可視區域，能夠理解爲 body 元素）或者是該容器（定義了 overflow 的元素）的父級元素時，則不受影響。
十、CSS 對齊（align）
(1)、塊元素水平對齊
在 CSS 中，可使用多種屬來實現元素水平對齊。
塊元素指的是佔據所有可用寬度的元素，而且在其先後都會換行，排斥其餘元素與其位於同一行。
①、使用 margin 屬性
塊元素能夠把左，右外邊距設置爲「auto」，實現水平對齊，也能夠叫作中心對齊。
margin 屬性把左和右設置爲自動，規定均等的分配可用的外邊距，結果就是元素居中顯示。
1 <head> 2 <style> 3 #box{ 4 width:300px; 5 height:200px; 6 background:blue; 7 margin:auto; 8 } 9 </style> 10 </head> 11 <body> 12 <div id="box"> 13 </div> 14 </body>
注意：若是寬度是 100％，對齊是沒有效果的。
②、使用 position 屬性
使用絕對定位是元素對齊方法之一，能夠設置左和右對齊。絕對定位與文檔流無關，因此它們能夠覆蓋頁面上的其它元素。
1 <head> 2 <style> 3 #box{ 4 width:300px; 5 height:200px; 6 background:blue; 7 position:absolute; 8 right:0px; 9 } 10 </style> 11 </head> 12 <body> 13 <div id="box"> 14 </div> 15 </body>
③、使用 float 屬性
對齊元素的另外一個方法就是使用 float 屬性，能夠實現左和右對齊。
1 <head> 2 <style> 3 #box{ 4 width:300px; 5 height:200px; 6 background:blue; 7 float:right; 8 } 9 </style> 10 </head> 11 <body> 12 <div id="box"> 13 </div> 14 </body>
(2)、文本水平對齊
text-align 屬性用於指定元素文本的水平對齊方式。該屬性經過指定行框與哪一個點對齊，從而設置塊級元素內文本的水平對齊方式。默認值爲 left 把文本排列到左邊，right 把文本排列到右邊，center 把文本排列到中間。
1 <head> 2 <style> 3 h1{ 4 text-align:center; 5 } 6 h2{ 7 text-align:left; 8 } 9 h3{ 10 text-align:right; 11 } 12 </style> 13 </head> 14 <body> 15 <h1>我是大標題。</h1> 16 <h2>我是中標題。</h2> 17 <h3>我是小標題。</h3> 18 </body>
(3)、垂直對齊
vertical-align 屬性能夠設置一個元素的垂直對齊方式。該屬性定義行內元素的基線相對於該元素所在行的基線的垂直對齊。容許指定負長度值和百分比值，這會使元素下降而不是升高。在表單元格中，這個屬性會設置單元格框中的單元格內容的對齊方式。
默認值爲 baseline 元素放置在父元素的基線上，top 元素的頂端與行中最高元素的頂端對齊，middle 把此元素放置在父元素的中部。bottom 元素的頂端與行中最低的元素的頂端對齊。text-top 元素的頂端與父元素字體的頂端對齊，text-bottom 元素的底端與父元素字體的底端對齊。sup/sub 垂直對齊文本的上標/下標。也可使用 "line-height" 屬性的百分比值來排列此元素，容許使用負值。
1 <head> 2 <style> 3 img.top{ 4 vertical-align:text-top; 5 } 6 img.mid{ 7 vertical-align:middle; 8 } 9 img.bot{ 10 vertical-align:text-bottom; 11 } 12 </style> 13 </head> 14 <body> 15 <p>元素的頂端<img class="top" src="images/1.jpg" width="90px" height="90px">與父元素字體的頂端對齊。</p> 16 <p>元素與父元素的中間對齊。<img class="mid" src="images/1.jpg" width="90px" height="90px"></p> 17 <p>元素的底端<img class="bot" src="images/1.jpg" width="90px" height="90px">與父元素字體的底端對齊。</p> 18 </body>
十一、CSS 圖像透明度
經過 CSS 建立透明圖像是很容易的，CSS3 的 opacity 屬性能夠爲一個元素設置透明度。
該屬性的值爲數值，從 0.0 - 1，值越小，使元素更加透明，0.0 爲徹底透明，1 則徹底不透明。
IE8 及更早版本的瀏覽器則使用 filter 屬性來設置元素的透明，filter:alpha(opacity=value);
filter 屬性的值也爲數值，不過是從 0 - 100，較低的值，使得元素更加透明，0 爲徹底透明，100 則徹底透明。
(1)、建立一個透明圖像
建立透明圖像，只須要給圖像標籤設置 opacity 屬性就行了，根據不一樣的需求，能夠設置不一樣的透明度級別。
1 img{ 2 opacity:0.5; 3 }
(2)、透明圖像懸停效果
懸停效果即鼠標懸停在圖像上時，圖像是徹底不透明的，當鼠標移出後，圖像變爲透明。該效果可使用 hover 實現。
1 img{ 2 opacity:0.5; 3 } 4 img:hover{ 5 opacity:1; 6 }
透明圖像的懸停效果在網站中應用仍是十分廣泛的，尤爲是在一些電商網站中，特賣商品或其餘商品的展現就可使用這種效果，京東作過這種效果，淘寶也在使用這種效果展現商品。該效果也能夠用 JS 來更改元素的透明度，給圖像綁定鼠標移入移出事件，當鼠標懸停在圖像上時會發生什麼。
(3)、圖片畫廊
圖片畫廊也能夠叫圖片庫，很是適合做爲圖片展現、我的做品展現和相冊使用，能夠在頁面上顯示系列圖片，所以圖片畫廊也是網站重要的組成部分，實現圖片畫廊有不少種方法，這裏就簡單的用 CSS 建立一個圖片畫廊，若是使用 CSS3 可讓圖片畫廊擁有更加炫酷的效果。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <base target='_blank'> 6 <title>CSS 圖片畫廊</title> 7 <style> 8 .gallery{ 9 width:auto; 10 height:auto; 11 margin:2px; 12 border:1px solid #0000FF; 13 text-align:center; 14 float:left; 15 } 16 .gallery img{ 17 margin:5px; 18 border:1px solid #FFFFFF; 19 } 20 a:hover img{ 21 border:1px solid #4169E1; 22 } 23 .desc{ 24 width:120px; 25 margin:2px; 26 } 27 </style> 28 </head> 29 <body> 30 <div class="gallery"> 31 <a href="#" target="_blank"><img src="images/1.jpg" alt="anime" width="90" height="90"></a> 32 <div class="desc">在這裏能夠爲圖片添加相關描述。</div> 33 </div> 34 <div class="gallery"> 35 <a href="#" target="_blank"><img src="images/2.jpg" alt="anime" width="90" height="90"></a> 36 <div class="desc">在這裏能夠爲圖片添加相關描述。</div> 37 </div> 38 <div class="gallery"> 39 <a href="#" target="_blank"><img src="images/3.jpg" alt="anime" width="90" height="90"></a> 40 <div class="desc">在這裏能夠爲圖片添加相關描述。</div> 41 </div> 42 <div class="gallery"> 43 <a href="#" target="_blank"><img src="images/4.jpg" alt="anime" width="90" height="90"></a> 44 <div class="desc">在這裏能夠爲圖片添加相關描述。</div> 45 </div> 46 </body> 47 </html>
下圖是瀏覽器顯示結果：
十二、CSS 圖像拼合技術
圖像拼合就是 CSS 雪碧 即 CSS Sprite，也被稱爲 CSS 精靈，是一種 CSS 圖像合併技術，該方法是將小圖標和背景圖片合併到一張圖片上，而後利用 CSS 的背景定位來顯示須要顯示的圖片部分。簡單說圖像拼合就是單個圖像的集合，他能合併的只能是用於背景的圖片。
有許多圖像的網頁可能須要很長的時間來加載和生成多個服務器的請求，那麼使用圖像拼合就會減小網站的 HTTP 請求數量，提升頁面加載速度，並節省帶寬。
圖像拼合的原理就是把頁面涉及到的全部零星圖片整合在一張大圖中，圖片在 CSS 中定義，而不是使用 <img> 標籤。利用 CSS 的 background-image、background- repeat、background-position 屬性的組合進行背景定位，background-position 使用數字能夠精確的定位出背景圖片須要顯示的位置。合圖的通常順序爲從上到下、從左到右，一般保存爲 PNG 格式的文件。使用 CSS Sprite 時必定要預先肯定每一個小圖標的大小，而且要注意每一個圖標之間的間距。
(1)、簡單實例
在網站中應用 CSS Sprite，那麼首先就得把須要的圖片合併成一張圖片，可使用 PS 手動合成，也能夠下載用於生成 CSS Sprite 的本地應用，好比 CssGaga 等，還可使用一些簡單的在線 CSS Sprite 生成工具，好比 CSS Sprites Generator 或 GoPng ，前者是一個小清新風格的網站，簡單的界面和綠色背景，使用很是方便，易操做，可是圖片只能橫向或縱向排列，不支持圖片拖拽排列，支持自定義圖片間距，點擊生成按鈕以後，頁面下方會自動生成每張圖片的樣式信息方便調用，點擊 PNG 圖標下載圖片，另外點擊 HTML 圖標能夠跳轉新頁面預覽生產的圖標。後者是企鵝的前端使用 HTML5 實現的合成圖片的在線工具，支持自定義畫布大小，帶有磁力吸附對齊功能，能夠拖動圖片進行排序，不只能生成 PNG 圖片，還能夠生成 CSS 文件，而且還能定製 CSS 模板，支持工做狀態導出，包括圖片數據（圖片、圖片位置排序）和參數設置（主頁的參數設置和 CSS 模板設置）所有導出成一個文件，下次利用該文件就能夠恢復到上次的工做狀態。企鵝的工具明顯至關強大了，通常狀況是足夠用了，界面也比較清爽，就是我的感受不太好操做。
下圖是在百度圖片中找的幾個小圖標，使用企鵝的在線工具生成的 CSS Sprite 圖，在下面例子中使用。
使用圖像拼合技術是小圖片加載優化的慣用手段，上面的雪碧圖是把7個小圖標合併在一個圖片中，使用這種單個的圖片，再利用 CSS，就能夠只顯示咱們須要的部分：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>CSS Sprite</title> 6 <style> 7 i{ 8 width:64px; 9 height:64px; 10 display:block; 11 float:left; 12 margin-right:20px; 13 background:url(images/sprite.png) no-repeat; 14 } 15 .clock{ 16 background-position:0 0; 17 } 18 .right{ 19 background-position:0 -64px; 20 } 21 .left{ 22 background-position:0 -128px; 23 } 24 .home{ 25 background-position:0 -192px; 26 } 27 28 .favorite{ 29 background-position:-64px 0; 30 } 31 .love{ 32 background-position:-64px -64px; 33 } 34 .close{ 35 background-position:-64px -128px; 36 } 37 </style> 38 </head> 39 <body> 40 <i class="clock"></i> 41 <i class="right"></i> 42 <i class="left"></i> 43 <i class="home"></i> 44 <i class="favorite"></i> 45 <i class="love"></i> 46 <i class="close"></i> 47 </body> 48 </html>
上面的代碼，在瀏覽器打開後，雪碧圖每一個小圖標從上往下並左浮動顯示，右外邊距 20px。
實例解析：
①、雪碧圖中每一個小圖標都爲等寬等高的圖像，爲全部 i 元素都設置 width:64px;height:64px;，定義咱們使用的那部分圖像。
②、從代碼中能夠看出，雪碧圖應用的語法爲：
background:url(images/sprite.png) no-repeat 0 0;
background-image:url(images/sprite.png); 指定了元素的背景圖像，background-repeat:no-repeat; 規定背景圖像不重複，background-position:0 0; 設置背景圖像的位置。
③、background-position:0 0; 定義背景圖像和它的位置（左0px，頂部0px）。
整個 Sprite 圖默認以左上角爲座標點（0，0），即 background-position 表明圖片的起始位置，從左上角開始，x 軸向右爲正，y 軸向下爲正，因此通常 Sprite 值均爲負值。background-position 的計算是指 0 點到圖片左上角的偏移量，例如（-64px，-128px）就是整塊雪碧圖向左（x 軸）移動 64px ，向上（y軸）移動 128px，圖片定位的原理，使用 px 爲單位，這個值是一個偏移量，而不是具體的座標值，正值向正軸方向偏移，負值則相反。
這是使用圖像拼合最簡單的方法，雪碧圖在網站中應用很是普遍，好比用戶登陸註冊按鈕，圖標導航，電商網站的爆款、熱賣、秒殺和搶購等的小圖片，雪碧圖能夠把網站中涉及到的全部零星的小圖標、背景圖像合併在一張大圖中使用，根據實際須要也能夠合併爲多張圖。
(2)、懸停效果
:hover 選擇器可用於鼠標懸停在元素上顯示的效果，該選擇器能夠運用於全部元素。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>CSS Sprite 懸停效果</title> 6 <style> 7 i{ 8 width:64px; 9 height:64px; 10 display:block; 11 float:left; 12 margin-right:20px; 13 background:url(images/sprite.png) no-repeat; 14 opacity:1; 15 } 16 .right{ 17 background-position:0 -64px; 18 } 19 .home{ 20 background-position:0 -192px; 21 } 22 .love{ 23 background-position:-64px -64px; 24 } 25 .left{ 26 background-position:0 -128px; 27 } 28 .favorite{ 29 background-position:-64px 0; 30 } 31 32 i:hover{ 33 opacity:0.3; 34 border:1px solid black; 35 } 36 .change:hover{ 37 background-position:-64px -128px; 38 } 39 </style> 40 </head> 41 <body> 42 <i class="right change"></i> 43 <i class="home"></i> 44 <i class="love"></i> 45 <i class="left change"></i> 46 <i class="favorite change"></i> 47 </body> 48 </html>
上面的代碼，打亂了小圖標的顯示順序，而且用1個小圖標爲帶有 change 的類作了鼠標懸停效果，還增長了1像素的邊框，也能夠增長外邊距，須要注意鼠標滑過圖片時，爲元素增長了邊框會影響外邊距，這樣作能夠變相的爲靜態圖片增長動態效果，可是這只是一個演示效果，在實際的網站開發中有時僅1像素的問題就會影響到總體的佈局結構，須要謹慎使用。
(3)、圖標導航
可使用雪碧圖建立一個簡單的圖標導航：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>CSS Sprite 圖標導航</title> 6 <style> 7 ul li{ 8 list-style:none; 9 width:64px; 10 height:64px; 11 float:left; 12 margin-right:10px; 13 background:url(images/sprite.png) no-repeat; 14 opacity:1; 15 } 16 ul li a{ 17 display:block; 18 height:64px; 19 } 20 #home{ 21 background-position:0 -192px; 22 } 23 #left{ 24 background-position:0 -128px; 25 } 26 #right{ 27 background-position:0 -64px; 28 } 29 #favorite{ 30 background-position:-64px 0; 31 } 32 #close{ 33 background-position:-64px -128px; 34 } 35 ul li:hover{ 36 opacity:0.5; 37 } 38 </style> 39 </head> 40 <body> 41 <ul> 42 <li id="home"><a href="#" title="主頁"></a></li> 43 <li id="left"><a href="#" title="前進"></a></li> 44 <li id="right"><a href="#" title="後退"></a></li> 45 <li id="favorite"><a href="#" title="收藏"></a></li> 46 <li id="close"><a href="#" title="關閉"></a></li> 47 </ul> 48 </body> 49 </html> 50 51 52 53 <br><br><br><br> 54 ① 55 ② 56 ③ 57 ④ 58 ⑤ 59 ⑥ 60 ⑦ 61 ⑧ 62 ⑨ 63 ⑩
上面代碼中，每一個列表項都包含一個連接，也可使用 ：hover 僞類讓每一個連接切換背景圖：
1 #home a:hover{background:url(images/icon.png) no-repeat 0 0;} 2 #left a:hover{background:url(images/icon.png) no-repeat 0 -64px;}
(4)、雪碧圖應用
一些電商網站的導航欄都位於頁面左邊，每項菜單前邊都有一個小背景圖，這就可使用雪碧圖完成。下面是須要用的圖片：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>CSS Sprite 應用</title> 6 <style> 7 *{margin:0;padding:0;} 8 nav{ 9 width:150px; 10 background:#F5F5F5; 11 border:1px solid #A9A9A9; 12 margin:20px; 13 } 14 ul{ 15 list-style:none; 16 overflow:hidden; 17 } 18 li{ 19 border-bottom:1px solid #C0C0C0; 20 } 21 li:last-child{ 22 border-bottom:none; 23 } 24 a{ 25 display:block; 26 height:35px; 27 line-height:35px; 28 font-size:14px; 29 font-weight:400; 30 color:black; 31 text-decoration:none; 32 } 33 a:hover{ 34 color:red; 35 background:#DCDCDC; 36 } 37 li i{ 38 float:left; 39 width:24px; 40 height:24px; 41 margin:5px 10px 0 20px; 42 background:url("images/sprite.png") no-repeat; 43 } 44 .icon-1 i{background-position:0 0;} 45 .icon-2 i{background-position:0 -24px;} 46 .icon-3 i{background-position:0 -48px;} 47 .icon-4 i{background-position:0 -72px;} 48 .icon-5 i{background-position:0 -96px;} 49 .icon-6 i{background-position:0 -120px;} 50 .icon-7 i{background-position:-24px 0;} 51 .icon-8 i{background-position:-24px -24px;} 52 .icon-9 i{background-position:-24px -48px;} 53 .icon-10 i{background-position:-24px -72px;} 54 .icon-11 i{background-position:-24px -96px;} 55 .icon-12 i{background-position:-24px -120px;} 56 </style> 57 </head> 58 <body> 59 <nav> 60 <ul> 61 <li class="icon-1"> 62 <i></i> 63 <h3><a href="#">家用電器</a></h3> 64 </li> 65 <li class="icon-2"> 66 <i></i> 67 <h3><a href="#">手機數碼</a></h3> 68 </li> 69 <li class="icon-3"> 70 <i></i> 71 <h3><a href="#">電腦辦公</a></h3> 72 </li> 73 <li class="icon-4"> 74 <i></i> 75 <h3><a href="#">潮流服飾</a></h3> 76 </li> 77 <li class="icon-5"> 78 <i></i> 79 <h3><a href="#">母嬰玩具</a></h3> 80 </li> 81 <li class="icon-6"> 82 <i></i> 83 <h3><a href="#">護膚彩妝</a></h3> 84 </li> 85 <li class="icon-7"> 86 <i></i> 87 <h3><a href="#">鞋包皮具</a></h3> 88 </li> 89 <li class="icon-8"> 90 <i></i> 91 <h3><a href="#">運動戶外</a></h3> 92 </li> 93 <li class="icon-9"> 94 <i></i> 95 <h3><a href="#">汽車用品</a></h3> 96 </li> 97 <li class="icon-10"> 98 <i></i> 99 <h3><a href="#">美食旅遊</a></h3> 100 </li> 101 <li class="icon-11"> 102 <i></i> 103 <h3><a href="#">圖書音響</a></h3> 104 </li> 105 <li class="icon-12"> 106 <i></i> 107 <h3><a href="#">金融理財</a></h3> 108 </li> 109 </ul> 110 </nav> 111 </body> 112 </html>
(5)、CSS Sprite 總結
在網頁中，沒請求一次，即沒加載一張圖片，就會個服務器連接一次，創建連接是須要額外的時間，使用雪碧圖能夠加速網站的顯示效果，他最根本的目的就是有效減小 HTTP 請求數量，加速內容顯示。
一些大圖，好比動態圖片或者用戶上傳的圖片不能拼成雪碧圖，雪碧圖適用於如下幾種狀況：
①、靜態圖片，不隨用戶信息的變化而變化，在網站上以常態形式存在。
②、小圖片，圖片容量比較小，通常大小爲 3-5K，或 3.5K 如下的圖片。
③、加載量比較大的圖片。
Css Sprite 雪碧圖，其實就是將小圖標放在同一個 PSD 文件裏，PSD 屬於分層的可編輯的圖片格式，一般須要使用 PS 或 FW 軟件打開，就能夠分離圖層。透明背景的小圖片都須要保存爲 PNG 格式，他是圖片格式的一種，常被用來做爲網頁的圖標。
Css Sprite 的原理，以雪碧圖左上角爲基準(0，0)，經過 background-position 設置 x、y 偏移來顯示須要的部分，x 向右爲正，y 向下爲負，因此通常都爲負值。
1三、CSS 導航欄
擁有易用的導航欄，對於任何網站都很是重要。經過 CSS 能夠把枯燥的 HTML 菜單轉換成漂亮的導航欄。
(1)、導航欄 - 連接列表
導航欄須要標準的 HTML 做爲基礎，對於前端開發人員而言，必定要熟悉 Web 標準。
導航欄基本上是一個連接列表，因此使用 <ul> 和 <li>元素很是適合，根據實際開發需求也可使用自定義列表建立導航欄。
下面是建立導航欄連接列表的標準 HTML 結構：
1 <ul> 2 <li><a href="URL">HTML</a></li> 3 <li><a href="URL">CSS</a></li> 4 <li><a href="URL">JavaScript</a></li> 5 <li><a href="URL">jQuery</a></li> 6 </ul>
一個導航欄並不須要列表標記，而且須要初始化列表的樣式，即清除列表的填充和外邊距，這些都須要使用 CSS 定義：
1 ul{ 2 list-style:none outside; 3 padding:0; 4 margin:0; 5 }
這裏僅僅只是初始化了列表的樣式，在實際的網站開發中，須要對整個 HTML 文檔進行初始化設置。
(1)、垂直導航欄
垂直導航欄一般都位於網站左側，也能夠叫左側導航欄。若是須要構建垂直導航欄，只須要給 a 元素定義樣式就能夠了。由於 a 元素爲內聯元素，因此首先就須要把他轉換爲塊元素，使用 CSS 定義 display:block ，即顯示塊元素的連接，讓總體變爲可點擊連接區域，不僅是連接文本。塊元素默認狀況下，是最大寬度，因此必需給導航欄指定寬度，再添加其餘用於美化的樣式。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>左側導航欄</title> 6 <style> 7 *{padding:0;margin:0;} 8 ul{ 9 list-style:none outside; 10 } 11 a{ 12 display:block; 13 background:#99CC33; 14 width:120px; 15 height:35px; 16 line-height:35px; 17 color:white; 18 font-weight:bold; 19 text-decoration:none; 20 text-align:center; 21 } 22 a:hover{ 23 color:black; 24 background-color:#669933; 25 } 26 </style> 27 </head> 28 <body> 29 <ul> 30 <li><a href="URL">IT互聯網</a></li> 31 <li><a href="URL">職業技能</a></li> 32 <li><a href="URL">語言學習</a></li> 33 <li><a href="URL">設計創做</a></li> 34 <li><a href="URL">興趣愛好</a></li> 35 <li><a href="URL">職業規劃</a></li> 36 </ul> 37 </body> 38 </html>
現有的網站中，有一部分網站構建的左側導航欄，並不是使用標準的 HTML 連接列表來佈局的，而是使用 DIV 來完成的，好比京東商城左側的導航欄，就使用的 DIV 嵌套標題連接佈局的，也有一些網站是直接在 DIV 中嵌套連接，還有一些網站是經過一個列表項再嵌套 DIV 的方式來佈局的，這樣雖然都能達到目的，但嚴格來說並不符合標準，大多數狀況下左側導航欄在鼠標移入時，都會在右側顯示該菜單欄的相關選項，與京東商城相似的好比蘇寧、國美、小米的左側導航欄都是使用標準的 HTML 連接列表來佈局的。而淘寶網左側的導航欄佈局使用的是自定義連接列表，這也符合 HTML 標準。幾乎全部網站構建的水平導航欄都是使用標準的 HTML 連接列表佈局的。
(2)、水平導航欄
有兩種建立水平導航欄的方法，使用內聯或浮動的列表項。這兩種方法都很好，但若是須要每一個菜單項都擁用有相同的大小，就必須使用浮動的方法。
①、內聯列表項
建立一個水平導航欄的方法之一是就是把 li 元素轉換爲內聯元素，默認 li 元素是塊級元素，因此使用 CSS 設置 display:inline; 能夠刪除每一個列表項以前和以後的換行符，以顯示一行 。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>內聯水平導航欄</title> 6 <style> 7 *{padding:0;margin:0;} 8 ul{ 9 list-style:none outside; 10 padding:10px 0; 11 } 12 li{ 13 display:inline; 14 } 15 a{ 16 background:#0000CD; 17 color:white; 18 font-weight:bold; 19 text-decoration:none; 20 padding:10px; 21 } 22 a:hover{ 23 background-color:#191970; 24 } 25 </style> 26 </head> 27 <body> 28 <ul> 29 <li><a href="URL">首頁</a></li> 30 <li><a href="URL">公司簡介</a></li> 31 <li><a href="URL">經營發展</a></li> 32 <li><a href="URL">產品展現</a></li> 33 <li><a href="URL">新聞中心</a></li> 34 <li><a href="URL">在線服務</a></li> 35 <li><a href="URL">企業文化</a></li> 36 </ul> 37 </body> 38 </html>
這裏須要注意：若是隻給 a 元素設置內邊距，而不給列表設置，那麼連接會出如今 ul 元素以外，因此必須給 ul 設置頂和底內邊距。
②、浮動列表項
使用內聯列表項，連接的寬度是不一樣的，爲了讓全部連接擁有相等的寬度，須要給 li 元素設置浮動，並把 a 元素轉換爲塊元素再指定寬度。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>浮動水平導航欄</title> 6 <style> 7 *{padding:0;margin:0;} 8 ul{ 9 list-style:none outside; 10 overflow:hidden; 11 } 12 li{ 13 float:left; 14 } 15 a{ 16 display:block; 17 background:#CCCCCC; 18 width:120px; 19 height:35px; 20 line-height:35px; 21 color:black; 22 font-weight:bold; 23 text-decoration:none; 24 text-align:center; 25 margin-right:2px; 26 } 27 a:hover{ 28 color:white; 29 background-color:#000000; 30 } 31 </style> 32 </head> 33 <body> 34 <ul> 35 <li><a href="URL">首頁</a></li> 36 <li><a href="URL">公司簡介</a></li> 37 <li><a href="URL">經營發展</a></li> 38 <li><a href="URL">產品展現</a></li> 39 <li><a href="URL">新聞中心</a></li> 40 <li><a href="URL">在線服務</a></li> 41 <li><a href="URL">企業文化</a></li> 42 </ul> 43 </body> 44 </html>
1四、CSS 媒體類型
媒體類型（Media Type）是用於指定文件將如何在不一樣媒體呈現。該文件能夠以不一樣的方式顯示在屏幕上，在紙張上，或聽覺瀏覽器等等。
一些 CSS 屬性僅僅被設計爲針對某些媒體。例如 "voice-family" 屬性被設計爲針對聽覺用戶終端，其餘一些屬性可用於不一樣的媒體類型。例如，"font-size" 屬性可用於屏幕和印刷媒體，但有不一樣的值。屏幕和紙上的文件不一樣，因此屏幕上顯示的文檔一般須要比紙媒體文檔更大的字體，所以針對不一樣的媒體，須要使用不一樣的字體系列，使文本更易閱讀。再好比電腦端和移動終端，由於屏幕尺寸的不一樣，因此更須要針對不一樣的設備定義不一樣的樣式，即響應式佈局。
(1)、@media 規則
@media 規則使你有能力在相同的樣式表中，使用不一樣的樣式規則來針對不一樣的媒體，簡單說就是：能夠在相一樣式表爲不一樣媒體設置不一樣的樣式。
下面的樣式，使用 @media 規則指定在瀏覽器中段落顯示爲」14px「的」微軟雅黑「字體，若是頁面被打印，則段落顯示爲」10px「的」宋體「，無論是在瀏覽器頁面上仍是在紙上段落都被顯示爲加粗：
1 @media screen{ 2 p{ 3 font-family:"Microsoft YaHei",Arial,Tahoma,sans-serif; 4 font-size:14px; 5 } 6 } 7 8 @media print{ 9 p{ 10 font-family:'宋體'; 11 font-size:10px; 12 } 13 } 14 15 @media screen,print{ 16 p{font-weight:bold;} 17 }
(2)、不一樣的媒體類型
| 媒體類型 | 說明 |
| all | 用於全部設備。 |
| screen | 用於電腦屏幕，平板電腦，智能手機等。 |
| speech | 應用於屏幕閱讀器等發聲設備。 |
| 用於打印機和打印預覽。 |
注意：媒體類型不區分大小寫。
1五、CSS 重要性
(1)、CSS 繼承
CSS 的某些屬性是具備繼承性的，繼承是一種規則，它容許樣式不只應用於某個特定html標籤元素，並且應用於其後代。
好比下面的例子，給 p 標籤設置字體顏色，這個顏色設置不只應用 p 標籤，還應用於 p 標籤中的全部子元素文本。
1 <head> 2 <style> 3 p{ 4 color:red; 5 border:1px solid black; 6 } 7 </style> 8 </head> 9 <body> 10 <p>CSS 的某些屬性是具備繼承性的，<span>繼承是一種規則，</span>它容許樣式不只應用於某個特定 HTML 標籤元素，並且應用於其後代。</p> 11 </body>
須要注意，有一些 CSS 樣式是不具備繼承性的，好比 border:1px solid black;。
(2)、CSS 特殊性
有時候咱們爲同一個元素設置了不一樣的 CSS 樣式代碼，瀏覽器會根據權值來判斷使用哪一種 CSS 樣式，哪一種樣式權值高就使用該樣式，因此理解選擇器的特殊性很重要。
權值就是所用選擇器的特殊性，瀏覽器會根據這種特殊性來決定所定義的樣式規則的次序，具備更特殊選擇器的規則優先於具備通常選擇器的規則，若是兩個規則的特殊性相同，那麼後定義的規則優先，這一點和 JS 相同，即後面定義的會覆蓋前邊定義的。
覆蓋也就是 CSS 層疊，當有相同權重的樣式存在時，會根據這些 CSS 樣式的先後順序來決定，處於最後面的 CSS 樣式會被應用。那麼對於 CSS 樣式優先級的順序就不難理解了。
特殊性能夠分爲4個等級，每一個等級表明一類選擇器：
①、表明內聯樣式，如 <p style="color:red"></p>，權值爲 1000。
②、表明 ID 選擇器，如 #content，權值爲 100。
③、表明類，類選擇器以及僞類和屬性選擇器，如 .main，權值爲 10。
④、表明類型選擇器，標籤和僞元素選擇器，如 div p，權值爲 1。
通配符選擇器（*），子選擇器（>）和相鄰同胞選擇器（+）並不在這四個等級中，因此他們的權值都爲 0。
注意：繼承也有權值的，可是繼承的權值是最低的。
每一個等級的值爲其所表明的選擇器的個數乘以這一等級的權值（好比 ④ 中例子的權值爲 2），最後把全部等級的值相加得出選擇器的特殊值。比較同一級別的個數，數量多的優先級高，若是相同即比較下一級別的個數 。
權值的規則：選擇器的權值相加，大的優先；若是權值相同，後定義的優先 。
權值的大小跟選擇器的類型和數量有關，樣式的優先級跟樣式的定義順序有關。
1 p{ /* 權值爲 1 */ 2 color:red; 3 } 4 p span{ /* 權值爲 1+1=2 */ 5 color:green; 6 } 7 .main{ /* 權值爲 10*/ 8 font-size:14px; 9 } 10 div p .main{ /* 權值爲 1+1+10=12 */ 11 color:purple; 12 } 13 #footer{ /* 權值爲 100 */ 14 color:gray; 15 } 16 #footer .note p{ /* 權值爲 100+10+1=111 */ 17 color:white; 18 }
(3)、CSS 重要性
在實際的網站開發中，有些特殊的狀況須要爲某些樣式設置具備最高權值，這時候咱們可使用 !important 來解決。
具體實現以下：
1 <head> 2 <style> 3 p{ 4 color:red!important; 5 } 6 .demo{ 7 color:green; 8 } 9 </style> 10 </head> 11 <body> 12 <p class="demo">在實際的網站開發中，有些特殊的狀況須要爲某些樣式設置具備最高權值，這時候咱們可使用 !important 來解決。</p> 13 </body>
上面的代碼，使用標籤選擇器設置了段落字體爲紅色，再使用類選擇定義了段落字體爲綠色，標籤選擇器的權值爲 1，類選擇器的權值爲 10，由於類選擇器的權值更高，最終段落顯示爲綠色，可是咱們使用了 important，這時段落中的文字就顯示爲紅色。
!important 擁有最高權值，須要注意，在使用時不能忘了前邊的感嘆號，而且要寫樣式的分號前邊。
當網頁不設置 CSS 樣式時，瀏覽器會按照本身的一套樣式來顯示網頁。而且用戶也能夠在瀏覽器中設置本身習慣的樣式，好比有的用戶習慣把字號設置爲大一些，使其查看網頁的文本更加清楚。這時樣式優先級爲：瀏覽器默認的樣式 < 網頁的樣式 < 用戶本身設置的樣式，但 !important 優先級樣式是個例外，權值高於用戶本身設置的樣式。
- 1. css高級
- 2. CSS教程： CSS（高級）
- 3. CSS樣式（五）- CSS高級
- 4. CSS CSS高級技巧
- 5. 【css技能提高】css高級技巧
- 6. css高級語法
- 7. CSS高級技巧
- 8. CSS高級方法
- 9. CSS高級操作
- 10. CSS複習之CSS高級特性
- 更多相關文章...
- • XML DOM 高級 - XML 教程
- • Markdown 高級技巧 - Markdown 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • 適用於PHP初學者的學習線路和建議
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. css高級
- 2. CSS教程： CSS（高級）
- 3. CSS樣式（五）- CSS高級
- 4. CSS CSS高級技巧
- 5. 【css技能提高】css高級技巧
- 6. css高級語法
- 7. CSS高級技巧
- 8. CSS高級方法
- 9. CSS高級操作
- 10. CSS複習之CSS高級特性