網站設計主要有兩大類型：固定寬度和響應式。
對於固定（fixed）布局，整個頁面和每一欄都有基於像素的寬度。顧名思義，無論是使用移動電話和平板電腦等較小的設備查看頁面，還是使用桌面浏覽器並對窗口進行縮小，它的寬度都不會改變。
響應式 頁面也稱為 流式（fluid 或liquid）頁面，它使用百分數定義寬度，允許頁面隨顯示環境的改變進行放大或縮小。除了具有流動欄，響應式頁面還可以根據屏幕尺寸以特定方式調整其設計。
11.5 盒模型
CSS 處理網頁時，它認為每個元素都包含在一個不可見的盒子裡。這就是盒模型，這裡的盒子由內容區域、內容區域周圍的空間（內邊距，padding）、內邊距的外邊緣（邊框，border）和邊框外面將元素與相鄰元素隔開的不可見區域（外邊距，margin）構成。
關於 CSS 的 width 屬性對元素所顯示寬度的影響，有兩種處理方式。（不包含任何將其與鄰近元素隔開的外邊距。）
（1）默認的處理方式實際上有些有悖於常理。浏覽器中元素的寬度與其width 屬性值並不一致（除非它沒有內邊距和邊框）。CSS 中的寬度指示的是內邊距裡內容區域的寬度。而元素在浏覽器中的顯示寬度則是內容寬度、左右內邊距和左右邊框的總和。顯示高度與之類似，只不過計算的是上下內邊距和邊框值。
（2）另一種方式則更為直觀。使用這種方式的話，元素的顯示寬度就等於width 屬性的值。內容寬度、內邊距和邊框都包含在裡面。height屬性與之類似。要使用這種模式，僅需對元素設置 box-sizing: border-box;。
11.6 控制元素的顯示類型和可見性
默認情況下，元素會按照它們在HTML 中自上而下出現的次序顯示（這稱為文檔流，document flow），並在每個非行內元素的開頭和結尾處換行。
1. 指定元素的顯示方式display:
設置為 display: inline; 的元素不接受 padding 的設置，但 padding-top 和padding-bottom會越界進入相鄰元素的區域，而不是局限於該元素本身的空間
2. 控制元素可見性
visibility 屬性的主要目的是控制元素是否可見。與 display 屬性不同的是，使用visibility 隱藏元素時，元素及其內容應該出現的位置會留下一片空白區域。隱藏元素的空白區域仍然會在文檔流中占據位置。
11.7 設置元素的高度和寬度
可以為很多元素設置高度和寬度，如分塊內容、段落、列表項、div、圖像、video、表單元素等。
同時，可以為短語內容元素（默認以行 內方式顯示）設置 display: block; 或display: inline-block;，再對它們設置寬度或高度。、
設置元素高度或寬度：
(1) 輸入 width: w，其中的w 是元素內容區域的寬度，可以表示為長度（帶單位，如 px、em 等）或父元素的百分數。或者使用auto 讓浏覽器計算寬度（這是默認值）。
(2) 輸入 height: h，其中的h 是元素內容區域的高度，只能表示為長度（帶單位，如 px、em 等）。或者使用 auto 讓浏覽器計算高度（這是默認值）。
還有min-width、min-height、 max-width 和 max-height 屬性用來設置最小和最大尺寸。
width 和 height 不是繼承的。
如果不顯式設置寬度和高度，浏覽器就會使用 auto。對於大多數默認顯示為塊級元素的元素，width 的 auto 值是由包含塊的寬度減去元素的內邊距、邊框和外邊距計算出來的。
11.8 在元素周圍添加內邊距
內邊距就是元素內容周圍、邊框以內的空間。可以改變內邊距的厚度，不能改變它的顏色或紋理。顯示在內邊距區域的顏色和紋理是元素的背景，是通過background、background-color或者 background-image 設置的。
內邊距的值可以使用像素、百分數、em 或 rem的組合。
padding 的簡記法：同 border 和 margin 屬性一樣，padding 也可以使用簡記法，從而不必使用padding-top、padding-right 等屬性為每個邊都單獨設定內邊距。
也可以輸入 padding-top: x;、padding-right: x;、padding-bottom: x;或者padding- left: x; 單獨為一個邊添加內邊距。
11.9 設置邊框
可以在元素周圍創建邊框，或針對元素的某一邊設置邊框，並設置它的厚度、風格和顏色。
1. 定義邊框風格
輸入 border-style: type，其中的type可以是none、dotted （點線）、dashed （虛線）、solid （實線）、double （雙線）、 groove （槽線）、ridge （脊線）、 inset （凹邊）或outset （凸邊）。
2. 設置邊框寬度
輸入 border-width: n，這裡的n 是需要的寬度（含單位，如4px）。
3. 設置邊框顏色
輸入border-color: color，這裡的color是顏色名稱、十六進制值或 RGB、HSL、RGBA、 HSLA顏色。
4. 使用簡記法同時設置多個邊框屬性border。
可以指定所有三種邊框屬性（如 border:1px solid 和 border-right: 2px dashed green;）。
border-top、border-right、border-bottom 或 border-left 將邊框效果限制在某一條邊上。
border-property，這裡的property 可以是style（風格）、width（寬度）或color（顏色），僅使用單個屬性設置邊框。
border 簡寫屬性及各個邊框屬性（border-width、border-style 和 border-color）均可接受一至四個值。
如果使用一個值，那麼它會應用於全部四個邊；
如果使用兩個值，那麼前一個值會應用於上下兩邊，後一個值會應用於左右兩邊；
如果使用三個值，那麼第一個值會應用於上邊，第二個值會應用於左右兩邊，第三個值會應用於下邊；
如果使用四個值，那麼它們會按照時鐘順序，依次應用於上、右、下、左四個邊。
要讓邊框顯示出來，至少必須定義邊框樣式。如果沒有定義樣式，就不會顯示邊框。邊框樣式的默認值是border-style: none。
11.10 設置元素周圍的外邊距
外邊距是元素與相鄰元素之間的透明空間。
設置元素外邊距的方法：
如果元素位於另一個元素的上面，對於相互接觸的兩個 margin（即元素相互接觸的下外邊距和上外邊距），僅使用其中較大的一個，另一個外邊距會被疊加。左右外邊距不疊加。
外邊距不是繼承的。
當 em 值用於內邊距和外邊距時，它的值是相對於元素的字體大小的，而不是相對於父元素的字體大小的。
對於內邊距和外邊距的設置， 建議使用相對單位。
如果要對內邊距和外邊距使用百分數，通常不會將它們用於上下邊距的值，因為這樣的值是基於其包含塊的寬度的。
11.11 使元素浮動
可以通過 float 屬性使元素浮動在文本或其他元素上。可以使用這種技術讓文本環繞在圖像或者其他元素周圍，也可以使用這種技術創建多欄布局等。
讓文本環繞元素float:
使用 width 屬性顯式地設置元素的寬度，以便有空間放置圍繞它的內容。
float 屬性不是繼承的。
11.12 控制元素浮動的位置
浮動的元素對文檔流的影響與非浮動元素的影響是不同的。浮動元素會讓接下來的內容環繞在它周圍。不過，它並不會影響父元素或其他祖先元素的高度，因此從這一點來說，它不屬於文檔流的一部分。
可以使用 clear 屬性清除浮動效果。
控制元素浮動位置clear:
如果要讓浮動元素的祖先元素在高度上包含浮動元素，並消除浮動，可以使用clearfix或overflow 方法替代。
要使用clearfix 方法，只需要在樣式表中引入.clearfix 的規則，然後為浮動元素的父元素（該元素為希望清除浮動的元素）添加clearfix 類.
clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
使用overflow 創建自清除浮動元素
.container {
overflow: hidden;
}
應該將clear屬性添加到不希望環繞浮動對象的元素上。而 clearfix 和overflow 方法是應用於浮動元素的父元素或祖先元素的。
浮動元素的 display 屬性會變成display: block;，哪怕將其設置為 display: inline;（無論是浏覽器的默認樣式還是手動顯式設置），該屬性值依然為 block。
11.13 對元素進行相對定位
每個元素在頁面的文檔流中都有一個自然位置。相對於這個原始位置對元素進行移動就稱為相對定位。周圍的元素完全不受此影響。
記住，既要指明采用相對位置，還要給出偏移量。
偏移自然流中元素的步驟：
(1) 輸入position: relative;。
(2) 輸入 top、right、bottom 或 left。再輸入 :d，這裡的d 是希望元素從它的自然位置偏移的距離，可以表示為絕對值（如10px）、相對值（如 2em）或百分數。值可負可正。
其他元素不會受到偏移的影響，仍然按照這個元素原來的盒子進行排列。設置了相對定位的內容可能與其他內容重疊，這取決於top、right、bottom 和 left 的值。
使用相對定位、絕對定位或固定定位時，對於相互重疊的元素，可以用 z-index屬性指定它們的疊放次序。
對元素設置 position: static，可以覆蓋 position: relative 設置。static 是元素的默認值，這就是元素出現在常規文檔流中的原因。
定位不是繼承的。
11.14 對元素進行絕對定位
通過對元素進行絕對定位，即指定它們相對於 body或最近的已定位祖先元素的精確位置，可以讓元素脫離正常的文檔流。
這與相對定位不同，絕對定位的元素不會在原先的位置留下空白。
這與讓元素浮動也不同。對於絕對定位的元素，其他元素不會環繞在它的周圍。事實上，其他內容不知道它的存在，它也不知道其他內容的存在。
對元素進行絕對定位的步驟：
(1) 輸入position: absolute;。
(2) 根據需要，輸入 top、right、bottom或 left。再輸入 :d，這裡的d 是希望元素相對於其祖先元素偏移的距離（如 10px 或 2em）或相對於其祖先的百分數。
(3) 根據需要，對希望成為絕對定位參照體的祖先元素添加 position: relative;。如果跳過這一步，將對元素相對於body 計算偏移量。
由於絕對定位的元素脫離了文檔流，因此它們可能會相互重疊，或與其他元素重疊。
如果不為絕對定位的元素指定偏移量，這個元素將顯示在它的自然位置上，但不會影響後續元素在文檔流中的位置。
還有一種定位類型稱為固定定位。當訪問者滾動浏覽器窗口時，頁面內容通常隨之上下移動。如果對元素設置 position: fixed;，它就會固定在浏覽器窗口中。當訪問者上下滾動浏覽器窗口時，該元素不會隨之移動，頁面的其余部分仍照常滾動。
使用相對定位、絕對定位或固定定位時，可以使用 z-index 屬性指定相互重疊的元素的疊放次序。
對元素設置position: static 將覆蓋position: absolute; 的設置。
11.15 在棧中定位元素
當你開始使用相對定位、絕對定位和固定定位以後，很可能發現元素相互重疊的情況。
在棧中定位元素：
輸入 z-index: n，其中的n 是表示元素在定位過的對象堆中的層級的數字。
z-index 的值越大，元素在堆中就越高。
z-index 屬性僅對定位過的元素（即設為絕對定位、相對定位或固定定位的元素）有效。
z-index 屬性不是繼承的。
11.16 處理溢出
元素並不總是包含在它們自己的盒子裡。可以使用 overflow 屬性控制元素在盒子外面的部分。
決定浏覽器如何處理溢出overflow:
overflow 屬性不是繼承的。
11.17 垂直對齊元素
使元素垂直對齊vertical-align:
可以使用 vertical-align 設置表格單元格中內容的對齊方式。除了表格以外，vertical-align 屬性僅適用於行內元素，不能應用於塊級元素。
11.18 修改鼠標指針
修改指針形狀cursor:
不同浏覽器、不同系統的指針形狀可能有細微的差異。
響應式 Web 設計（responsive Web design）方法植根於以下三點：
? 靈活的圖像和媒體。圖像和媒體資源的尺寸是用百分數定義的，從而可以根據環境進行縮放。
? 靈活的、基於網格的布局，也就是流式布局。對於響應式網站，所有的width 屬性都用百分數設定，因此所有的布局成分都是相對的。其他水平屬性通常也會使用相對單位（em、百分數和 rem 等）。
? 媒體查詢。使用這項技術，可以根據媒體特征（如浏覽器可視頁面區域的寬度）對設計進行調整。
12.2 創建可伸縮圖像
制作可伸縮圖像的步驟：
(1) 對任何想做成可伸縮圖像的圖像，在HTML 的 img 標簽中省略 width 和 height 屬性。
(2) 在樣式表中，為每個想做成可伸縮圖像的圖像應用 max-width: 100%。
圖像縮放的可用空間是由其父元素建立的內容區域。如果父元素有水平方向上的內邊距，可用空間就會相應減小。
一定要使用 max-width: 100% 而不是width: 100%。它們都能讓圖像在容器內縮放，不過，width: 100% 會讓圖像盡可能地填充容器，如果容器的寬度比圖像寬，圖像就會放大到超過其本來尺寸，有可能會顯得較為難看。
不要忘了對圖像進行優化，讓文件尺寸盡可能小。
可以使用 background-size 屬性對背景圖像進行縮放（對 IE8 無效）。
還可以使用 video, embed, object { max-width: 100%; } 讓 HTML5 視頻及其他媒體變成可伸縮的（同樣也不要在 HTML中為它們指定 width 和 height）。
12.3 創建彈性布局網格
創建彈性布局需要使用百分數寬度，並將它們應用於頁面裡的主要區域。
可以使用下面的公式計算需要使用的百分數：
要指定的寬度（以像素為單位）／容器寬度（以像素為單位）＝值
創建彈性布局的步驟：
對於需要某個寬度實現預期布局的元素，設 置 width: percentage;，其中 percentage表示你希望元素在水平方向上占據容器空間的比例。通常說來，不必設置 width: 100%;，因為默認設置為 display: block; 的元素（如 p 以及其他很多元素）或手動設置為 display: block; 的元素在默認情況下會占據整個可用空間。
作為可選的一步，對包含整個頁面內容的元素設置 max-width: value;，其中 value表示你希望頁面最多可增長到的最大寬度。通常，value以像素為單位，不過也可以使用百分數、em 值或其他單位的值。
如果父元素有水平方向上的內邊距，它為子元素建立的容器就會變小。
還可以對元素設置基於百分數的margin 和 padding 值。也可以使用em 值。內邊距和外邊距的 em 值是相對於元素的font-size 的，而基於百分數的值則是相對於包含元素的容器的。
對於設置了body { font-size: 100%; } 的頁面，對 font-size、margin、padding 和max-width 使用 em 值還有一個好處——如果用戶更改了浏覽器默認字體大小，那麼頁面也會跟著變大或變小。
將 box-sizing 屬性設置為 border-box，就可以很方便地對擁有水平方向內邊距（使用 em 或其他的單位）的元素定義寬度，而不必進行復雜的數學計算來找出百分數的值。
12.4 理解和實現媒體查詢
可以使用三種方式針對特定的媒體類型定位 CSS：
第一種方式是使用 link 元素的 media屬性，位於 head 內。
第二種方式是在樣式表中使用 @media 規則。
第三種方式，即使用 @import 規則（會影響性能）。
媒體查詢增強了媒體類型方法，允許根據特定的設備特性定位樣式。要調整網站的呈現樣式，讓其適應不同的屏幕尺寸，采用媒體查詢特別方便。
下面列出了可以包含在媒體查詢裡的媒體特性：
? width（寬度）
? height（高度）
? device-width（設備寬度）
? device-height（設備高度）
? orientation（方向）
? aspect-ratio（高寬比）
? device-aspect-ratio（設備高寬比）
? color（顏色）
? color-index（顏色數）
? monochrome（單色）
? resolution（分辨率）
? scan（掃描）
? grid（柵格）
還有一些非標准的媒體特性，如-webkit-device-pixel-ratio （WebKit①設備像素比） -moz-device-pixel-ratio（Mozilla②設備像素比）
除了 orientation、scan 和 grid 以外，上述屬性均可添加 min- 和 max- 前綴。min-前綴定位的是“大於等於”對應值的目標，而 max- 前綴定位的則是“小於等於”對應值的目標。
以下是媒體查詢的基本語法。
<link rel="stylesheet" media="logic type and (feature: value)" href="your-stylesheet.css" />
@media logic type and (feature: value) {
/* 目標CSS樣式規則寫在這裡 */
}
? logic（邏輯）部分是可選的，其值可以是 only 或 not。only 關鍵字可以確保舊的浏覽器不讀取余下的媒體查詢，同時一並忽略鏈接的樣式表。not 關鍵字可以對媒體查詢的結果求反，讓其反面為真。例如，使用 media="notscreen" 會在媒體類型為 screen 以外的任何類型時加載樣式表。
? type（類型）部分是媒體類型，如screen、print 等。
? feature: value 對是可選的，但一旦包含它們，它們必須用括號包圍且前面要有 and 這個字。feature 是預定義的媒體特性，如 min-width、max-width 或者 resolution。對 color、color-index和monochrome特性來說，value 是可選的。
可以使用 and 將多個特性和值的組合串接起來，還可以創建一系列媒體查詢（使用逗號分隔每個媒體查詢）。在用逗號分隔的媒體查詢列表中，如果有一個媒體查詢為真，則整個媒體查詢列表為真。
12.6 兼容舊版IE
是 Internet Explorer 8 及以下的版本不支持媒體查詢。這意味著這些浏覽器只會呈現媒體查詢以外的樣式，即基准樣式。
對於 IE8（及更早的版本），有三種解決方法：
CSS 規則 @font-face 為 Web 字體創造了可能，該樣式規則允許 CSS 鏈接到服務器上的一種字體供網頁使用。
14.2 理解廠商前綴
CSS3 規范要達到 W3C 的推薦標准（即定稿）狀態要經過數年。浏覽器則通常在W3C 開發標准的過程中就會提前實現這些特性。在包含某個特性的初始階段，浏覽器通常會使用廠商前綴實現這類特性。這樣，每個浏覽器都可以引入自己的 CSS 屬性支持方式，從而可以獲取反饋，而且一旦標准發生改變也不會造成影響。
每個主流浏覽器都有其自身的前綴：-webkit-（Webkit/Safari/舊版本的Chrome）、-moz-（Firefox）、-ms-（Internet Explorer）、-o-（Opera）。應該將前綴放在 CSS 屬性名的前面。如今，在多數情況下，我們一般只需要-webkit 前綴。
14.3 為元素創建圓角
使用CSS3，可以在不引入額外的標記或圖像的情況下，為大多數元素（包括表單元素、圖像，甚至段落文本）創建圓角
1. 為元素創建四個相同的圓角
2. 為元素創建一個圓角
此外，還可以單獨創建其他方位的圓角：
? 創建右上方圓角：用 top-right 替換
? 創建右下方圓角：用 bottom-right 替
? 創建左下方圓角：用 bottom-left 替
3. 創建橢圓形圓角
4. 使用border-radius 創建圓形
不支持 border-radius 的舊的浏覽器僅會以方角呈現元素。
border-radius 僅影響施加該樣式的元素的角，不會影響其子元素的角。因此，如果一個子元素有背景，該背景就有可能顯示在一個或多個父元素的角的位置，從而影響圓角樣式。
有時元素的背景（這裡講的不是子元素的背景）會透過其圓角。為了避免這種情況可以在元素的border-radius 聲明後面增加一條樣式規則：background-clip: padding-box;。
border-radius 屬性不是繼承的。
14.4 為文本添加陰影
使用text-shadow元素，可以在不使用圖像表示文本的情況下，為段落、標題等元素中的文本添加動態的陰影效果。
1. 為元素的文本添加陰影text-shadow:
分別輸入表示 x-offset（水平偏移量）、y-offset（垂直偏移量）、 blur-radius （模糊半徑）和color的值（前三個值帶長度單位，四個值之間不用逗號分隔）。
2. 為元素的文本添加多重陰影text-shadow:
（1）分別輸入 x-offset、y-offset、blur-radius 和 color 的值（前三個帶長度單位，四個值之間不用逗號分隔）。blur-radius 的值是可選的。
（2）輸入 ,（逗號）。
（3）對四種屬性使用不同的值重復上述步驟。
3. 將text-shadow 改回默認值
輸入 text-shadow: none;。
text-shadow屬性不需要使用廠商前綴。
x-offset 和 y-offset 值可以是正整數，也可以是負整數。blur-radius 值必須是正整數。這三個值都可以為 0。
不能像邊框和背景那樣單獨地指定四個屬性值。
text-shadow 屬性是繼承的。
14.5 為其他元素添加陰影
使用 text-shadow 屬性可以為元素的文本添加陰影，使用 box-shadow 屬性則可以為元素本身添加陰影。它們的基礎屬性集是相同的，不過box-shadow 還允許使用兩個可選的屬性——inset 關鍵字屬性和 spread 屬性（用於擴張或收縮陰影）。
如果你希望兼容舊版 Android、Mobile Safari 和 Safari 浏 覽器，那麼 box-shadow 需要加上 -webkit- 廠商前綴。
box-shadow 屬性接受六個值：帶長度單位的 x-offset 和 y-offset、可選的帶長度單位的 blur-radius、可選的 inset 關鍵字、可選的帶長度單位的 spread 值及 color 值。如果不指定 blur-radius 和 spread 的值，則設為0。
1. 為元素添加陰影
2. 創建內陰影
3. 為元素應用多重陰影
(1) 分別輸入表示 x-offset、y-offset、blur-radius、spread 和 color 的值（前四個值均帶長度單位）。如果有必要可以將 inset 關鍵字包含在內。
(2) 輸入,（逗號）。
(3) 對每種屬性使用不同的值重復上述步驟。
4. 將box-shadow 改回默認值
可以使用負的spread 值，讓整個陰影比應用樣式的元素小一些。
inset關鍵字可以讓陰影位於元素內部。
box-shadow 屬性是不繼承的。
14.6 應用多重背景
為單個HTML元素指定多個背景是CSS3引入的一個特性。
1. 為單個元素應用多重背景圖像
(1) 輸入 background-color: b，這裡的b 是希望為元素應用的備用背景顏色。
(2) 輸入 background-image: u，這裡的u是絕對或相對路徑圖像引用的 URL 列表（用逗號分隔）。
(3) 輸入 background-position: p，這裡的p 是成對的 x-offset 和 y-offset（可以是正的,也可以是負的；帶長度單位或者關鍵字，如 center top）的集合，用逗號分隔。對於第 (2) 步中指定的每個 URL，都應有一組 x-offset 和 y-offset。
(4) 輸入 background-repeat: r，這裡的r 是 repeat-x、repeat-y 或 no-repeat 值，用逗號分隔，第 (2) 步中指定的每個 URL 對應一個值。
對於多重背景圖像，可以使用標准的短形式語法，即使用逗號分隔每組背景參數.
指定多重背景不需要使用廠商前綴。
14.7 使用漸變背景
漸變背景也是 CSS3 中的新特性，通過它可以在不使用圖像的情況下創建從一種顏色到另一種顏色的過渡。
使用 CSS 創建漸變有兩種主要的方式：線性漸變和徑向漸變，每種方式都有不同的必選參數和可選參數。除非指定一種顏色向另一種顏色過渡的位置，否則浏覽器會自行決定不同顏色之間的過渡。
根據漸進增強的原則，最好為不支持背景漸變屬性的浏覽器提供一個備用選項。在CSS 中，它可以位於背景漸變規則的前面。
1. 創建備用背景顏色
輸入background: color 或者background- color: color，這裡的color 可以是十六進制數、RGB 值以及其他任何支持的顏色名稱，另外也可以使用圖像。最好不要將 RGBA、HSL 或 HSLA 值作為備用背景顏色，因為IE8 及以前的版本不支持。
2. 定義線性漸變background: linear-gradient(參數);
3. 定義徑向漸變background: radial-gradient(參數);
4. 指定顏色
輸入至少兩種顏色，每個顏色之間用逗號分隔。指定的第一個顏色出現在漸變的開始位置，最後一個顏色出現在漸變的結束位置。對於徑向漸變，它們分別為最裡邊的顏色和最外邊的顏色。
5. 指定顏色和顏色的停止位置
根據“指定顏色”中的說明進行操作。如果需要，對每個顏色值指定一個百分數以控制顏色出現在漸變中的位置。這個值可以是負數，也可以是大於100% 的數。
14.8 為元素設置不透明度
opacity: o，這裡的o 表示元素的不透明程度（兩位小數，不帶單位）。
opacity的默認值為1。該屬性值可以使用 0.00（完全透明）至 1.00（完全不透明）之間的兩位小數。例如，pacity:.09;、opacity: .2; 或者 opacity: 75;。小數點前的0是可選的。
opacity 屬性與使用 RGBA 或 HSLA設置的 alpha 透明背景色是兩個容易混淆的概念。opacity影響的是整個元素（包括其內容），而background-color: rgba(128,0,64,.6); 這樣的設置僅影響背景的透明度。
Internet Explorer 9 之前的版本並不原生支持 opacity 屬性，但對於它們，可以使用專有的濾鏡效應.。
無論顯示成什麼樣子，opacity 屬性並不是繼承的。opacity 的值小於 1 的元素的子元素也會受到影響，但這些子元素的opacity 值仍為1。
14.9 生成內容的效果
:before 和 :after 偽元素與 content 屬性結合使用，從而創建所謂的生成內容（generated content）。生成內容指的是通過 CSS 創建的內容，而不是由HTML 生成的。
不過，生成內容並不是為頁面添加段落或標題。使用生成內容可以添加符號，創建用於添加樣式的空內容元素，還可以做很多其他的事情。
14.10 使用sprite 拼合圖像
浏覽器通常很快就可以將文本顯示出來，但圖像往往會減慢頁面的加載速度。這一現象在移動設備上尤為明顯。為了解決這一問題，可以將多個圖像拼合成單個背景圖像（sprite），再通過 CSS 控制具體顯示圖像的哪一部分。其中的秘密就是 background-position 屬性。
HTML 包含專門用於創建項目列表的元素。你可以創建普通列表、編號列表、符號列表以及描述列表，可以在一個列表中嵌套另外一個或多個列表。
所有的列表都是由父元素和子元素構成的。父元素用於指定要創建的列表的類型，子元素用於指定要創建的列表項目類型。
下面列出了三種列表類型以及組成它們的元素：
除非使用CSS另行指定，有序列表中的項目使用阿拉伯數字（1、2、3 等）進行編號。
默認情況下，無序列表的項目前面顯示實心的圓點。
15.2 選擇標記
創建列表時，無論是有序列表還是無序列表，都可以選擇出現在列表項目左側的標記的類型。
1. 選擇標記
在樣式表中，輸入 list-style-type:marker，這裡的marker是以下屬性值中的一種：
? disc（圓點，●） 、 circle（圓圈，○） 、 square（方塊，■）、
decimal（數字，1、2、3……）、
upper-alpha（大寫字母，A、B、C……）、
lower-alpha（小寫字母，a、b、c……）、
? upper-roman（大寫羅馬數字，Ⅰ、Ⅱ、Ⅲ、Ⅳ……）、
lower-roman（小寫羅馬數字，i、ii、iii、iv……）。
2.顯示無標記列表
在樣式表規則中，輸入list-style-type: none。
15.3 使用定制的標記
在目標列表或列表項的樣式規則中，
(1) 輸入list-style: none; 以取消常規的標記。
(2) 輸入 background: url(image.ext) repeat-type horizontal vertical;，其中
image.ext 是要作為定制標記的圖像的路徑和文件名，
repeat-type 是 no-repeat、repeat-x 和repeat-y 中的一種（通常設為 no-repeat），horizontal 和vertical 值表示列表項目中背景圖像的位置。
(3) 輸入 padding-left: value;，這裡的value 應不小於背景圖像的寬度，以防列表項目的內容覆蓋到定制標記的上面。
默認標記在默認情況下位於列表項目的外面，而定制標記顯示在列表項目的裡面，因為定制標記是為列表項目本身應用的背景圖像。
15.4 選擇列表的起始編號
1. 設置整個列表編號方案的初始值
在 ol 開始標簽中輸入 start="n"，這裡的n 表示列表的初始值。
2. 修改有序列表中某列表項目的編號
在目標 li 項目內輸入 value="n"，這裡的n 代表該列表項目的值。
如果使用 start 和 type，請始終使用數字。即便決定使用字母或羅馬數字對列表進行編號，也應使用數字。
value 屬性的值會覆蓋 start 屬性的值。
列表可以包含一個以上的帶 value 屬性的 li。
15.5 控制標記的位置
控制標記位置list-style-position:
如果列表項目中的文本顯得較為擁擠，則可以通過設置 line-height 增大文本行間距。
list-style-position屬性是繼承的。
15.6 同時設置所有的列表樣式屬性
CSS 也為 list-style 提供了簡寫形式。它將 list-style-type、list-style-position 和較少使用的list-style-image放到了一條屬性中。
可以指定三個list-style 屬性，也可以指定其中的任意一個，指定多個屬性時順序任意。任何沒有顯式地指定的屬性都會設為其默認值（list-style-type 的默認值為 disc，list-style-image 的默認值為 none，list-style-position的默認值為outside）。
list-style 屬性是繼承的。這也是我們可以將它應用到父元素ol 或 ul 上的原因。
15.8 創建描述列表
HTML 提供了專門用於描述成組出現的名稱（術語）及其值之間關聯的列表類型。
根據 HTML5 規范，“由名稱及其值構成的組合可以是術語和定義、元數據主題和值、問題和答案，以及任何其他的名 – 值組。”
每個列表都包含在 dl 中，其中的每個名 – 值組都有一個或多個 dt 元素（名稱或術語）以及一個或多個 dd 元素（它們的值）。