CSS3各個(gè)模塊詳解

一， CSS3 盒子 陰影 屬性 box- shadow 也是 CSS3 新增 的 一個(gè) 重要 屬性， 用來 定義 元素 的 盒子 陰影。

1. inset： 陰影 類型， 可選 值。 如果不 設(shè)置， 其 默認(rèn) 的 投影 方式 是 外 陰影； 如果 取其 唯一 值“ inset”， 就是 給 元素 設(shè)置 內(nèi) 陰影。
2. x- offset： 陰影水平偏移量， 其值可以是正負(fù)值。 如果取正值， 則 陰影 在 元素 的 右邊， 反之 取 負(fù)值， 陰影 在 元素 的 左邊。
3. y- offset： 陰影垂直偏移量， 其值可以是正負(fù)值。 如果取正值， 則 陰影 在 元素 的 底部， 反之 取 負(fù)值， 陰影 在 元素 的 頂部。
4. blur- radius： 陰影模糊半徑， 可選參數(shù)。 其值只能是正值， 如果 取值 為“ 0” 時(shí)， 表示 陰影 不具 有 模糊 效果， 如果 取值 越大， 陰影 的 邊緣 就 越 模糊。
5. spread- radius： 陰影 擴(kuò)展 半徑， 可選參數(shù)。 其值可以是正負(fù)值， 如果 取值 為 正值， 則 整個(gè) 陰影 都 延展 擴(kuò)大， 反之 取值 為 負(fù)值， 則 整個(gè) 陰影 都 縮小。
6. color： 陰影 顏色， 可選 參數(shù)， 如果不設(shè)定任何顏色 時(shí)， 瀏覽器會(huì)取默認(rèn)色， 但 各瀏覽器 默認(rèn)色不一樣，
7. 在圖片上加內(nèi)陰影，先給圖片添加一個(gè)容器，如：div等，
   二， border-radius 圓角
   http:/ /www.iis7.com/b/wzjk/
8. 圓形 border- radius 制作 圓角 有兩 點(diǎn) 技巧。 ·元素 的 寬度 和 高度 相同。 ·圓角 的 半徑 值 為 元素 寬度 或 寬度 的 一半 或者 直接 設(shè)置 圓角 半徑 值 為 50%。
9. 半圓 border- radius 制作半圓與制作圓形的方法是一樣 的， 只是元素的 寬度與圓角方位要配合一致， 不同的寬度和高度比例， 以及圓角方位， 可以制作上半圓、下半圓、 左半圓 和 右半圓 效果。
10. 扇形 border- radius 制作 扇形， 其實(shí) 就是 使用 border- radius 屬性 制作 四分之一 圓形。 遵循“ 三 同， 一 不同” 原則， 其中“ 三 同” 是指 元素 的 寬度、 高度 和 圓角 半徑 值 相同， 而“ 一 不同” 指的 是 圓角 位置 不同。 根據(jù) 圓角 取值 位置 不一樣， 可以分 左上、 右上、 右下 和 左下 四種 扇形 效果。
11. 橢圓 橢圓 其實(shí) 就是 一個(gè) 圓形 受到 擠壓 而成 的 一種 形狀， border- radius 制作 橢圓 也非 常 方便， 只 受限 于 元素 的 寬度 或 高度， 然后 就是 圓角 半徑， 制作 橢圓 的 圓角 半徑 和 其他 圖形 有所 不一樣， 需要 設(shè)置 圓角 的 水平 和 垂直 方向 的 半徑 值。 橢圓 有 兩種， 一種 是 水平 的， 另外 一種 是 垂直 的。 它們 之間 的 差別 只是 方向 性的 區(qū)別， 其 制作 方法 是 一樣 的。 制作 水平 橢圓， 元素 寬度 是 高度 的 2 倍， 而且 border- radius 的 水平 半徑 等于 元素 寬度， 垂直 半徑 等于 元素 高度； 而 垂直 橢圓 剛好 與水 平 橢圓 的 參數(shù) 相反。
    。。。。。。
    三， CSS3 背景
    背景主要包括五個(gè)屬性：
    1· background- color（ 背景 顏色）
    2· background- image（ 背景 圖片）
    3· background- repeat（ 背景 圖片 展示 方式）
    4· background- attachment（ 背景 圖片 是 固定 還是 滾動(dòng)）
    5· background- position（ 背景 圖片 位置）
    可以單獨(dú)寫， 也可以將這些屬性串在 一起使用。
12. background- color 屬性，用來設(shè)置元素的背景顏色， 其默認(rèn)值為“ transparent”， 不設(shè)置任何顏×××況下是透明色，
13. background- image 屬性，用來設(shè)置元素的背景圖片， 默認(rèn)值為“ none”，< url> 是指背景圖片的地址， 這個(gè)地址可以是相對(duì)地址， 也可以是絕對(duì)地址。
14. background- repeat 屬性，用來設(shè)置元素背景圖片在元素的盒模型中的鋪放格式， 其默認(rèn)為“ repeat”， 也就是背景圖片沿元素的X軸和Y軸同時(shí)平鋪，“ repeat- x”表示的是元素背景圖片沿元素 的X軸平鋪， Y軸不進(jìn)行任何鋪 放；“ repeat- Y” 剛好相反， 元素背景圖片沿元素的Y軸平鋪， X軸不進(jìn)行任何鋪 放；“ no- repeat”和 默認(rèn)值“ repeat” 相反， 表示背景圖片不做任何鋪 放。
15. background- attachment 屬性，用來設(shè)置元素背景圖片是否固定或者隨著頁(yè)面的其余部分滾動(dòng)， 其默認(rèn)值為“ scroll”， 表示背景圖片會(huì)隨著瀏覽器滾動(dòng)條一起滾動(dòng)， 而取值為“ fixed” 時(shí)， 背景圖片 固定不動(dòng)。 background- attachment 取值為“ fixed” 時(shí)， 一般運(yùn)用在html或 body標(biāo)簽 上， 使用在其他標(biāo)簽上不能達(dá)到固定效果。
16. background- position 屬性，用來設(shè)置元素背景圖片的位置， 其默認(rèn)值為（ 0，0）||（ 0%， 0%）||（ lefttop）， 其值可以是具體的百分?jǐn)?shù)或數(shù)值設(shè)置（ 可以 是 負(fù)值）， 也可以使用關(guān)鍵詞 left、 center、 top、 right、 top、 bottom 配合設(shè)置，
    三，*與背景相關(guān)的新增屬關(guān)于 background屬性的用法相信很多讀者都已經(jīng)熟悉了。 在CSS3中， background 屬性 依然保持以前的用法， 只是追加了一些與背景相關(guān)的屬性。
    1· background- origin： 指定繪制背景圖片的起點(diǎn)。
    2· background- clip： 指定背景圖片的顯示范圍。
    3· background- size： 指定背景圖片的尺寸大小，在CSS3中， 可以使用background- size屬性來指定背景圖片的尺寸， 可以控制背景圖片在水平和垂直兩個(gè)方向的縮放， 也可以控制圖片拉伸覆蓋 背景區(qū)域的方式， 甚至還可以截取背景圖片。 背景圖片能夠自適應(yīng)元素盒子的大小， 實(shí)現(xiàn)與模塊大小完全適應(yīng)的背景圖片， 避免了因區(qū)塊尺寸不同而需要設(shè)計(jì)不同的背景圖片。
    background- size共有五種屬性值，每一種屬性值的作用如下：
    ·auto： 默認(rèn)值。 將保持背景片的原始高度和寬度。
    ·<length>： 取具體的整數(shù)值（ 例如 px 值）， 將改變背景圖片的大小。
    ·<percentage>： 取值為百分值， 可以是 0% ～ 100%。 此時(shí)， 同樣改變背景圖片的大小， 但 此值是相對(duì)于元素的寬度來進(jìn)行計(jì)算， 并不是根據(jù)背景圖片的寬度來進(jìn)行計(jì)算。
    ·cover： 將背景圖片放大， 以適合鋪滿整個(gè)容器。 但這種方法會(huì)致使背景圖片失真。
    ·contain： 保持背景圖像本身的寬和高比例， 將背景圖像縮放到寬度或高度正好適應(yīng)所定義背景容器的區(qū)域。 當(dāng) background- size 取值為固定數(shù)值（ length） 和百分比值（ percentage） 時(shí)可以 設(shè)置兩個(gè)值， 也可以設(shè)置一個(gè)值。 只取一個(gè)值時(shí)， 指定了背景圖片的寬度， 第二個(gè)值相當(dāng)于auto， 也就是指定了高度。 在這種情況下， auto值設(shè)定 之后能夠讓背景圖片的高度自動(dòng)地按照比例縮放。
    4· background- break： 指定內(nèi)聯(lián)元素的背景圖片進(jìn)行平鋪時(shí)的循環(huán)方式。
    。。。。。。
    四， CSS3 文本
    在 Web 頁(yè)面或者Web應(yīng)用程序中設(shè)置文本樣式是CSS最基本的要求， 早期的CSS文本功能就是給Web頁(yè)面設(shè)置文本的 字體、 字號(hào)、 顏色、 樣式、 粗細(xì)、 間距 等。 隨著 CSS3 的 出現(xiàn)， 文本 功能 不僅僅 局限于 這些 基本 的 運(yùn)用， 它 給 文本 功能 添加 了 一些 高級(jí)的 屬性 設(shè)置， 如 文本 陰影 屬性 text- shadow、 文本 自動(dòng) 換行 屬性 word- break、 長(zhǎng) 單詞 與 URL 地址 自動(dòng) 換行 屬性 word- wrap 和 文本 溢出 屬性 text- overflow 等，
    在 CSS文本功能上主要分為三大類： 字體、 顏色 和 文本，
    text- shadow 屬性 一共 包含 4 個(gè) 屬性 參數(shù)， 每個(gè) 屬性 參數(shù) 都 具有 自己的 作用。
    ·color： 陰影 顏色， 定義繪制陰影時(shí)所使用的顏色， 這個(gè)參數(shù)可以放在第一 也可以放在最后， 是一 個(gè)可選參數(shù)， 如果沒有顯式設(shè)置陰影顏色， 會(huì)使用文本的顏色作為陰影顏色。 陰影顏色可以是顏色 關(guān)鍵詞、 十六進(jìn)制 顏色、 RGB 顏色、 RGBA 透明 色 等。
    ·x- offset： X 軸 位移， 用來 指定 陰影 水平 位移 量， 其 值 可以 是 正 負(fù)值， 如果 為 正值， 陰影 在 對(duì)象 的 右邊， 反之 陰影 在 對(duì)象 的 左邊。
    ·y- offset： Y 軸 位移， 用來 指定 陰影 垂直 方向 偏移量， 其 值 可以 是 正 負(fù)值， 如果 為 正值， 陰影 在 對(duì)象 的 底部， 反之 陰影 在 對(duì)象 的 頂部。
    ·blur- radius： 陰影 模糊 半徑， 可選 參數(shù)， 用來 設(shè)置 陰影 的 模糊 半徑， 代表 陰影 向外 模糊 的 模糊 范圍。 這個(gè) 值 越大， 陰影 向外 模糊 的 范圍 越大， 陰影 的 邊緣 就 越 模糊。 不過 這個(gè) 值 只能 是 正值， 其 值 為 0 時(shí)， 表示陰影 不具 有 模糊 效果。
    可以 使用 text- shadow 屬性來給文本指定多個(gè)陰影， 并且針對(duì)每個(gè)陰影使用不同顏色。 指定多個(gè)陰影時(shí)使用逗號(hào)將多個(gè)陰影進(jìn)行分隔。 text- shadow 多陰影效果按照給定的順序應(yīng)用， 因此前面的 陰影有可能會(huì)覆蓋后面的， 但是它們永遠(yuǎn)會(huì)覆蓋文本本身。
17. CSS3 溢出文本屬性平時(shí)在網(wǎng)頁(yè)制作中一定碰到過內(nèi)容溢出的問題， 如文章列表標(biāo)題很長(zhǎng)， 而其寬度又受到限制， 此時(shí)超出寬度的內(nèi)容就會(huì)以省略 標(biāo)記（…） 顯示。 以前實(shí)現(xiàn)這樣的效果都是由后臺(tái) 程序截取一定的字符數(shù)在前臺(tái)輸出， 另外一種方法就是使用 JavaScript 截取 一定 的 字符 數(shù) 實(shí)現(xiàn)。 可是 這 兩種 方法 都有 其 不足之處， 如 中文 和 英文 的 計(jì)算 字符 寬度 的 問題， 這個(gè) 值 不好 計(jì)算， 所以 造成 截取 字符 數(shù) 不好 控制， 從而其通用性也差。 CSS3 新增 了 text- overflow 屬性， 使得 這個(gè) 問題 迎刃而解。
    text- overflow 屬性 參數(shù) 比較 簡(jiǎn)單， 只有兩個(gè)屬性值。
    ·clip： 不顯 示 省略 標(biāo)記（…）， 只是 簡(jiǎn)單 的 裁 切。
    ·ellipsis： 文本 溢出 時(shí) 顯示 省略 標(biāo)記（…）， 省略 標(biāo)記 插入 的 位置 是最 后 一個(gè) 字符。
    強(qiáng)制 文本 在 一行 顯示（ white- space: nowrap） 和 溢出 內(nèi)容 隱藏（ overflow: hidden）， 并且 需要 定義 容器 的 寬度。
    text-overflow: ellipsis; overflow: hidden; 有省略號(hào)，需要這兩個(gè)屬性配合才有效，
    text-overflow: clip; overflow: hidden; 直接隱藏，需要這兩個(gè)屬性配合才有效，
18. CSS3 文本 換行
    在 CSS3 中， 使用 word- wrap：break- word屬性 實(shí)現(xiàn) 長(zhǎng) 單詞 與 URL 地址 的 自動(dòng) 換行。
    ·break- all： 可以 強(qiáng)行 截?cái)?英文 單詞， 達(dá)到 詞 內(nèi) 換行 效果。
    ·keep- all： 不允許字?jǐn)嚅_。 如果是中文把前后標(biāo)點(diǎn)符號(hào)內(nèi)的一個(gè)漢字短語(yǔ)整個(gè)換行， 英文單詞整個(gè)換行； 如果出現(xiàn)某個(gè)英文字符長(zhǎng)度超過容器邊界， 后面的部分將撐破容器； 如果邊框?yàn)楣潭▽傩裕?則后面部分無(wú)法顯示。
    white- space 屬性主要用來聲明建立布局過程中如何處理元素中的空白符。
    white- space 屬性 取值 簡(jiǎn)單 說明 如下：
    ·normal： 默認(rèn)值。 空白處會(huì)被瀏覽器忽略。 可以通過這個(gè)值恢復(fù)到屬性的默認(rèn)值。
    ·pre： 文本空白處會(huì)被瀏覽器扣留， 其行為方式類似于 HTML 中的< pre> 標(biāo)簽 效果。
    ·nowrap： 文本不會(huì)換行， 文本會(huì)在同一行上， 直到碰到換行標(biāo)簽< br />為止。
    ·pre- line： 合并空白符序列， 但保留換行符， 此屬性不支持 IE 7. 0-、 Firefox 3. 0- 和 Opera 9. 2- 以下版本瀏覽器。
    ·pre- wrap： 保留空白符序列， 但是正常進(jìn)行換行， 此屬性值不支持 IE 7. 0 和 Firefox 3. 0 以下 版本瀏覽器。
    ·inherit： 繼承父元素的 white- space 屬性值， 此屬性值在所有的 IE瀏覽器都不支持。
    。。。。。。
    五，　 CSS3 顏色特性 “佛 靠 金 裝， 人 靠 衣裝”， 網(wǎng)頁(yè)也是如此。 隨著互聯(lián)網(wǎng)的 迅速發(fā)展， 一個(gè)網(wǎng)頁(yè)給人們留下的第一印象， 既不是它的內(nèi)容， 也不是它的設(shè)計(jì)， 而是整體顏色。 為了能夠達(dá)到 人們的需求， Web設(shè)計(jì)師除了需要掌握網(wǎng)站制作的技術(shù)之外， 還必須能夠很好地應(yīng)用 Web 顏色。 換句話說， 網(wǎng)站顏色的使用好壞， 直接影響網(wǎng)站的生存力。
    網(wǎng)頁(yè)色彩的表現(xiàn)原理
    我們知道有256種Web安全顏色， 其實(shí)這256種顏色 是指8位顏色的表現(xiàn)能力， 隨著科技的發(fā)展， 現(xiàn)在顏色不局限于8位， 16位色彩的總數(shù)是65536 色， 也就是2的16次方， 而新增了24位元色彩， 也就是2的24次方， 即16777216種顏色。 32位色就是2的32次方的發(fā)色數(shù)， 即16777216種顏色， 不過它增加了256階顏色的灰度。 32位色和16位色肉眼分辨不出來嗎？ 如果用兩臺(tái)品×××型號(hào)都一樣 的顯示器， 分別調(diào)不同的顏色， 就能看出區(qū)別。 而在Web頁(yè)面的設(shè)計(jì)中， 顏色主要運(yùn)用16 進(jìn)制數(shù)值的表示方法， 為了用HTML表現(xiàn)RGB顏色， 使用十六進(jìn)制數(shù) 0 ～ 255， 改為十六進(jìn)制就是 00 ～ FF， 用RGB的順序羅列就成為HTML顏色編碼。 例如， 在 HTML 編碼中“ 000000” 就是指紅色（ R）、 綠色（ G） 和藍(lán)色（ B） 都沒有， 就是0狀態(tài)， 也就是黑色。 相反“ FFFFFF” 就是就是 紅色（ R）、 綠色（ G） 和藍(lán)色（ B）都是 255， 也就是白色。 顯示器是由 一個(gè)個(gè)像素構(gòu)成， 利用電子束來表現(xiàn)色彩。 像素把光的三原色： 紅色（ R）、 綠色（ G）、 藍(lán)色（ B） 組合成的色彩 按照科學(xué)原理表現(xiàn)出來。 一 像素包含 8 位元色彩的信息量， 有 從 0 ～ 255 的256個(gè)單元， 其中 0 是 完全 無(wú)光 狀態(tài)， 255 是最 亮 狀態(tài)。
19. RGB色彩模式，RGB色彩模式是光的三原色 紅、 綠、 藍(lán) 混合產(chǎn)生的。 Web頁(yè)面中使用的圖片在大多數(shù)是在RGB色彩模式中制作的。 RGB色彩是顏色相加混合產(chǎn)生的， 這樣的混合稱為 加色混合。 加色混合中， 補(bǔ)色是指相關(guān)的兩個(gè)顏色混合時(shí)， 成為白色的情況。
20. CMYK色彩模式，CMYK色彩模式是指顏料的三原色 青色、 洋紅、 ××× 加上 黑色， 這四種顏色減色混合表現(xiàn)出的色彩是主要用于出版印刷時(shí)制作圖像的一種模式。 減色混合是指是指顏色混合后出現(xiàn) 的色彩比原來的顏色暗淡， 這樣與補(bǔ)色相關(guān)的兩種顏色混合就會(huì)出現(xiàn)彩色的情況。
21. 索引色彩模式，索引色彩模式是已經(jīng)被限定在256種顏色以內(nèi)的模式， 主要用于Web頁(yè)面安全色彩和制作透明 GIF 圖片。 在 Photoshop 中制作透明GIF圖片時(shí)， 一定要使用索引色彩模式。
22. 灰度模式，灰度模式是無(wú)色彩模式， 在制作黑白圖片時(shí)使用， 主要用于處理 黑、白、灰色 圖片。
23. 雙色調(diào)模式，雙色調(diào)模式是在黑白圖片中加入顏色， 使色調(diào)更加豐富的模式。 RGB、 CMYK 等顏色模式都不可以直接轉(zhuǎn)換為雙色調(diào)模式， 必須將色彩模式先轉(zhuǎn)換為灰度模式后， 才能夠轉(zhuǎn)換為雙色調(diào) 模式。 用雙色調(diào)模式可以用很小的空間制作出漂亮的圖片。
24. 位圖模式，位圖模式是 用白色和黑色共同處理圖片的模式。 與雙色調(diào)一樣， 除雙色調(diào)模式和灰度模式外， 其他色彩模式都需要轉(zhuǎn)換為灰度模式后， 再轉(zhuǎn)換為位圖模式。 位圖模式可以選定5種圖片 處理 方法：
    1） 50% 閾值， 是在 256 種 顏色 中， 當(dāng) 顏色 值 大于 129 就 處理 為 白色， 反之則處理為黑色。
    2） 圖案仿色， 是按一定的模式處理圖片。
    3） 擴(kuò)散仿色為最常用的選項(xiàng)， 是按黑色和白色的陰影使其分布。
    4） 半調(diào)網(wǎng)屏與自定圖案， 是利用盲點(diǎn)的各種形態(tài)和密度與用戶自己設(shè)置樣式的處理方式。
    CSS3 顏色模式在 CSS2. 的基礎(chǔ) CSS3上 新增了 RGBA、 HSL 和 HSLA，
25. RGBA 在 RGB 基礎(chǔ)上 增加 了控制 alpha 透明度的參數(shù)， 其中 RGB 顏色 模式（ 也稱 為 三原色） 是工業(yè)界 的 一種 顏色標(biāo)準(zhǔn)， 通過對(duì) 紅（ R）、 綠（ G）、 藍(lán)（ B） 三個(gè) 顏色 通道 的 變化 以及 它們 相互 之間 的 疊加 得到 各種 顏色，RGB幾乎包括人類視力所能感知的所有顏色， 是目前運(yùn)用最廣的顏色系統(tǒng)之一。 而RGBA 僅在 RGB 的 基礎(chǔ)上 增加 了 alpha 通道， 用來 設(shè)置 顏色 的 透明度。
    RGBA 的 屬性 參數(shù) 很 簡(jiǎn)單， 分別 代表 紅綠 藍(lán) 以及 透明度 的 值。
    ·R： 紅色 值， 其 取值 可以 是 正 整數(shù) 或者 百 分值。
    ·G： 綠色 值， 其 取值 可以 是 正 整數(shù) 或者 百 分值。
    ·B： 藍(lán)色 值， 其 取值 可以 是 正 整數(shù) 或者 百 分值。
    ·A： alpha 透明 值， 其 取值 在 0 ～ 1 范圍 之間。
    這幾個(gè)參數(shù)值都不可以取負(fù)值。
26. HSL 顏色 模式 HSL 和 RGB 一樣， 同 屬于 工業(yè)界 的 一種 顏色 標(biāo)準(zhǔn)， 通過 對(duì) 色調(diào)（ H）、 飽和度（ S）、 亮度（ L） 三個(gè) 顏色 通道 的 變化 以及 它們 相互 之間 的 疊加 得到 各式各樣 的 顏色 的。 HSL 標(biāo)準(zhǔn) 幾乎 包括 人類 視力 所能 感知 的 所有 顏色， 是 目前 運(yùn)用 最 廣 的 顏色 系統(tǒng) 之一。 使用 HSL 模型 為 圖像 中 每一個(gè) 像素 的 HSL 分量 分配 一個(gè) 0 ～ 255 范圍內(nèi) 的 強(qiáng)度 值。 HSL 圖像 只用 三種 通道 按照 不同 的 比例 混合， 在 屏幕 上 呈現(xiàn) 16777216 種 顏色。 前面 也 說過， 色調(diào)（ H） 是在 色 盤 上 的 顏色（ 如圖 6- 4 所示）， 顏色 的 選擇 是 使用 飽和度（ S）， 0 度 是 紅色， 120 度 為 綠色， 240 度 為 藍(lán)色。 同時(shí) 可以 使用 不同 的 亮度（ L） 來 控制 這個(gè) 顏色， 其中 0 表示 的 是一 個(gè) 灰度， 不使 用 任何 的 色彩， 而 100% 是指 在 充分 使用 一個(gè) 顏色。
    ·H： 色調(diào)（ Hue）。 取整 數(shù)值（< length>）， 可以 為 任意 整數(shù)， 其中 0（ 或 360 或- 360） 表示 紅色， 60 表示 ×××， 120 表示 綠色， 180 表示 青色， 240 表示 藍(lán)色， 300 表示 洋紅。 當(dāng) 它們 的 值 大于 360 時(shí)， 實(shí)際 的 值 等于 該 值 除 360 之后 的 余數(shù)。 例如， 如果 色調(diào) 的 值 是 480， 則 實(shí)際 的 顏色 值 為 480 除以 360 之后 得到 的 余數(shù) 120。
    ·S： 飽和度（ Saturation）。就是顏色的深淺度和鮮艷程序， 取百分?jǐn)?shù)（< percentage>）， 可以取值 0 ～ 100%之間的任意值， 其中0表示灰度（ 沒有 該 顏色）， 100%表示飽和度最高（ 該 顏色 最 鮮艷）。
    ·L： 亮度（ Lightness）。 取值和飽和度（ S） 一樣， 可以 取值 0 ～ 100% 之間的任意值， 其中0最暗（ 黑色）， 100% 最亮（ 白色）。
27. HSLA 顏色模式 HSLA 是 HSL 的 擴(kuò)展 模式， 在 HSL 的 基礎(chǔ)上 增加 一個(gè) 透明 通道 alpha 來 設(shè)置 不透明 參數(shù)。
    。。。。。。
    六， CSS3盒模型 CSS 有 一種基礎(chǔ)設(shè)計(jì)模式叫盒模型， 定義了Web頁(yè)面中的元素是如何看做盒子來解析的。 每一個(gè)盒子有不同的展示界面，
    在 CSS 中 主要有以下幾種盒模型： inline、 inline- block、 block、 table、 absolute position、 float。 瀏覽器把每個(gè)元素看 一個(gè)盒模型， 每一個(gè)盒模型是由以下幾個(gè) 屬性 組合 所 決定 的： display、 position、 float、 width、 height、 margin、 padding 和 border 等， 不同 類型 的 盒 模型 會(huì) 產(chǎn)生 不同 的 布局。
    什么是盒模型CSS 中 每一個(gè) 元素 都是 一個(gè) 盒 模型， 包括 HTML 和 body 標(biāo)簽 元素。 在平時(shí)設(shè)計(jì)中， 大家對(duì) content、 padding、 margin、 background 和 border 來說一定不會(huì)陌生了， 因?yàn)?盒模型都具備這些屬性。 其中 width、 height、 border、 background、 padding 和 margin 之間的層次關(guān)系和相互影響，
    可以 看出 padding、 content、 background- image、 background- color， 它們 四 者 構(gòu)成 了 Z 軸（ 垂直 屏幕 的 坐標(biāo)） 多重 層疊 關(guān)系。 但是 border 與 margin、 padding 三 者 之間 應(yīng)該 是 平 面上 的 并 級(jí) 關(guān)系， 并不能 構(gòu)成 Z 軸 的 層疊 關(guān)系。
    在 CSS 中 盒 模型 被 分為 兩種，
    第 一種 是 W3C 的 標(biāo)準(zhǔn) 模型，
    另一種 是 IE 的 傳統(tǒng) 模型，
    它們 相同之處 都是 對(duì) 元素 計(jì)算尺 寸 的 模型， 具體 說 就是 對(duì) 元素 的 width、 height、 padding 和 border 以及 元素 實(shí)際 尺寸 的 計(jì)算 關(guān)系， 不同 之處 是 兩者 的 計(jì)算 方法 不一致。
    1） W3C 的 標(biāo)準(zhǔn) 盒 模型。 外 盒尺 寸 計(jì)算（ 元素 空間 尺寸） element 空間 高度 ＝ 內(nèi)容 高度 ＋ 內(nèi) 距 ＋ 邊框 ＋ 外 距 element 空間 寬度 ＝ 內(nèi)容 寬度 ＋ 內(nèi) 距 ＋ 邊框 ＋ 外 距 內(nèi) 盒尺 寸 計(jì)算（ 元素 大小） element 高度 ＝ 內(nèi)容 高度 ＋ 內(nèi) 距 ＋ 邊框 （height 為 內(nèi)容 高度） element 寬度 ＝ 內(nèi)容 寬度 ＋ 內(nèi) 距 ＋ 邊框 （width 為 內(nèi)容 寬度）
    2） IE 傳統(tǒng) 下 盒 模型（ IE 6 以下， 不 包含 IE 6 版本 或 QuirksMode 下 IE 5. 5+）。 外 盒尺 寸 計(jì)算（ 元素 空間 尺寸） element 空間 高度＝ 內(nèi)容 高度 ＋ 外 距 （height 包含 了 元素 內(nèi)容 寬度、 邊框、 內(nèi) 距） element 寬 間 寬度 ＝ 內(nèi)容 寬度 ＋ 外 距 （width 包含 了 元素 內(nèi)容 寬度、 邊框、 內(nèi) 距） 內(nèi) 盒尺 寸 計(jì)算（ 元素 大小） element 高度 ＝ 內(nèi)容 高度（ height 包含 了 元素 內(nèi)容 寬度、 邊框、 內(nèi) 距） element 寬度 ＝ 內(nèi)容 寬度（ width 包含 了 元素 內(nèi)容 寬度、 邊框、 內(nèi) 距）
    為了 解決 這種 問題， CSS3 增添 了 一個(gè) 盒 模型 屬性 box- sizing， 能夠 事先 定義 盒 模型 的 尺寸 解析 方式，
    box- sizing 的 屬性 值 主要 有 以下 三個(gè)：
    1· content- box： 默認(rèn)值， 讓 元素 維持 W3C 的 標(biāo)準(zhǔn) 盒 模型。 元素 的 寬度 和 高度（ width/ height） 等于 元素 邊框 寬度（ border） 加上 元素 內(nèi) 距（ padding） 加上 元素 內(nèi)容 寬度 或 高度（ content width/ height）， 也就是 element width/ height= border+ padding+ content width/ height。
    2· border- box： 此 值 會(huì) 重新 定義 CSS2. 1 中 盒 模型 組成 的 模式， 讓 元素 維持 IE 傳統(tǒng) 的 盒 模型（ IE 6 以下 版本 和 IE6 ～ 7 怪異 模式）。 元素 的 寬度 或 高度 等于 元素 內(nèi)容 的 寬度 或 高度。 從 盒 模型 介紹 可知， 這里 的 內(nèi)容 寬度 或 高度 包含 了 元素 的 border、 padding、 內(nèi)容 的 寬度 或 高度（ 此處 的 內(nèi)容 寬度 或 高度 ＝ 盒子 的 寬度 或 高度- 邊框- 內(nèi) 距）。
    3· inherit：此 值 使 元素 繼承 父 元素 的 盒 模型 模式。 box- sizing 屬性 主要 用來 控制 元素 的 盒 模型 的 解析 模式， 其 主要 目的 是 控制 元素 的 總 寬度。 在 W3C 規(guī)范 中， 元素 的 box- sizing 默認(rèn) 屬性 值 是 content- box 值， 如果不 顯 式 重置 box- sizing 屬性 值 為 border- box， 才能 明確 對(duì) 元素 設(shè)置 一個(gè) 總 寬度。 在這 種 情況 之下 會(huì)使 頁(yè)面 布局 更加 方便。
    。。。。。。
    七，　 CSS3內(nèi)容溢出屬性在CSS中的每一個(gè)元素都視為一個(gè)盒子， 這個(gè)盒子就是一個(gè)容器。 容器就有大小之分， 如果在樣式中指定盒子的寬度與高度， 可能某些內(nèi)容在盒子中就會(huì)容不下， 此時(shí) 就可以 使用 overflow 屬性 來 指定 如何 顯示 盒中 容納 不下 的 內(nèi)容。 overflow 屬性 是 CSS2. 1 規(guī)范 中的 特性， 而在 CSS3 中 增加 了 overflow- x 和 overflow- y 屬性。
    overflow- x主要是用來定義對(duì)水平方向內(nèi)容溢出的剪切， 而 overflow- y主要用來定義對(duì)垂直方向內(nèi)容溢出的剪切。
    和 overflow屬性參數(shù)一樣， overflow- x和overflow- y屬性值取不同的值所起的作用 不一樣。
    ·visible： 默認(rèn)值。 表示不剪切容器中的任何內(nèi)容、 不添加滾動(dòng)條， 元素將被剪切為包含對(duì)象的窗口大小， 而且clip屬性設(shè)置將失效。
    ·auto： 在需要時(shí)剪切內(nèi)容并添加滾動(dòng)條。 也就是說也就是說當(dāng)內(nèi)容超過容器的寬度或者高度時(shí)， 溢出的內(nèi)容將會(huì)隱藏在容器中， 并且會(huì)添加滾動(dòng)條， 用戶可以拖動(dòng)滾動(dòng)條查看隱藏在容器中的內(nèi)容。
    ·hidden： 內(nèi)容溢出容器時(shí)， 所有內(nèi)容都將隱藏， 而且不顯示滾動(dòng)條。
    ·scroll： 不管內(nèi)容有沒有溢出容器， overflow- x 都會(huì)顯示橫向的滾動(dòng)條， 而overflow- y 會(huì)顯示縱向的滾動(dòng)條。
    ·no- display： 當(dāng)內(nèi)容溢出容器時(shí)不顯示元素， 此時(shí)類似于元素添加了 display: none 聲明 一樣。
    ·no- content： 當(dāng)內(nèi)容溢出容器時(shí)不顯示內(nèi)容， 此時(shí)類似于添加了 visibility: hidden 聲明 一樣。
    。。。。。。
    八，　 CSS3 自由縮放屬性為了增強(qiáng)用戶體驗(yàn)， CSS3增加了很多新的屬性， 其中 resize 就是 一個(gè)重要的屬性， 也是一個(gè)非常實(shí)用的屬性， 它允許用戶通過拖動(dòng)的方式來修改元素的尺寸來改變?cè)氐?大小。 到目前為止， 可以使用 overflow屬性的任何容器元素。 在此之前， Web設(shè)計(jì)師為了要實(shí)現(xiàn)這樣的UI 效果， 需要使用大量的腳本代碼才能實(shí)現(xiàn)， 這樣費(fèi)時(shí)費(fèi)力， 效率極低。
    resize 屬性主要是用來改變?cè)爻叽绱笮〉模?其主要目的是增強(qiáng)用戶體驗(yàn)。 使用方法極其的簡(jiǎn)單。
    在 CSS3 中 resize 屬性 指 定的 值 分為 以下 幾種：
    ·none： 用戶不能拖動(dòng)元素修改尺寸大小。
    ·both： 用戶可以拖動(dòng)元素， 同時(shí)修改元素的寬度和高度。
    ·horizontal： 用戶可以拖動(dòng)元素， 僅可以修改元素的寬度， 但不能修改元素的高度。
    ·vertical： 用戶可以拖動(dòng)元素， 僅可以修改元素的高度， 但不能修改元素的寬度。
    ·inherit： 繼承父元素的 resize 屬性值。
    。。。。。。
    九，CSS3 外輪廓屬性外輪廓 outline 在頁(yè)面中呈現(xiàn)的效果和邊框border呈現(xiàn)的效果極其相似， 但和元素邊框 border完全不同， 外輪廓線不占用網(wǎng)頁(yè)布局空間， 不一定是矩形， 外輪廓是屬于一種 動(dòng)態(tài)樣式， 只有元素獲取到焦點(diǎn)或者被激活時(shí)呈現(xiàn)。
    ·outline- color： 定義輪廓線的顏色， 屬性值為CSS 中定義的顏色值。 在實(shí)際應(yīng)用中， 省略時(shí)此參數(shù)的默認(rèn)值為黑色。
    ·outline- style： 定義 輪廓線的樣式， 屬性為CSS中定義線的樣式。 在實(shí)際應(yīng)用中， 省略時(shí)此參數(shù)的默認(rèn)值為 none， 省略后不對(duì)該輪廓線進(jìn)行任何繪制。
    ·outline- width： 定義輪廓線的寬度， 屬性值可以為 一個(gè)寬度值。 在實(shí)際應(yīng)用中， 省略時(shí)此參數(shù)的默認(rèn)值為 medium， 表示繪制中等寬度的輪廓線。
    ·outline- offset： 定義輪廓邊框的偏移位置的數(shù)值， 此值可以取負(fù)數(shù)值。 當(dāng)此參數(shù)的值為正數(shù)值， 表示輪廓邊框向外偏離多少個(gè)像素； 當(dāng)此參數(shù)的值為負(fù)數(shù)值， 表示輪廓邊框向內(nèi)偏移多少個(gè)像素。
    ·inherit： 元素繼承父元素的 outline效果。
    輪廓和邊框的對(duì)比
    outline 和 border 的 對(duì)比 outline 屬性 創(chuàng)建 的 外輪 廓 線外 表上 和 border 極其 相似， 但 實(shí)際 上有 明顯 的 不同。
    ·border 屬于 盒 模型 的 一部分， 直接影響 元素 盒子 的 大小， 而 outline 創(chuàng)建 的 外 輪廓 線 是 畫 在 一個(gè) 框 的“ 上面”， 不會(huì) 影響 該 框 或 任何 其他 框 大小， 因此 outline 創(chuàng)建 的 輪廓 線 不會(huì) 影響 文檔 流， 也不 會(huì)破 壞 網(wǎng)頁(yè) 布局。
    ·outline 創(chuàng)建的輪廓線表面上和border 一樣， 可以創(chuàng)建輪廓線的顏色、 線型樣式、 線型粗細(xì)大小， 但 和 border 有 一點(diǎn) 完全 不一樣。 outline 創(chuàng)建 的 外 輪廓 線 在 元素 各 邊 都 一樣， 這 和 border 不一樣， 不能 像 border 邊框 一樣， 設(shè)置 outline- top 或 outline- left 之類。
    ·border 創(chuàng)建 的 元素 邊框 可以 單邊 設(shè)置， 而 outline 創(chuàng)建 的 外 輪廓 線 始終 是 閉合 的。
    ·outline 創(chuàng)建 的 外 輪廓 線 可能 是非 矩形 的， 如果 元素 是 多 行， 外 輪廓 線 就 至少 是 能夠 包含 該 元素 所有 框 的 外 輪廓。 可 border 不一樣， 他將 使用 一個(gè) 邊框 包括 整個(gè) 元素。
    ·border 僅可以設(shè)置元素的邊框， 只能向外擴(kuò)展， 而outline創(chuàng)建的外輪廓線， 可以通過 outline- offset 的值， 向元素外部（ outline- offset 值 為 正值） 或向元素內(nèi)部（ outline- offset 值 為 負(fù)值） 創(chuàng)建封閉的輪廓。
    。。。。。。
    十，　 CSS3伸縮布局盒模型
    早期的布局主要依賴于表格， 從 CSS2. 1中有關(guān)于布局的機(jī)制有所改變， 但還是并不多。 開發(fā)者通常不愿意使用絕對(duì)定位， 因?yàn)樘混`活； 浮動(dòng) 定位 常用于頁(yè)面的 布局， 但 對(duì)于全頁(yè)多列布局來說， 它總是存在一些小毛病， 功能上也有很多限制。 CSS3 中引入了許多的布局機(jī)制， 使構(gòu)建一個(gè)多列布局變得更加輕松， 同時(shí)， CSS2. 1 規(guī)則是比較難實(shí)現(xiàn)的一些 復(fù)雜布局表現(xiàn)， 如今也變得更加容易。
28. 彈性盒模型 　Flexbox模型基礎(chǔ)知識(shí)CSS3 引入 一種新的布局模式—— Flexbox 布局， 即伸縮布局盒（ Flexible Box）模型， 用來提供 一個(gè)更加有效的方式制定、 調(diào)整和分布一個(gè)容器里的項(xiàng)目布局， 即使它們的大小是未知或者動(dòng)態(tài)的， 這里簡(jiǎn)稱 Flex。
    CSS 中的布局模式
    談到布局， CSS2. 1 中 定義 了四種布局模式，由一個(gè)盒與其 弟、 祖先盒的關(guān)系決定其尺寸與位置的算法。
    ·塊布局： 呈現(xiàn)文檔的布局模式。
    ·行內(nèi)布局： 呈現(xiàn)文本的布局模式。
    ·表格布局： 用格子呈現(xiàn)2D數(shù)據(jù)的布局模式。
    ·定位布局： 能夠直接地定位元素的布局模式， 定位元素基本與其他元素沒有任何關(guān)系。
    CSS3 引入的布局模式 Flexbox 布局， 主要思想是讓容器有能力讓其子項(xiàng)目能夠改變其寬度、 高度（ 甚至 順序）， 以最佳方式填充可用空間（ 主要是為了適應(yīng)所有類型的顯示設(shè)備和屏幕大小）。 Flex容器會(huì)使子項(xiàng)目（ 伸縮 項(xiàng)目）擴(kuò)展來填滿可用空間， 或縮小它們以防止溢出容器。
    最重要的是， Flexbox布局方向不可預(yù)知， 不像常規(guī)的布局（ 塊就是從上到下， 內(nèi)聯(lián)就 從左到右）， 而那些常規(guī)的適合頁(yè)面布局， 但對(duì)于支持大型或者復(fù)雜的應(yīng)用程序（ 特別是涉及取向改變、縮放 和收縮等） 就缺乏靈活性。
    ：Flexbox 模型的功能
    Flexbox 布局對(duì)于設(shè)計(jì)比較復(fù)雜的頁(yè)面非常有用。 可以輕松地實(shí)現(xiàn)屏幕和瀏覽器窗口大小發(fā)生變化時(shí)保持元素的相對(duì)位置和大小不變。 同時(shí)減少了依賴于 浮動(dòng) 布局 實(shí)現(xiàn) 元素 位置 的 定義 以及 重置 元素的大小。 Flexbox 布局在定義伸縮項(xiàng)目大小時(shí) 伸縮容器會(huì)預(yù)留一些可用空間， 可以調(diào)節(jié)伸縮項(xiàng)目的相對(duì)大小和位置。 例如， 可以確保伸縮容器中的多余空間平均分配多個(gè)伸縮項(xiàng)目。 當(dāng)然， 如果 伸縮容器沒有足夠大的空間放置伸縮項(xiàng)目時(shí)， 瀏覽器會(huì)根據(jù) 一定的比例減少伸縮項(xiàng)目的大小， 使其不溢出伸縮容器。 綜合而言， Flexbox 布局功能主要具有以下幾點(diǎn)：
    1· 屏幕和瀏覽器窗口大小發(fā)生改變也可以靈活調(diào)整布局。
    2· 指定伸縮項(xiàng)目沿著主軸或側(cè)軸按比例分配額外空間（ 伸縮 容器 額外 空間）， 從而調(diào)整伸縮項(xiàng)目的大小。
    3· 指定伸縮項(xiàng)目沿著主軸或側(cè)軸將伸縮容器額外空間， 分配到伸縮項(xiàng)目之前、 之后或之間。
    4· 指定如何將垂直于元素布局軸的額外空間分布到該元素的周圍。
    5· 控制元素在頁(yè)面上的布局方向。
    6· 按照不同于文檔對(duì)象模型（ DOM） 所指定排序方式對(duì)屏幕上的元素重新排序。 也就是說可以在瀏覽器渲染中不按照文檔流先后順序重排伸縮項(xiàng)目順序。
    ：Flexbox 模型 中的術(shù)語(yǔ)
    Flexbox 模型中的術(shù)語(yǔ)和 CSS3 其他 屬性不一樣， Flexbox 并不是一個(gè)屬性， 而是一個(gè)模塊， 包括多個(gè) CSS3屬性， 涉及很多東西， 包括整個(gè)組屬性。 雖然現(xiàn)在對(duì)Flexbox有 一定的了解， 如果想 更好地使用 Flexbox， 新的術(shù)語(yǔ)和概念可能是一個(gè)障礙， 所以首先了解基本概念。
29. 主軸和側(cè)軸在 Flexbox 模型中與布局計(jì)算偏向使用書寫模式方向的塊布局與行內(nèi)布局不同， 伸縮 布局 偏向 使用 伸縮 流的 方向。一個(gè) row伸縮容器中各種方向與大小術(shù)語(yǔ)
    ·主軸、主軸方向： 用戶代理沿著一個(gè)伸縮容的主軸配置伸縮項(xiàng)目， 主軸是主軸方向的延伸。 伸縮容器的主軸， 伸縮項(xiàng)目主要沿著這條軸進(jìn)行布局。 小心， 它不一定是水平的， 這主要取決于 justify- content 屬性。 如果 其 取值 為 column， 主軸的方向?yàn)榭v向的。
    ·主軸起點(diǎn)、主軸終點(diǎn)： 伸縮項(xiàng)目的配置從容器的主軸起點(diǎn)邊開始， 往主軸終點(diǎn)邊結(jié)束。 也就是說， 伸縮項(xiàng)目放置在伸縮容器內(nèi)從主軸起點(diǎn)（ main- start） 向主軸終點(diǎn)（ main- end）方向。
    ·主軸長(zhǎng)度、主軸長(zhǎng)度屬性： 伸縮項(xiàng)目的在主軸方向的寬度或高度就是項(xiàng)目的主軸長(zhǎng)度， 伸縮項(xiàng)目的主軸長(zhǎng)度屬性是 width 或 height 屬性， 由哪一個(gè)對(duì)著主軸方向決定。
    ·側(cè)軸、側(cè)軸方向： 與主軸垂直的軸稱做側(cè)軸， 側(cè)軸是側(cè)軸方向的延伸。 主要取決于主軸方向。
    ·側(cè)軸起點(diǎn)、側(cè)軸終點(diǎn)： 填滿項(xiàng)目的伸縮行的配置配置從容器的側(cè)軸起點(diǎn)邊開始， 往側(cè)軸終點(diǎn)邊結(jié)束。
    ·側(cè)軸長(zhǎng)度、 側(cè)軸長(zhǎng)度屬性： 伸縮項(xiàng)目的在側(cè)軸方向的寬度或高度就是項(xiàng)目的側(cè)軸長(zhǎng)度， 伸縮項(xiàng)目的側(cè)軸長(zhǎng)度屬性是 width 或 height 屬性， 由 一個(gè) 對(duì)著 側(cè) 軸 方向 決定。
30. 伸縮容器和伸縮項(xiàng)目通過 display 屬性顯式地給 一個(gè)元素 設(shè)置為 flex或者inline- flex， 這個(gè)容器就是一個(gè)伸縮容器。 伸縮容器會(huì)為其內(nèi)容創(chuàng)立新的伸縮 格式化上下文， 其中設(shè)置為 flex 的容器 被 渲染為 一個(gè)塊級(jí)元素， 而設(shè)置 為inline- flex 的容器則渲染 為 一個(gè)行內(nèi)元素。 若 元素 display 的 指定 值 是 inline- flex 且元素 是一 個(gè)浮動(dòng)或絕對(duì)定位元素， 則 display 的計(jì)算值是flex。 一個(gè)伸縮容器的內(nèi)容具有零個(gè)以上的伸縮項(xiàng)目—— 伸縮容器的每個(gè)子元素（ 除了 需要 盒 修復(fù) 的 元素 之外） 都會(huì)成為 一個(gè)伸縮項(xiàng)目， 且用戶代理會(huì)將任何直接在伸縮容器里的連續(xù)文字塊包起來 成為 匿名伸縮項(xiàng)目。
31. 伸縮容器的屬性Flexbox伸縮布局中伸縮容器和伸縮項(xiàng)目是伸縮布局模塊中的重要部分， 其中每一部分都具有各自的屬性。 伸縮容器的屬性包括以下幾個(gè)：
    1） 伸縮流方向。 是指伸縮容器的主軸方向， 其決定了伸縮項(xiàng)目放置在伸縮容器的方向。 伸縮流方向主要通過flex- direction屬性來設(shè)置， 其默認(rèn)值為row。 伸縮流方向和書寫模式有關(guān)系， 換句話說， 伸縮項(xiàng)目根據(jù)書寫模式的方向布局。
    2） 伸縮行換行。 伸縮項(xiàng)目在伸縮容器中有時(shí)候也會(huì)溢出伸縮容器。 與傳統(tǒng)的盒模型一樣， CSS允許使用overflow屬性來處理溢出內(nèi)容的顯示方式。 在伸縮容器中有一個(gè)伸縮換行屬性， 主要用來 設(shè)置伸縮容器的伸縮項(xiàng)目是單行顯示還是多行顯示， 以及決定側(cè)軸的方向。 使用此屬性來啟用溢出的伸縮容器的伸縮項(xiàng)目自動(dòng)換行到下一行以及控制流動(dòng)方向。 在伸縮容器屬性中， 主要通過 flex- wrap 屬性來設(shè)置伸縮項(xiàng)目是否換行， 默認(rèn)值為 nowrap。
    3） 伸縮方向與換行。 是 伸縮 流 方向 與 伸縮 換行 的 結(jié) 合物， 換句話說， 伸縮 方向 與 換行 屬性 flex- flow 同時(shí) 設(shè)定 了 伸縮 流 方向 flex- direction 和 伸縮 換行 flex- wrap 兩個(gè) 屬性， 簡(jiǎn)而言之 是 這 兩個(gè) 屬性 的 縮寫， 這 兩個(gè) 屬性 決定了 伸縮 容器 的 主軸 與 側(cè) 軸。
    4） 主軸對(duì)齊。 用來設(shè)置伸縮容器當(dāng)前行伸縮項(xiàng)目在主軸方向的對(duì)齊方式， 指定 如何 在 伸縮 項(xiàng)目 之間 分布 伸縮 容器 額外 空間。 當(dāng) 一 行上 的 所 伸縮 項(xiàng)目 不能 伸縮 或 可伸縮 但 已達(dá) 到 最大 長(zhǎng)度 時(shí)， 這一 屬性 才會(huì) 對(duì) 伸縮 容器 額外 空間 進(jìn)行 分配。 當(dāng) 伸縮 項(xiàng)目 溢出 某 一行 時(shí)， 這一 屬性 也會(huì) 在 項(xiàng)目 的 對(duì)齊 上 施加 一些 控制。
    5） 側(cè)軸對(duì)齊。 伸縮 項(xiàng)目 可以 在 伸縮 容器 當(dāng)前 行的 側(cè) 軸上 進(jìn)行 對(duì)齊， 這類 似于 主軸 對(duì)齊 方式， 只是 另一個(gè) 方向。 也就是說 側(cè) 軸 對(duì)齊 主要 用來 指定 伸縮 項(xiàng)目 在 伸縮 容器 中 如何 放置 和 對(duì)齊 的 方式。 換句話說， 用來 定義 伸縮 項(xiàng)目 在 伸縮 容器 的 當(dāng)前 行的 側(cè) 軸上 對(duì)齊 方式。
    6） 堆棧伸縮行。 用來 定義 伸縮 容器 中 伸縮 項(xiàng)目 行在 側(cè) 軸 的 對(duì)齊 方式， 類似于 側(cè) 軸 對(duì)齊， 只不過 這是 用來 控制 伸縮 項(xiàng)目 行在 布局 軸 的 堆放 方式。
32. 伸縮項(xiàng)目的屬性一個(gè)伸縮項(xiàng)目是一 個(gè)伸縮容器的子元素。 伸縮容器中的文本也被視為一個(gè) 伸縮項(xiàng)目。 伸縮 項(xiàng)目 中 內(nèi)容 與 普通 流 一樣。 比如說， 當(dāng) 一個(gè) 伸縮 項(xiàng)目 被 設(shè)置 為 浮動(dòng)， 依然 可以 在這 個(gè) 伸縮 項(xiàng)目 中 放置 一個(gè) 浮動(dòng) 元素。 伸縮 項(xiàng)目 都有 一個(gè) 主軸 長(zhǎng)度 和 一個(gè) 側(cè) 軸 長(zhǎng)度。 主軸 長(zhǎng)度 是 伸縮 項(xiàng)目 在 主 軸上 的 尺寸， 側(cè) 軸 長(zhǎng)度 是 伸縮 項(xiàng)目 在 側(cè) 軸上 的 尺寸。 或者說，一個(gè) 伸縮 項(xiàng)目 的 寬度 或 高 取決于 伸縮 容器 的 軸， 可能 就是 它的 主軸 長(zhǎng)度 或側(cè) 軸 長(zhǎng)度。 下面 的 幾個(gè) 屬性 可以 調(diào)整 伸縮 項(xiàng)目 的 行為：
    1） 顯示順序。 伸縮 容器 中的 伸縮 項(xiàng)目 默認(rèn) 顯示 順序 是 遵循 文檔 在 源 碼 中的 出現(xiàn) 的 先后 順序（ HTML 文檔 的 DOM 結(jié)構(gòu) 中的 先后 順序）。 可以 通過 伸縮 項(xiàng)目 的 顯示 順序 修改 伸縮 項(xiàng)目 在 頁(yè)面 中 顯示 順序， 也可以 通過 這個(gè) 屬性 對(duì) 伸縮 項(xiàng)目 進(jìn)行 排序 組合。
    2） 側(cè)軸對(duì)齊。 包括 兩種， 一種 是 align- items 屬性， 可以 用來 設(shè)置 伸縮 容器 中 包括 匿名 伸縮 項(xiàng)目 的 所有 項(xiàng)目 的 對(duì)齊 方式； 另一種 是 align- self 屬性， 主要 用來 在 單獨(dú) 的 伸縮 項(xiàng) 目上 覆 寫 默認(rèn) 的 對(duì)齊 方式。 對(duì)于 匿名 伸縮 項(xiàng)目， align- self 的 值 永遠(yuǎn) 與其 關(guān)聯(lián) 的 伸縮 容器 的 align- items 的 值 相同。
    3） 伸縮性。 定義 伸縮 項(xiàng)目 可改變 它們 的 寬度 或 高度 填補(bǔ) 可用 的 空間。 可以 將 伸縮 容器 的 額外 空間 分 發(fā)給 其 伸縮 項(xiàng)目（ 與 伸縮 項(xiàng) 目的 正 彈性 成正比） 或?qū)?它們 縮小 以防 止 伸縮 項(xiàng)目 溢出（ 與 伸縮 項(xiàng) 目的 負(fù) 彈性 成正比）。
33. 伸縮行伸縮項(xiàng)目 沿著 伸縮 容器 內(nèi) 的 一個(gè) 伸縮 行 定位。 伸縮 容器 可以 是 單行 的， 也可以 是 多 行的。 其 主 要由 flex- warp 屬性 決定。 單行 的 伸縮 容器 會(huì) 將其 所有 子 元素 在 單獨(dú) 的 一行 上進(jìn) 行 布局， 這種 情況 之下 有可能 導(dǎo)致 內(nèi)容 溢出 伸縮 容器； 多 行的 伸縮 窗口 會(huì) 將其 伸縮 項(xiàng)目 配置 在 多個(gè) 伸縮 行上， 這類 似于 文本 的 排列。 當(dāng) 文本 過寬 導(dǎo)致 一行 無(wú)法 容納 時(shí)， 內(nèi)容 會(huì) 斷開 并 移至 新的 一行。 當(dāng) 用戶 代理 創(chuàng)建 新的 伸縮 行 時(shí)， 這些 伸縮 行會(huì) 根據(jù) flex- wrap 屬性 沿著 側(cè) 軸 進(jìn)行 堆疊。 除非 伸縮 容器 本身 是 空的， 每一個(gè) 伸縮 行 至少 包含 一個(gè) 伸縮 項(xiàng)目。
    ：Flexbox 模型規(guī)范狀態(tài)
    Flexbox布局的語(yǔ)法規(guī)范經(jīng)過幾年發(fā)生了很大的變化，也給 Flexbox 的使用帶來一定的局限性， 因?yàn)檎Z(yǔ)法規(guī)范版本眾多， 瀏覽器支持不一致， 致使 Flexbox 布局使用不多。 Flexbox 語(yǔ)法規(guī)范主要經(jīng)歷 了以下階段。
    1） 2009 年 07 月 工作 草案（ display: box）
    2） 2011 年 03 月 工作 草案（ display: flexbox）
    3） 2011 年 11 月 工作 草案（ display: flexbox）
    4） 2012 年 03 月 工作 草案（ display: flexbox）
    5） 2012 年 06 月 工作 草案（ display: flex）
    6） 2012 年 09 月 候選 推薦（ display: flex）
    把 Flexbox 布局 語(yǔ)法 規(guī)范 主要 分成 三種。
    ·舊版本（ Old），2009年版本， 使用 display: box 或者display: inline- box。
    ·混合版本（ Hybrid），2011年版本，使用display: flexbox 或者display: inline- flexbox。
    ·最新版本（ Modern），使用display: flex或者display: inline- flex。
    ：如何辨別舊Flexbox和新Flexbox
    ·看到“ display: box”或者“ box-{}” 屬性， 說明 是 2009 年 版本 的 Flexbox。
    ·看到“ display: flexbox” 或者“ flex()”函數(shù)， 說明 是 2011 年 版本， 也稱 為 Flexbox 混合 版本。
    ·看到“ display: flex” 或者“ flex-{}”屬性， 說明 是 當(dāng)前 規(guī)范， 也就是 W3C 標(biāo)準(zhǔn) 規(guī)范 版本 的 Flexbox。
    ：伸縮容器設(shè)置display要改變?cè)氐哪Ｊ剑?需要使用display屬性， 如果在讓一個(gè)元素變成伸縮容器， 也離不開display屬性。
    屬性值主要有兩種。
    ·box： 設(shè)置為塊伸縮容器。
    ·inline- box： 設(shè)置為內(nèi)聯(lián)級(jí)伸縮容器。
    ：伸縮流方向 box- orient伸縮 流 方向 box- orient 屬性 主要用來創(chuàng)建主軸， 從而定義了伸縮項(xiàng)目在伸縮容器中的流動(dòng)布方向。 換句話說主要用來指定伸縮項(xiàng)目如何放置在伸縮容器的主軸上。
    伸縮流方向 box- orient主要適用于伸縮容器。 伸縮流方向主要是用來確定伸縮項(xiàng)目在伸縮容器中的流動(dòng)布局方向，該屬性主要有四個(gè)屬性值， 其取值說明如下：
    ·horizontal： 伸縮項(xiàng)目在伸縮容器中從左到右在一條不平線上排列顯示。
    ·vertical： 伸縮項(xiàng)目在伸縮容器中從上到下在一條垂直線上排列顯示。
    ·inline- axis： 伸縮項(xiàng)目沿著內(nèi)聯(lián)軸排列顯示。
    ·block- axis： 伸縮項(xiàng)目沿著塊軸排列顯示。
    伸縮流方向和文本書寫模式也有關(guān)系， 如果書寫模式是ltr， 表示排版本方向從左向右， 如果書寫模式是rtl表示排版方向從右向左排列。 伸縮流的取值為 horizontal 和 inline- axis 時(shí)， 確認(rèn)伸縮項(xiàng)目的 伸縮流方向和書寫模式的方向關(guān)連性非常的強(qiáng)。 可以說書寫模式直接影響了它們的排列方向。
    。。。。。。
    十一，　 CSS3 漸變，漸變是兩種或多種顏色之間的平滑過渡。
34. CSS3線性漸變?cè)诰€性漸變過程中， 顏色沿著一條直線過渡： 從左側(cè)到右側(cè)、 從右側(cè)到左側(cè)、 從頂部到底部、 從底部到頂部或沿任意軸。 如果使用過制作 Photoshop 等軟件， 對(duì)線性漸變并不會(huì) 陌生。 CSS3制作漸變效果， 其實(shí)和使用制作軟件中的漸變工具沒有什么差別。 首先指定一個(gè)漸變的方向、 起始顏色、 結(jié)束顏色。 具有這三個(gè) 數(shù)就可以制作 一個(gè)最簡(jiǎn)單、 最普通的漸變效果。 如果 制作一個(gè)復(fù)雜的多色漸變效果， 就需要在同一個(gè)漸變方向增添多個(gè)色 標(biāo)。 具備這些漸變參數(shù)（ 至少三個(gè)）， 各瀏覽器就會(huì)繪制與漸變線垂直的顏色結(jié)來填充整個(gè)容器。 瀏覽器渲染出來的效果就 類似于制作軟件設(shè)計(jì)出來的漸變圖像。
    ：CSS3線性漸變，(linear-gradient)
    1：顏色從頂部向底部漸變 簡(jiǎn)單的方法直接使用“ to top”關(guān)鍵詞， 表示第一顏色向第二顏色漸變。 實(shí)現(xiàn)類似于“ to top”效果還可以使用角度值“ 0deg”、“ 360deg” 和“- 360deg”。
    2：顏色從底部向頂部漸變 關(guān)鍵詞“ to bottom” 剛好 與“ to top” 相反， 從底部向頂部實(shí)現(xiàn)漸變效果。 也可以使用角度值“ 180deg” 和“- 180deg” 實(shí)現(xiàn)同等效果。
    3：顏色從左向右漸變“to left”關(guān)鍵詞實(shí)現(xiàn)了從左向右顏色漸變， 也可以通過角度值“ 90deg” 和“ 270deg”實(shí)現(xiàn)。
    4：顏色從右向左漸變 “to right” 正好與“ to left” 效果相反。 實(shí)現(xiàn)了顏色從右向左直線漸變， 也可以使用角度值“ 90deg” 和“- 270deg”。
    5：從右下角向左上角線性漸變 “to top left” 實(shí)現(xiàn)從右下角向左角線性漸變。
    6：從左下角到右上角線性漸變 “to top right” 關(guān)鍵詞實(shí)現(xiàn)左下角到右上角的線性漸變。
    7：從右上角到左下角線性漸變 “to bottom left” 關(guān)鍵詞實(shí)現(xiàn)了右上角向左下角直線漸變。
    8：從左上角向右下角線性漸變 “to bottom right” 關(guān)鍵詞實(shí)現(xiàn)了左上角向右下角直線漸變。
    CSS3 制作 漸變 按鈕
    Web頁(yè)面或者說Web程序應(yīng)用中， 按鈕是設(shè)計(jì)中的一個(gè)重要元素， 也是設(shè)計(jì)師非常重視的一個(gè)設(shè)計(jì)元素。 設(shè)計(jì)師借助Photoshop等軟件實(shí)現(xiàn)按鈕效果， 然后通過圖片的方式轉(zhuǎn)用到Web頁(yè)面中或者 Web應(yīng)用程序中。 這種方法安全、 兼容性較強(qiáng)， 實(shí)現(xiàn)方法也簡(jiǎn)單， 但適應(yīng)能力比較弱、 重用性、 可擴(kuò)展性、 維護(hù)性差。 例如， 修改一個(gè)按鈕的顏色， 必須先從制作軟件中修改好， 再次切 圖， 最后替換 Web頁(yè)面中的圖片。 CSS3 的漸變出現(xiàn)后， Web設(shè)計(jì)師可以擺脫P(yáng)hotoshop的束縛， 特別是在配合CSS3的陰影、 圓角和@font- face等屬性， 可以直接脫離制圖軟件， 直接使用CSS快速 設(shè)計(jì)各種精巧、靚麗、 細(xì)膩的按鈕（ 幾乎可以和設(shè)計(jì)軟件制作出來的效果一模一樣）。 通過CSS3屬性制作的按鈕與設(shè)計(jì)軟件制作的按鈕相比， 有以下幾大優(yōu)勢(shì)：
    ·靈活性、 可擴(kuò)展性強(qiáng)： 可以通過CSS3的屬性可以直接修改按鈕的大小、 背景等效 果。
    ·可以減少http請(qǐng)求， 提高頁(yè)面的加載性能。
    ·可以應(yīng)用到任何的HTML標(biāo)簽元素， 如 a、 input、 button、 span 和 div 等。 ·可以支持按鈕多種狀態(tài)效果， 比如當(dāng)前狀態(tài)、 懸停狀態(tài)和點(diǎn)擊狀態(tài)。
    ·完全兼容不支持 CSS3 的瀏覽器， 如果不兼容CSS3， 則顯示沒有漸變和陰影的普通效果。
    ：CSS3徑向漸變，(radial-gradient)
    CSS3徑向漸變是圓形或橢圓形漸變。 顏色不再沿著一條直線軸變化， 而是從一個(gè)起點(diǎn)朝所有方向混合。 但相對(duì)線 漸變要比徑向漸變復(fù)雜得多。
    CSS3 徑向漸變的屬性參數(shù)
    CSS3的徑向漸變相對(duì)于線性漸變要復(fù)雜得多， 屬性參數(shù)也繁多復(fù)雜。 CSS3徑向變中新舊語(yǔ)法中的屬性參數(shù)定義如下:
    1.< position>主要用來定義徑向漸變的圓心位置。 此值類似于CSS中background- position屬性， 用于確定元素漸變的中心位置。 如果這個(gè)參數(shù)省略了， 其默認(rèn)值為 center。 其值主要有以下幾種： ·<length>： 用長(zhǎng)度值指定徑向漸變圓心的橫坐標(biāo)或縱坐標(biāo)， 可以為負(fù)值。
    ·<percentage>： 用百分比指定徑向漸變圓心的橫坐標(biāo)或縱坐標(biāo)， 可以為負(fù)值。
    ·center： 設(shè)置中間為徑向漸變圓心的橫坐標(biāo)值或縱坐標(biāo)。
    ·top： 設(shè)置頂部為徑向漸變圓心的縱標(biāo)值。
    ·right： 設(shè)置右邊為徑向漸變圓心的橫坐標(biāo)值。
    ·bottom： 設(shè)置底部為徑向漸變圓心的縱標(biāo)值。
    ·left： 設(shè)置左邊為徑向漸圓心的橫坐標(biāo)值。
    2.< shape> 主要用來定義徑向漸變的形狀。 其主要包括兩個(gè)值circle 和ellipse：
    ·circle： 如果< size> 和< length> 大小相等， 徑向漸變是一 個(gè)圓形， 也就是用來指定圓形的徑向漸變。
    ·ellipse： 如果< size> 和< length> 大小不相等， 徑向漸變是一個(gè)橢圓形， 也就是用來指定橢圓形的徑向漸變。
    3.< size>用來確定徑向漸變的結(jié)束形狀大小。 如果省略， 其默認(rèn)值為 farthest- corner。 可以給其顯式地設(shè)置一些關(guān)鍵詞。
    ·closest- side： 指定徑向漸變的半徑長(zhǎng)度為從圓心到離圓心最近的邊。
    ·closest- corner： 指定徑向漸變的半徑長(zhǎng)度為從圓心到圓心 最近的角。
    ·farthest- side： 指定徑向漸變的半徑長(zhǎng)度為從圓心到離圓心最遠(yuǎn)的邊。
    ·farthest- corner： 指定徑向漸變的半徑長(zhǎng)度為從圓心到離圓心最遠(yuǎn)的角。 如果< shape>設(shè)置 為circle或者省略，< size> 可能顯式設(shè)置為< length>。 表示用長(zhǎng)度值指定徑向漸變的橫向或縱向直徑 長(zhǎng)度， 并根據(jù)橫向和縱向的直徑來確定徑向漸變的形狀是圓或者是橢圓， 不能為負(fù)值。
    4.< color- stop> 徑向漸變線上的停止顏色， 類似于線性漸變的< color- stop>， 漸變線從中心點(diǎn)向右擴(kuò)散。 其中0%表示漸變線的起始點(diǎn)， 100%表示漸變線的與漸變?nèi)萜飨嘟唤Y(jié)束的位置， 而且其 顏色停止可以定義一個(gè)負(fù)值。
    ：CSS3重復(fù)線性漸變
    可以使用重復(fù)線性漸變r(jià)epeating-linear-gradient 屬性代替線性漸變linear-gradient。 它們采取相同的值， 但色標(biāo)在兩個(gè)方向上都無(wú)限重復(fù)。 不過使用百分比設(shè)置色標(biāo)的位置沒有多大的意義， 但 使用像素和其他的單位重復(fù)線性漸變可以創(chuàng)建一些很酷的效果，
    ：CSS3重復(fù)徑向漸變
    以同樣的方式， 使用相關(guān)的屬性創(chuàng)建重復(fù)的徑向漸變， 其語(yǔ)法和radial- gradient 類似， 只是以一個(gè)徑向漸變?yōu)榛A(chǔ)進(jìn)行重復(fù)漸變，
    在CSS3中漸變特性主要包括
    線性漸變（ linear- gradient）、
    徑向漸變（ radial- gradient）、
    重復(fù)線性漸變（ repeating- linear- gradient）
    重復(fù)徑向漸變（ repeating- radial- gradient） 四種。其中線性漸變和重復(fù)線性漸變語(yǔ)法相同， 而徑向漸變和重復(fù)徑向漸變的語(yǔ)法相同。
    從本質(zhì)上說， 漸變就是背景屬性中的background-image， 瀏覽器直接將漸變生成圖片， 可以直接使用 CSS 背景屬性來控制它們。
    。。。。。。
    十二，CSS3變形
    CSS2. 1 中的頁(yè)面都是靜態(tài)的， 網(wǎng)頁(yè)設(shè)計(jì)師也習(xí)慣把它作為頁(yè)面效果的設(shè)計(jì)工具。 多年來， Web設(shè)計(jì)師依賴于圖片、 Flash或 JavaScript才能完成修改頁(yè)面的外觀。 CSS3將改變?cè)O(shè)計(jì)師這種思維，借助 CSS3可以輕松 傾斜、 縮放、 移動(dòng) 以及翻轉(zhuǎn)元素。
    2012年9月， W3C組織發(fā)布了CSS3變形工作草案。 允許CSS把元素轉(zhuǎn)變?yōu)?D或3D空間， 這個(gè)草案包括了CSS32D變形和CSS33D變形。 CSS3變形是一 些效果的集合， 比如 平移、 旋轉(zhuǎn)、 縮放 和 傾斜效果， 每個(gè)效果都稱為變形函數(shù)（ Transform Function）， 它們可以操控元素發(fā)生旋轉(zhuǎn)、 縮放、 平移 等 變化。 這些效果在之前都需要依賴圖片、 Flash或 JavaScript才能完成。 而使用純 CSS 來完成 這些變形無(wú)須加載這些額外的文件， 再一次提升了開發(fā)效率， 提高了頁(yè)面的執(zhí)行效率。
    CSS 變形屬性及函數(shù)
    CSS 變形允許動(dòng)態(tài)的控制元素， 可以在屏幕周圍移動(dòng)它們， 縮小或擴(kuò)大、 旋轉(zhuǎn)， 或結(jié)合所有這些產(chǎn)生復(fù)雜的動(dòng)畫效果。 通過CSS變形， 可以讓元素生成靜態(tài)視覺效果， 也可以很容易結(jié)合CSS3的 transition和動(dòng)畫的keyframe產(chǎn)生 一些動(dòng)畫效果：
    ·CSS3變形中具有 X/ Y可用的函數(shù)： translateX()、 translateY()、 scaleX()、 scaleY()、 skewX() 和 skewY()。
    ·CSS32D變形函數(shù)包括： translate()、 scale()、 rotate() 和 skew()。 translate()函數(shù)接受CSS的標(biāo)準(zhǔn)度量單位； scale()函數(shù)接受 一個(gè) 0 ～ 1 之間的十進(jìn)制值； rotate() 和 skew() 兩個(gè)函數(shù)都接受 一個(gè)徑向的度量單位值deg。 除了rotate()函數(shù)之外， 每個(gè)函數(shù)都接受X軸和Y軸的參數(shù)。 2D變形中還有一個(gè)矩陣matrix()函數(shù)， 包括6個(gè)參數(shù)。
    ·CSS3 3D變形函數(shù)包括： rotateX()、 rotateY()、 rotate3d()、 translateZ()、 translate3d()、 scaleZ() 和scale3d()。 3D變形中也包括一個(gè)矩陣matrix3d()函數(shù)， 包括16 個(gè)參數(shù)。
    CSS 變形屬性詳解
    transform屬性指一組轉(zhuǎn)換函數(shù)， transform-origin屬性指定元素的中心點(diǎn)在哪， 新增加了第三個(gè)數(shù)transform-origin-z， 控制元素三維空間中心點(diǎn)。 transform- style的值設(shè)置為 preserve- 3d， 建立 一個(gè)3D渲染環(huán)境。
    ：CSS3 2D變形
    在二維或三維空間， 元素可以被扭曲、 移位或旋轉(zhuǎn)。 只不過2D變形工作在X軸和Y軸， 也就是大家常說的水平軸和垂直軸； 而3D變形工作在X軸和Y軸之外， 還有一個(gè)Z 軸， 這些3D變換不僅可以 定義元素的長(zhǎng)度和寬度， 還有深度。 首先討論元素在2D平面如何變換， 然后在進(jìn)入3D變換的討論。 CSS3 2D變換讓W(xué)eb設(shè)計(jì)師有了更多的自由來裝飾和變形HTML組件， 同時(shí)有更多的功能裝飾文本 和更多的動(dòng)畫選項(xiàng)來裝飾div元素。
    2D 位移
    在這里 translate是一種方法， 將元素向指定的方向移動(dòng)， 類似于position中的relative。 可以簡(jiǎn)單理解為， 使用translate()函數(shù)可以把元素從原來的位置移動(dòng)， 而不影響在 X、 Y 軸上任何組件。
    translate() 函數(shù)可以取一個(gè)值tx，也可以取兩個(gè)值tx和 ty，
    ·tx：代表X軸（ 橫坐標(biāo)）移動(dòng)的向量長(zhǎng)度， 當(dāng)其值為正值時(shí)， 元素向X軸右方向移動(dòng)， 反之其值為負(fù)值時(shí)， 元素向X軸左方向移動(dòng)。
    ·ty：代表Y軸（ 縱坐標(biāo)） 移動(dòng)的向量長(zhǎng)度，當(dāng)其值為正值時(shí)， 元素向Y軸下方向移動(dòng)， 反之其值為負(fù)值時(shí)， 元素向Y軸上方向移動(dòng)。 如果ty沒有顯式設(shè)置時(shí)， 相當(dāng)于ty=0。
    結(jié)合起來， translate()函數(shù)移動(dòng)元素主要有以下三種移動(dòng)。
    ·水平移動(dòng)： 向右移動(dòng) translate( tx, 0) 和向左移動(dòng) translate(- tx, 0)。
    ·垂直移動(dòng)：向上移動(dòng) translate( 0,- ty) 和向下移動(dòng) translate( 0, ty)。
    ·對(duì)角移動(dòng)：右下角移動(dòng) translate( tx, ty)、右上角移動(dòng)translate( tx,- ty)、 左上角移動(dòng)translate(- tx,- ty) 和左下角移動(dòng)translate(- tx, ty)。
    如果要將對(duì)象沿著一個(gè)方向移動(dòng)， 如沿著水平軸或者縱軸移動(dòng)， 可以使用translate( tx, 0) 和translate( 0, ty)來實(shí)現(xiàn)。 其實(shí)在變形中還為單獨(dú)一個(gè)方向移動(dòng)對(duì)象提供了更簡(jiǎn)單的方法。
    ·translateX()：水平方向移動(dòng)一個(gè)對(duì)象。 通過給定一個(gè)X軸方向的數(shù)值指定對(duì)象沿水平軸方向的位移。簡(jiǎn)單點(diǎn)說，對(duì)象只向X軸進(jìn)行移動(dòng)， 如果值為正值， 對(duì)象向右移動(dòng)； 如果值為負(fù)值， 對(duì)象向左 移動(dòng)。
    ·translateY()：縱軸方向移動(dòng)一個(gè)對(duì)象。 通過給定一個(gè)Y軸方向的數(shù)值指定對(duì)象沿縱軸方向的位移。 簡(jiǎn)單點(diǎn)說，對(duì)象只向Y軸進(jìn)行移動(dòng)，如果值為正值，對(duì)象向下移動(dòng)； 如果值為負(fù)值，對(duì)象 向上 移動(dòng)。 這兩個(gè)函數(shù)和前面介紹的 translate()函數(shù)不同的是每個(gè)方法只接受一個(gè)值。
    ·transform: translate(- 100px, 0) 實(shí)際上 等于 transform: translateX(- 100px)。
    ·transform: translate( 0,- 100px) 實(shí)際上 等于 transform: translateY(- 100px)。
    2D縮放
    縮放函數(shù)scale()讓元素根據(jù)中心原點(diǎn)對(duì)對(duì)象進(jìn)行縮放， 默認(rèn)值為 1。 因此0. 01到 0. 99之間的任何值， 使一個(gè)元素縮?。?而任何大于或等于 1. 01的值， 讓元素顯得更大。
    縮放scale()函數(shù)和translate()函數(shù)的語(yǔ)法非常相似， 可以接受一個(gè)值， 也可以接受兩個(gè)值， 只有一個(gè)值時(shí)， 其第二個(gè)值默認(rèn)與第一個(gè)值相等。
    其 取值 簡(jiǎn)單 說明 如下：
    ·sx：指定橫向坐標(biāo)（ X 軸）方向的縮放向量， 如果值為0. 01 ～ 0. 99之間， 會(huì)讓對(duì)象在X 軸方向縮小， 如果值大于或等于1. 01， 對(duì)象在X 軸方向放大。
    ·sy：指定縱向坐標(biāo)（ Y 軸）方向的縮放量， 如果值為 0. 01 ～ 0. 99 之間， 會(huì)讓對(duì)象在Y軸方向縮小， 如果值大于或等于1. 01， 對(duì)象在Y 軸方向放大。
    ·scaleX()：相當(dāng)于 scale( sx, 1)。 表示元素只在X軸（ 水平 方向） 縮放元素， 默認(rèn)值是 1。
    ·scaleY()：相當(dāng)于 scale( 1, sy)。 表示元素只在Y軸（ 縱橫 方向） 縮放元素， 默認(rèn)值是 1。
    2D旋轉(zhuǎn)
    旋轉(zhuǎn)函數(shù)rotate()通過指定的角度參數(shù)對(duì)元素根據(jù)對(duì)象原點(diǎn)指定 一個(gè)2D旋轉(zhuǎn)。 主要在二維空間內(nèi)進(jìn)行操作，接受一個(gè)角度值， 用來指定旋轉(zhuǎn)的幅度。 如果這個(gè)值為正值， 元素相對(duì)原點(diǎn)中心順時(shí)針 旋轉(zhuǎn)； 如果這個(gè)值為負(fù)值， 元素相對(duì)原點(diǎn)中心逆時(shí)針旋轉(zhuǎn)。
    rotate() 函數(shù)只接受一個(gè)值a， 代表旋轉(zhuǎn)的角度值。 其取值可以是正的， 也可以是負(fù)的。
    ·取值為正值時(shí)， 元素默認(rèn)相對(duì)元素中心點(diǎn)順時(shí)針旋轉(zhuǎn)。
    ·取值為負(fù)值時(shí)， 元素默認(rèn)相對(duì)元素中心點(diǎn)逆時(shí)針旋轉(zhuǎn)。
    2D傾斜
    傾斜函數(shù)skew()能夠讓元素傾斜顯示， 可以將一個(gè)對(duì)象以其中心位置圍繞著X軸和Y軸 按照一定的角度傾斜。 與rotate()函數(shù)的旋轉(zhuǎn)不同， rotate()函數(shù)只是旋轉(zhuǎn)， 而不會(huì)改變?cè)氐男螤睢?skew() 函數(shù) 不會(huì)旋轉(zhuǎn)， 而只會(huì)改變?cè)氐男螤睢?br/>·ax： 指定元素水平方向（ X 軸 方向） 傾斜的角度。
    ·ay： 指定元素垂直方向（ Y 軸 方向） 傾斜的角度。
    skew() 函數(shù)和CSS3變形中的 translate()、 scale()函數(shù)一樣， 除了可以使用 skew( tx, ty)函數(shù)讓元素相于元素中心為原點(diǎn)在X軸和Y軸傾斜之外， 還可以使用使用 skewX() 和 skewY() 函數(shù)讓元素只在 水平或垂直方向傾斜。
    ·skewX()：相當(dāng)于skew( ax, 0) 和 skew( ax)。按給定的角度沿X軸指定一個(gè)傾斜變形。 skewX()使元素以其中心為基點(diǎn)， 并在水平方向（ X 軸）進(jìn)行傾斜變形。
    ·skewY()：相當(dāng)于skew( 0, ay)。按給定的角度沿Y軸指定一個(gè)傾斜變形。 skewY()用來設(shè)置元素以其中心為基點(diǎn)并按給定的角度在垂直方向（ Y 軸） 傾斜變形。
    在默認(rèn)情況下，skew()函數(shù)都是以元素的原中心點(diǎn)對(duì)元素進(jìn)行傾斜變形，但是同樣可以根據(jù) transform- origin 屬性， 重新設(shè)置元素基點(diǎn)對(duì)元素進(jìn)行傾斜變形。另外，skew()函數(shù)和制圖軟件中的變形 工具所起作用類似，
    2D矩陣
    CSS3中Transform讓操作變形變得很簡(jiǎn)單， 如位移函數(shù)translate()、 縮放函數(shù)scale()、 旋轉(zhuǎn)函數(shù)rotate() 和傾斜函數(shù)skew()。 這幾個(gè)函數(shù)很簡(jiǎn)單， 也很方便， 但是變形中的矩陣函數(shù)matrix()不常用。 當(dāng)然， Web 設(shè)計(jì)師可以使用 rotate()、 skew()、 scale() 和 translate() 函數(shù)來滿足它們的變形需要， 那為什么要使用矩陣matrix() 呢？ 在CSS3中的變形函數(shù)都可以使用matrix()函數(shù)來代替。
    ：CSS3 3D變形
    使用二維變形能夠改變?cè)卦谒胶痛怪陛S線， 然而還有一個(gè)軸沿著它， 可以改變?cè)亍?使用三維變形， 可以改變?cè)卦赯 軸位置。 三維變換使用基于二維變換的相同屬性， 如果熟悉二維變換會(huì) 發(fā)現(xiàn)， 3D變形的功能和2D變換的功能類似。 CSS3中的3D變換主要包括以下幾種功能函數(shù)：
    ·3D 位移： 包括 translateZ() 和 translate3d() 兩個(gè)功能函數(shù)。
    ·3D 旋轉(zhuǎn)： 包括 rotateX()、 rotateY()、 rotateZ() 和 rotate3d() 四個(gè)功能函數(shù)。
    ·3D 縮放： 包括 scaleZ() 和 scale3d() 兩個(gè)功能函數(shù)。
    ·3D 矩陣： 和 2D 變形一樣， 也有 一個(gè) 3D矩陣功能函數(shù) matrix3d()。
    CSS3中3D 位移
    主要包括兩種函數(shù) translateZ() 和 translate3d()。
35. translate3d()函數(shù)的語(yǔ)法translate3d()函數(shù)使一個(gè)元素在三維空間移動(dòng)。 這種變形的特點(diǎn)是， 使用三維向量的坐標(biāo)定義元素在每個(gè)方向移動(dòng)多少。
    translate3d( tx, ty, tz)
    其屬性值取值說明如下：
    ·tx：代表橫向坐標(biāo)位移向量的長(zhǎng)度；
    ·ty：代表縱向坐標(biāo)位移向量的長(zhǎng)度；
    ·tz：代表Z軸位移向量的長(zhǎng)度。 此值不能是一個(gè)百分比值， 如果取值為百分比值， 將會(huì)認(rèn)為無(wú)效值。
36. translateZ()函數(shù)，功能是讓元素在3D空間沿Z軸進(jìn)行位移，
    translate( t)
    取值t指的是Z軸的向量位移長(zhǎng)度。使用 translateZ()函數(shù)可以讓元素在Z 軸進(jìn)行位移，當(dāng)其值為負(fù)值時(shí)，元素在Z 軸越移越 遠(yuǎn)，導(dǎo)致元素變得較小。反之，當(dāng)其值為正值時(shí)，元素在Z軸越移越近， 導(dǎo)致 元素變得較大。
    translateZ() 函數(shù)在實(shí)際使用中等同于translate3d( 0, 0, tz)。僅從視覺效果上看， translateZ() 和 translate3d( 0, 0, tz) 函數(shù)功能非常類似于二維空間的 scale() 縮放 函數(shù)， 但實(shí)際上完全不同。 translateZ() 和 translate3d( 0, 0, tz) 變形是發(fā)生在Z軸上， 而不是X軸和Y軸。 當(dāng)使用3D變形， 能夠在Z軸上移動(dòng)一個(gè)元素確實(shí)有很大的好處， 比如說在創(chuàng)建一個(gè)3D立方體的盒子之時(shí)。
    CSS3中3D 縮放
    scaleZ() 和 scale3d() 函數(shù)單獨(dú)使用時(shí)沒有任何效果， 需要配合其他的變形函數(shù)一起使用才會(huì)有效果。
    CSS3 3D變形中的縮放主要有scaleZ()和scale3d()兩種函數(shù)， 當(dāng)scale3d()中X軸和Y軸同時(shí)為1， 即scale3d( 1, 1, sz)，其效果等同于scaleZ( sz)。
37. scaleZ()3D縮放函數(shù)， 可以讓元素在Z軸上按比例縮放。 默認(rèn)值為1， 當(dāng)值大于1 時(shí)， 元素放大， 小于1大于0. 01時(shí)， 元素縮小。
    scale3d( sx, sy, sz)
    sx： 橫向縮放比例
    sy： 縱向縮放比例
    sz： Z軸縮放比例。
    CSS3中 3D 旋轉(zhuǎn)
    在三維變形中， 可以讓元素在任何軸旋轉(zhuǎn)。 為此， CSS3新增三個(gè)旋轉(zhuǎn)函數(shù) rotateX()、 rotateY() 和 rotateZ()。
    在 三維空間 里， 使用 rotateX()、 rotateY() 和 rotateZ() 函數(shù) 讓 一個(gè) 元素 圍繞 X、 Y、 Z 軸 旋轉(zhuǎn)， 其 基本 語(yǔ)法 如下：
    rotateX( a)
    rotateY( a)
    rotateZ( a)
    其中 a 指的是一 個(gè)旋轉(zhuǎn)角度值， 其值可以是正值也可以是負(fù)值。 如果值為正值， 元素順時(shí)針旋轉(zhuǎn)； 反之， 值為負(fù)， 元素圍繞逆時(shí)針旋轉(zhuǎn)。
    rotateZ() 函數(shù) 指定 元素 圍繞 Z 軸 旋轉(zhuǎn)， 如果 僅 從 視覺 角度 上看， rotateZ() 函數(shù) 讓 元素 順時(shí)針 或 逆時(shí)針 旋轉(zhuǎn)， 并且 效果 和 rotate() 效果 等同， 但不 是在 2D 平面 旋轉(zhuǎn)。 在 三維空間 里， 除了 rotateX()、 rotateY() 和 rotateZ() 函數(shù) 可以 讓 一個(gè) 元素 在 三維空間 中 旋轉(zhuǎn) 之外， 還有 一個(gè) 屬性 函數(shù) rotate3d()。 在 3D 空間， 旋轉(zhuǎn) 有 三個(gè) 角度 來 描述 一個(gè) 轉(zhuǎn)動(dòng) 軸。 軸 的 旋轉(zhuǎn) 是由 一個(gè)[ x, y, z] 向量 并經(jīng) 過 元素 原點(diǎn)。 其 基本 語(yǔ)法 如下：
    rotate3d( x, y, z, a) rotate3d() 中 取值 說明。
    ·x： 0 ～ 1 的 數(shù)值， 用來 描述 元素 圍繞 X 軸 旋轉(zhuǎn) 的 矢量 值。
    ·y： 0 ～ 1 的 數(shù)值， 用來 描述 元素 圍繞 Y 軸 旋轉(zhuǎn) 的 矢量 值。
    ·z： 0 ～ 1 的 數(shù)值， 用來 描述 元素 圍繞 Z 軸 旋轉(zhuǎn) 的矢量 值。
    ·a： 角度 值， 用來 指定 元素 在 3D 空間 旋轉(zhuǎn) 的 角度， 如果 其 值 為 正值， 元素 順時(shí)針 旋轉(zhuǎn)， 反之 元素 逆時(shí)針 旋轉(zhuǎn)。 當(dāng) x、 y、 z 三個(gè) 值 同時(shí) 為 0 時(shí)， 元素 在 3D 空間 不做 任何 旋轉(zhuǎn)。 當(dāng) x、 y、 z 取 不同 值 時(shí)， 和 前面 介紹 的 三個(gè) 旋轉(zhuǎn) 函數(shù) 功能 等同。
    ·rotateX( a) 函數(shù) 功能 等 同于 rotate3d( 1, 0, 0, a)。
    ·rotateY( a) 函數(shù) 功能 等 同于 rotate3d( 0, 1, 0, a)。
    ·rotateZ( a) 函數(shù) 功能 等 同于 rotate3d( 0, 0, 1, a)。
    。。。。。。
    十三，CSS3 過渡，多年來， Web前端開發(fā)人員一直在尋求通過HTML和CSS實(shí)現(xiàn)一些動(dòng)畫交互效果， 而不再使用JavaScript 或Flash。 現(xiàn)在他們的愿望實(shí)現(xiàn)了。 CSS3除了給我們帶來前面介紹的一些 特殊功能模塊之外， 還為Web設(shè)計(jì)師添加了 一些動(dòng)畫功能模塊。 可以通過: hover、: focus、: active、: checked 或者JavaScript 觸發(fā)一個(gè)元素， 這樣， 外觀變化會(huì)顯得更細(xì)膩， 而不會(huì)讓人感覺“ 一觸即發(fā)”。 例如 懸浮 修改 鏈接色， 在 CSS2. 1 中鼠標(biāo)懸浮時(shí)， 立刻從一個(gè)顏色變成另一個(gè)顏色。 而在CSS3 中使用過渡功能， 鼠標(biāo)懸浮時(shí)， 顏色在一定的時(shí)間內(nèi)， 從一個(gè)顏色過渡到另一個(gè) 顏色， 給用戶更好、 更細(xì)膩的體驗(yàn)。
    CSS3的過渡功能像是一種黃油， 通過一些CSS的簡(jiǎn)單動(dòng)作觸發(fā)樣式平滑過渡。 W3C標(biāo)準(zhǔn)中描述的transition功能很簡(jiǎn)單： CSS3的transition允許CSS的屬性值在一定的時(shí)間區(qū)間內(nèi)平滑地過渡。這種 效果可以在鼠標(biāo)單擊、 獲得焦點(diǎn)、 被點(diǎn)擊或?qū)υ厝魏胃淖冎杏|發(fā)， 并平滑地以動(dòng)畫效果改變CSS的屬性值。
    以往Web中的動(dòng)畫都是依賴于JavaScript和Flash實(shí)現(xiàn)， 但原生CSS過渡在客戶端上需要處理的資源少得多， 從而顯得更加平滑。 CSS3過渡與元素上的常規(guī)樣式一起聲明。 只要目標(biāo)屬性更改， 瀏覽器 就會(huì)應(yīng)用過渡。 除了使用JavaScript 觸發(fā)動(dòng)作外， 在CSS中也可以通過一些偽類來觸發(fā)， 如： hover、: focus、: active、: target 和: checked 等。 這很重要： 無(wú)須在 JavaScript 中編寫動(dòng)畫， 只需 要更改一個(gè)屬性值并依賴瀏覽器來執(zhí)行所有重要工作。 以下 是 使用 CSS 創(chuàng)建 簡(jiǎn)單 過渡 的 步驟：
    1） 在默認(rèn)樣式中聲明元素的初始狀態(tài)樣式。
    2） 聲明過渡元素最終狀態(tài)樣式， 比如懸浮狀態(tài)。
    3） 在默認(rèn)樣式中通過添加過渡函數(shù)， 添加一些不同的樣式。
    transition屬性是一個(gè)復(fù)合屬性， 出于簡(jiǎn)潔性和便于維護(hù)考慮， 過渡語(yǔ)法通常以簡(jiǎn)化的形式表達(dá)。
    transition 屬性主要包含四個(gè)屬性值：
    ·transition- property： 指定過渡或動(dòng)態(tài)模擬的CSS屬性。
    ·transition- duration： 指定完成過渡所需的時(shí)間。
    ·transition- timing- function： 指定過渡函數(shù)。
    ·transition- delay： 指定過渡開始出現(xiàn)的延遲時(shí)間。
    指定過渡函數(shù) transition- timing- function transition- timing- function 屬性指定某種指代過渡“ 緩動(dòng)函數(shù)” 的屬性。 此屬性可指定瀏覽器的過渡速度， 以及過渡期間的操作進(jìn)展情況， 可以將某個(gè) 值指定為預(yù)定義函數(shù)、 階梯函數(shù) 或者 三次貝塞爾曲線。
    到目前為止， 看到的 ease、 linear、 ease- in、 ease- out 和 ease- in- out 等曲線函數(shù)非常一般， 用于過渡動(dòng)畫中也不是十分精確。而現(xiàn)在制作一些動(dòng)畫需求越來越精確，需要定義一些更精確的 函數(shù)。
    CSS3 的transition 中， 定義三次貝塞爾曲線的語(yǔ)法如右所示： cubic-bezier( P0, P1, P2, P3)
    一個(gè)三次貝塞爾曲線由四個(gè)點(diǎn)控制曲線形狀。每個(gè)點(diǎn)由水平和垂直兩個(gè)值來確定， 也就是常說的由X和Y值確定。
    這些點(diǎn)的值是小數(shù)或者百分比， 不過很少看到使用百分比來設(shè)置一個(gè)三次貝塞爾曲線點(diǎn)。而且它們的值都是一個(gè)0 ～ 1 的小數(shù)。 不過有一點(diǎn)需要特別注意， 三次貝塞爾曲線中的P0 和 P 兩個(gè)點(diǎn)是無(wú)法 設(shè)置的， 因?yàn)樗鼈兛偸谴嬖贖TML中， 也就是說它們總會(huì)是（ 0， 0）和（ 1， 1）。
    注意，三次貝塞爾曲線中的每個(gè)點(diǎn)值只允許 0 ～ 1 的值。
    step() 函數(shù) step()函數(shù)用于把整個(gè)操作領(lǐng)域劃成同樣大小的間隔， 每個(gè)間隔都是都是相等的。 該函數(shù)還指定發(fā)生在開始或結(jié)束的時(shí)間間隔是否另外輸出百分比（ 換句話說， 如果輸出的百分比為 0% 表示輸入變化的初始點(diǎn)）。
    step() 函數(shù)非常獨(dú)特， 它允許在固定的間隔播放動(dòng)畫。 例如， 在 step() 函數(shù)圖上可以看出， 動(dòng)畫屬性比在 0% 處開始，漲到50%， 動(dòng)畫結(jié)束時(shí)， 屬性值達(dá)到100%（ 也就是結(jié)束狀態(tài)屬性）。 并且 在各個(gè) step() 函數(shù)中 每個(gè)步驟在過渡動(dòng)畫中不夠平滑
    step(< integer>[,[ start| end]]?) step() 函數(shù)主要包括兩個(gè)參數(shù)。
    ·第一個(gè)參數(shù)是一 個(gè)數(shù)值< integer>， 主要用來指定step()函數(shù)間隔的數(shù)量， 此值必須是一個(gè)大于0的正整數(shù)。
    ·第二個(gè)參數(shù)是可選的， 是start或end， 如果第二個(gè)參數(shù)忽略， 則默認(rèn)為end值。 其中step( 1, start)相當(dāng)于step- start； step( 1, end)相當(dāng)于step- end。
    偽元素觸發(fā)
    使用 transition 時(shí)， 常用鼠標(biāo)懸?。? hover） 來觸發(fā)過渡。
    為說明這與觸發(fā)過渡的實(shí)際事件毫無(wú)關(guān)聯(lián)， 也為強(qiáng)調(diào)狀態(tài)變化的重要性， 下面提供了 一些觸發(fā)過渡的其他方法。
38. 使用: active “:active”偽類表示用戶單擊某個(gè)元素并按住鼠標(biāo)按鈕時(shí)顯示的狀態(tài)。
39. 使用: focus“:focus”偽類通常會(huì)在元素接收鍵盤焦點(diǎn)時(shí)出現(xiàn)。文本輸入框元素上將發(fā)生過渡， 且該元素得到焦點(diǎn)時(shí)會(huì)執(zhí)行文本輸入框元素寬度和背景色過渡。
    此處作為一個(gè)邊點(diǎn)， 當(dāng)對(duì)“: hover”偽類應(yīng)用過渡時(shí)， 最好將“: focus”添加到選擇器堆棧。 這樣將能夠豐富鼠標(biāo)用戶和鍵盤用戶的體驗(yàn)。
40. 使用: checked “:checked”偽類在發(fā)生以下狀況時(shí)觸發(fā)過渡。 文本框選中時(shí)，
41. 媒體查詢觸發(fā) 觸發(fā)元素狀態(tài)變化的另一種方法是使用CSS3媒體查詢（ Media Queries）。
42. JavaScript 觸發(fā) 如果可以基于CSS的狀態(tài)更改觸發(fā)過渡， 自然可以通過 JavaScript做到這一點(diǎn)。
    隱式過渡 “隱式過渡”指的是 當(dāng) 一個(gè)屬性改變時(shí)引起另一個(gè)屬性到一個(gè)屬性的過渡。
    。。。。。。
    十四，CSS3 動(dòng)畫
    雖然transition在一定的時(shí)間內(nèi)可以實(shí)現(xiàn)元素的初始狀態(tài)在指定的時(shí)間范圍過渡最終狀態(tài)， 模擬一種過渡動(dòng)畫效果， 但它的功能是非常有限的。 因此， CSS3 新增了 一個(gè)動(dòng)畫屬性 animation。 與過渡 屬性 transition 屬性不同的是， CSS3 的 animation 屬性可以像Flash制作動(dòng)畫一樣， 通過關(guān)鍵幀控制動(dòng)畫的每一步， 實(shí)現(xiàn)更為復(fù)雜的動(dòng)畫效果。
    CSS3中通過animation實(shí)現(xiàn)動(dòng)畫和transition實(shí)現(xiàn)動(dòng)畫非常類似， 都是通過改變?cè)氐膶傩灾祦韺?shí)現(xiàn)動(dòng)畫效果的。
    它們的區(qū)別主要在于： 使用 transition屬性只能通過指定屬性的初始狀態(tài)和結(jié)束狀態(tài)， 然后在兩個(gè)狀態(tài)之間進(jìn)行平滑過渡的方式來實(shí)現(xiàn)動(dòng)畫。
    而animation實(shí)現(xiàn)動(dòng)畫效果主要由兩個(gè)部分組成：
    1） 通過類似Flash動(dòng)畫中的關(guān)鍵幀來聲明一個(gè)動(dòng)畫；
    2） 在animation屬性中調(diào)用關(guān)鍵幀聲明的動(dòng)畫，從而實(shí)現(xiàn)一個(gè)更為復(fù)雜的動(dòng)畫效果。
    CSS3 動(dòng)畫屬性animation和CSS3的transition屬性一樣是一個(gè)復(fù)合屬性，它包含了8個(gè)屬性：
    animation-name、主要用來指定一個(gè)關(guān)鍵幀動(dòng)畫的名字， 這個(gè)動(dòng)畫名必須對(duì)應(yīng)一個(gè)@keyframes規(guī)則。 CSS加載時(shí)會(huì)應(yīng)用animation-name指定的動(dòng)畫， 從而執(zhí)行動(dòng)畫。
    animation-duration、主要用來設(shè)置動(dòng)畫播放所需時(shí)間， 一般以秒為單位。
    animation-timing- function、 主要用來設(shè)置動(dòng)畫的播放方式， 與transition-timing-function類似。
    animation-delay、 主要用來指定動(dòng)畫開始時(shí)間， 一般以秒為單位。
    animation-iteration- count、 主要用來指定動(dòng)畫播放的循環(huán)次數(shù)。
    animation-direction、 主要用來指定動(dòng)畫的播放方向。
    animation-play- state，主要用來控制動(dòng)畫的播放狀態(tài)。
    animation-fill- mode，主要用來設(shè)置動(dòng)畫的時(shí)間外屬性。
    ：關(guān)鍵幀
    在CSS3中， 把@keyframes稱為關(guān)鍵幀，
    @keyframes 的作用
    transition制作一個(gè)簡(jiǎn)單的動(dòng)畫效果時(shí)， 包括了元素的初始屬性和最終屬性， 一個(gè)開始執(zhí)行動(dòng)作時(shí)間和一個(gè)延遲動(dòng)作時(shí)間以及一個(gè)動(dòng)作變換速率， 其實(shí)這些值都是一個(gè)中間值， 如果要控制得更細(xì)一些， 比如說 要第一個(gè)時(shí)間段執(zhí)行什么動(dòng)作， 第二個(gè)時(shí)間段執(zhí)行什么動(dòng)作（ 換到Flash制作動(dòng)畫中來說，就是第一幀要執(zhí)行什么動(dòng)作，第二幀執(zhí)行什么動(dòng)作）， 這樣用 transition 就很難實(shí)現(xiàn)了， 此時(shí)也需要一個(gè)“ 關(guān)鍵 幀”來控制。 在CSS3中就是通過@keyframes屬性來實(shí)現(xiàn)這樣的效果的。
    @keyframes的語(yǔ)法
    @keyframes具有其自己的語(yǔ)法規(guī)則， 命名是由@keyframes開頭， 后面緊跟著是“ 動(dòng)畫的名稱” 加上一對(duì)花括號(hào)“{...}”，括號(hào)中就不同時(shí)間段樣式規(guī)則，有點(diǎn)像CSS的樣式寫法。一個(gè)@ keyframes 中的樣式規(guī)則是由多個(gè)百分比構(gòu)成的， 如 0% ～100%， 可以在這個(gè)規(guī)則中創(chuàng)建更多個(gè)百分比， 分別給每個(gè)百分比中需要有動(dòng)畫效果的元素加上不同的屬性， 從而讓元素達(dá)到一種不斷變化的效果， 比如說移動(dòng)，再比如改變?cè)仡伾?、位置、大小和形狀等?不過有一點(diǎn)需要注意， 可以使用“ frome”“ to”代表一個(gè)動(dòng)畫是從哪開始，到哪結(jié)束，也就是說 from就相當(dāng)于0%，而to相當(dāng)于 100%。 值得說的是， 0%不能像別的屬性取值 一樣把百分比符號(hào)省略， 在這里必須加上百分符號(hào)（%）。如果沒有加上，這個(gè)@keyframes是無(wú)效的，不起任何作用。 因?yàn)锧keyframes的單位只接受百分 比值。@keyframes可以指定任何順序排列來決定animation動(dòng)畫變化的關(guān)鍵位置
    CSS中為元素應(yīng)用動(dòng)畫
    要在CSS中為元素應(yīng)用動(dòng)畫， 首先要?jiǎng)?chuàng)建一個(gè)已命名的動(dòng)畫，然后將它附加到該元素屬性聲明塊中的一個(gè)元素上。 動(dòng)畫本身并不執(zhí)行任何操作； 為了向元素應(yīng)用動(dòng)畫，需要將動(dòng)畫與元素關(guān)聯(lián)起來。 這個(gè)要?jiǎng)?chuàng)建的動(dòng)畫， 必須使用@keyframes來聲明（ 或者對(duì)于當(dāng)前的Webkit實(shí)現(xiàn)， 使用@-webkit-keyframes）， 后跟所選擇的名稱， 該名稱主要用于對(duì)動(dòng)畫的聲明作用， 然后指定關(guān)鍵幀。
    ：CSS3動(dòng)畫8個(gè)子屬性詳解
43. animation-name 調(diào)用動(dòng)畫
    animation-name屬性主要是用來調(diào)用動(dòng)畫，其調(diào)用的動(dòng)畫是通過@keyframes關(guān)鍵幀定義好的動(dòng)畫。 該屬性的使用語(yǔ)法如右所示： animation-name: none | IDENT[, none| DENT]*;
    animation-name 是用來定義一個(gè)動(dòng)畫的名稱， 其主要有兩個(gè)值。
    ·IDENT：是由@keyframes創(chuàng)建的動(dòng)畫名稱， 換句話說 此處的 IDENT需要和@keyframes中的IDENT 一致， 如果不一致將不能實(shí)現(xiàn)任何動(dòng)畫效果。
    ·none：為默認(rèn)值， 當(dāng)值為none 時(shí)， 將沒有任何動(dòng)畫效果， 其可以用于覆蓋任何動(dòng)畫。
44. animation-duration 設(shè)置動(dòng)畫播放時(shí)間
    animation-duration主要用來設(shè)置CSS3動(dòng)畫播放時(shí)間， 其基本語(yǔ)法如右所示： animation- duration: < time>[,< time>]*
    animation-duration和transition-duration使用方法類似，是用來指定元素播放動(dòng)畫所持續(xù)的時(shí)間，也就是完成從0% ～100% 一次動(dòng)畫所需時(shí)間， 取值< time> 為數(shù)值， 單位為秒， 其默認(rèn)值為 0， 這意味著動(dòng)畫周期為0， 也就是沒有動(dòng)畫效果。 如果值為負(fù)值會(huì)被視為0。
45. animation-timing-function 設(shè)置動(dòng)畫播放方式
    animation-timing-function屬性主要是用來設(shè)置動(dòng)畫播放方式， 其基本語(yǔ)法如右所示： animation- timing- function: ease | linear | ease- in | ease- out | ease- in- out
    animation-timing-function是指元素根據(jù)時(shí)間的推進(jìn)來改變屬性值的變換速率，說得簡(jiǎn)單點(diǎn)就是動(dòng)畫的播放方式。 他和transition中的transition-timing-function一樣， 具有以下幾種變換方式： ease、ease- in、ease-in-out、 ease-out、 linear和cubic-bezier。
46. animation-delay 設(shè)置動(dòng)畫開始播放的時(shí)間
    animation-delay屬性用來定義動(dòng)畫開始播放的時(shí)間、 是延遲還是提前等。 該屬性的基本語(yǔ)法右所示： animation- delay:< time>[,< time>]* 換句話說， animation- delay 屬性用于定義在瀏覽開始 執(zhí)行動(dòng)畫之前等待的時(shí)間。
47. animation-iteration-count 設(shè)置動(dòng)畫播放次數(shù)
    animation-iteration-count 屬性主要用來定義動(dòng)畫的播放次數(shù)。 其基本語(yǔ)法如右所示： animation-iteration-count: infinite | < number> [, infinite | < number>]* 此屬性主要用于定義動(dòng)畫播放 多少次， 其值通常為整數(shù)， 但也可以使用帶有小數(shù)的數(shù)字。 其默認(rèn)值 1， 這意味著動(dòng)畫將從開始到結(jié)束只播放一次。 如果取值為infinite， 動(dòng)畫將會(huì)無(wú)限次地播放。
48. animation-direction 設(shè)置動(dòng)畫播放方向
    animation-direction屬性主要用來設(shè)置動(dòng)畫播放方向， 其基本語(yǔ)法如右所示： animation- direction: normal | alternate [, normal | alternate]* animation- direction 是用來指定元素動(dòng)畫播放的 方向， 其主要有兩個(gè)值， 默認(rèn)值為 normal， 如果設(shè)置為normal時(shí)， 動(dòng)畫的每次循環(huán)都是向前播放； 另一個(gè)值是alternate，它的作用是，動(dòng)畫播放為偶數(shù)次則向前播放，為奇數(shù)次則向反方向播放。 例如一個(gè)彈跳動(dòng)畫中， 可以為落下的球提供關(guān)鍵幀， 然后將animation-direction取值為alternate來控制播放動(dòng)畫的每秒中反轉(zhuǎn)它。
49. animation-play-state 設(shè)置動(dòng)畫的播放狀態(tài)
    animation-play-state屬性主要用來控制元素動(dòng)畫的播放狀態(tài)， 其基本語(yǔ)法如右所示： animation-play-state: running | paused [, running | paused]* 主要有兩個(gè)值： running 和 paused。 其中 running為默認(rèn)值， 主要作用類似于音樂播放器， 可以通過paused將正在播放的動(dòng)畫停下來， 也可以通過running將暫停的動(dòng)畫重新播放， 這里的重新播放不一定是從元素動(dòng)畫的開始播放， 也可能是 從暫停的那個(gè)位置開始播放。 另外如果暫停了動(dòng)畫的播放， 元素的樣式將回到最原始設(shè)置狀態(tài)。
50. 設(shè)置動(dòng)畫時(shí)間外屬性 animation-fill-mode
    animation-fill-mode屬性定義在動(dòng)畫開始之前和結(jié)束之后發(fā)生的操作，其基本語(yǔ)法如右所示： animation-fill-mode: none | forwards | backwards | both 主要有四個(gè)值： none、forwards、 backwards和both。其默認(rèn)值為none，表示動(dòng)畫將按預(yù)期進(jìn)行和結(jié)束，在動(dòng)畫完成其最后一幀時(shí)，動(dòng)畫會(huì)反轉(zhuǎn)到初始幀處。當(dāng)其取值為forwards時(shí)，動(dòng)畫在結(jié)束后繼續(xù)應(yīng)用最后關(guān)鍵幀的位置。 當(dāng) 其取值為 backwards 時(shí)，會(huì)在向元素應(yīng)用動(dòng)畫樣式時(shí)迅速應(yīng)用動(dòng)畫的初始幀。當(dāng)其取值為both時(shí)，元素動(dòng)畫同時(shí)具有forwards和backwards效果。在默認(rèn)情況之下，動(dòng)畫不會(huì)影響它的關(guān)鍵幀之外的 屬性， 但使用animation-fill-mode屬性， 可以修改動(dòng)畫的默認(rèn)行為。簡(jiǎn)單地理解 就是告訴動(dòng)畫在第一個(gè)關(guān)鍵幀上等待動(dòng)畫開始， 或者在動(dòng)畫結(jié)束時(shí)停在最后一個(gè)關(guān)鍵幀上而不回到動(dòng)畫第一幀 上， 或者同時(shí)具有這兩個(gè)效果。
    。。。。。。
    十五，媒體特性與Responsive設(shè)計(jì)
    隨著科學(xué)技術(shù)不斷地向前發(fā)展，網(wǎng)頁(yè)的瀏覽終端越來越多樣化，用戶可以通過寬屏電視、臺(tái)式電腦、筆記本電腦、平板電腦和智能手機(jī)來訪問網(wǎng)站。盡管無(wú)法保證一個(gè)網(wǎng)站在不同屏幕尺寸和不同設(shè)備上 看起來一模一樣， 但至少要讓你的Web頁(yè)面能適配用戶的終端， 讓它更好地呈現(xiàn)在用戶面前。 使用CSS3中的MediaQuery模塊來讓一個(gè)頁(yè)面適應(yīng)不同的終端（ 或屏幕尺寸）， 從而讓頁(yè)面有一個(gè)更好 的用戶體驗(yàn)。
    媒體類型媒體類型（ Media Type） 在CSS2中是一個(gè)常見的屬性， 也是一個(gè)非常有用的屬性， 可以通過媒體類型對(duì)不同的設(shè)備指定不同的樣式。
    媒體類型引用方法在實(shí)際中媒體類型有近十種之多， 實(shí)際常用的也就那么幾種。 不過媒體類型的引用方法也有多種， 常見的媒體類型引用方法主要有：
    link標(biāo)簽、
    xml方式、
    @import
    CSS3新增的@media
51. link方法
    link方法引入媒體類型其實(shí)就是在< link>標(biāo)簽引用樣式的時(shí)候， 通過link標(biāo)簽中的media屬性來指定不同的媒體類型。 這種方式引入媒體類型時(shí)常跟著引用的樣式文件走， 如下所示：
    < link rel="stylesheet" type=" text/css" href="style.css" media="screen" /> < link rel=" stylesheet" type=" text/css" href=" print.css" media=" print" />
52. xml方式
    xml方式引用媒體類型和link引入媒體類型極其相似， 也是通過media屬性來指定。
    <? xml- stylesheet rel=" stylesheet" media=" screen" href=" style. css" ?>
53. @import方式
    @import是用來引用樣式文件方法之一， 同樣也可以用來引用媒體類型。@import引入媒體類型主要有兩種方式，
    一種：是在樣式中通過@import調(diào)用另一個(gè)樣式文件；
    另一種：是在< head></ head>標(biāo)簽中的< style></ style>中引入， 但這種使用方法在IE 6 和 IE 7 中都不被支持， 如樣式文件中調(diào)用另一個(gè)樣式文件時(shí)， 就可以指定對(duì)應(yīng)的媒體類型。 @import url( reset. css) screen; @import url( print. css) print; 在<head>中的<style>標(biāo)簽中引入媒體類型方法。 <head> <style type=" text/css"> @import url( style.css) all; </style> </head>
54. @media方式
    @media是CSS3中新引進(jìn)的一個(gè)特性， 稱為媒體查詢。 在頁(yè)面中也可以通過這個(gè)屬性來引入媒體類型。@media引入媒體類型和@import有點(diǎn)類似， 也具有兩種方式：
    1） 在樣式文件中引用媒體類型： @media screen { 選擇器{/ 你的樣式代碼寫在這里…/} }
    2） 使用@media引入媒體類型的方式是在<head> 標(biāo)簽中的<style>中引用。 <head> <style type=" text/css"> @media screen{ 選擇器{/ 你的 樣式 代碼 寫在 這里…/} } </ style> </ head>
    媒體特性
    媒體特性（Media Query）是CSS3對(duì)媒體類型（ Media Type） 的增強(qiáng)版， 其實(shí)可以將Media Query看成“ Media Type（ 判斷條件）+ CSS（ 符合條件的樣式規(guī)則）”。
    Media Query和CSS的屬性集合很相似， 主要區(qū)別在如下：
    ·Media Query 只接受單個(gè)的邏輯表達(dá)式作為其值， 或者沒有值。
    ·CSS屬性用于聲明如何表現(xiàn)頁(yè)面的信息； 而Media Query是一個(gè)用于判斷輸出設(shè)備是否滿足某種條件的表達(dá)式。
    ·Media Query 中的大部分接受 min/ max 前綴， 用來表達(dá)其邏輯關(guān)系， 表示應(yīng)用于大于等于或小于等于某個(gè)值的情況。
    ·CSS屬性要求必須有屬性值， Media Query 可以沒有值， 因?yàn)槠浔磉_(dá)式返回的只有真或假兩種。
    Media Query使用方法
    Media Query 能在不同的條件下使用不同的樣式， 使頁(yè)面在不同在終端設(shè)備下達(dá)到不同的渲染效果。 Media Query 有其自己的使用規(guī)則。 具體來說， Media Query 的使用方法如下。
    @media 媒體類型 and （媒體特性）{ 你的樣式} 使用 Media Query 時(shí)必須要使用@media開頭， 然后指定媒體類型（ 也可以稱為設(shè)備類型）， 隨后是指定媒體特性（ 也可以稱之為設(shè)備特性）。
    媒體特性的書寫方式和樣式的書寫方式非常相似， 主要分為兩個(gè)部分，
    第一個(gè)部分 指的是媒特性，
    第二個(gè)部分 為媒體特性 所指定的值， 而且這兩個(gè)部分之間使用冒號(hào)分隔。 例如： (max- width: 480px) 將其組合就類似于不同的 CSS集合。 但與CSS屬性不同的是， 媒體特性是通過min/ max 來 表示大于、 等于或小于作為邏輯判斷， 而不是使用小于（<） 和 大于（>） 這樣的符號(hào)來判斷。
55. 最大寬度 max-width “max-width” 是媒體特性中最常用的一個(gè)特性， 其意思是指媒體類型小于或等于指定的寬度時(shí)， 樣式生效，
56. 最小寬度 min-width min-width與max-width相反， 即媒體類型大于或等于指定寬度時(shí)， 樣式生效。
57. 多個(gè)媒體特性使用 Media Queries 可以使用關(guān)鍵詞“ and” 將多個(gè)媒體特性結(jié)合在一起。 也就是說， 一個(gè)Media Query中可以包含0到多個(gè)表達(dá)式， 表達(dá)式又可以包含0到多個(gè)關(guān)鍵字， 以及一種 媒體類型。
58. 設(shè)備屏幕的輸出寬度 Device Width 在智能設(shè)備上， 例如 iPhone、 iPad 等， 還可以根據(jù)屏幕尺寸來設(shè)置相應(yīng)的樣式（ 或者調(diào)用相應(yīng)的樣式文件）。 對(duì)于屏幕同樣可以使用 min/ max 對(duì)應(yīng)參數(shù)， 如min-device-width 或者 max-device-width。
59. not關(guān)鍵詞 關(guān)鍵詞not用來排除某種制定的媒體類型， 也就是排除符合表達(dá)式的設(shè)備。 換句話說， not關(guān)鍵詞表示對(duì)后面的表達(dá)式執(zhí)行取反操作。如下所示：
    @media not print and (max- width: 1200px){ 樣式 代碼} 代碼表示的是， 樣式代碼將被使用在除打印設(shè)備和屏幕寬度小于1200px的所有設(shè)備中。
60. only關(guān)鍵詞 only用來指定某種特定的媒體類型， 可以排除不支持媒體查詢的瀏覽器。 其實(shí)only很多時(shí)候是用來對(duì)不支持Media Query 卻支持 Media Type 的設(shè)備隱藏樣式表。 例如， 支持媒體特性 的設(shè)備正常調(diào)用樣式， 此時(shí)就當(dāng)only不存在；不支持媒體特性但支持媒體類型的設(shè)備， 這樣就不會(huì)讀樣式， 因?yàn)槠鋾?huì)先讀取only而不是screen； 不支持 Media Query 的瀏覽器， 不論是否支持 only， 樣式都不會(huì)被采用。
    ：Responsive(響應(yīng)式)布局概念
    隨著用戶訪問Web頁(yè)面終端多樣化， 比如說 iPad、 iPhone、 平板電腦、 臺(tái)式機(jī)以及筆記本等， 以前的設(shè)計(jì)目前再無(wú)法適應(yīng)這些多樣化的終端設(shè)備。 為了滿足用戶的需求， Ethan Marcotte 在A List Apart 發(fā)表了 一篇開創(chuàng)性的文章， 將三種已有的開發(fā)技術(shù)（ 彈性網(wǎng)格布局、彈性圖片、媒體和媒體查詢） 整合起來， 并將其命名為RWD（ Responsive Web Design， 響應(yīng)式設(shè)計(jì)）。
    什么是響應(yīng)式設(shè)計(jì)呢？
    維基百科是這樣描述的： Responsive設(shè)計(jì)為RWD， 是精心提供各種設(shè)備都能瀏覽網(wǎng)頁(yè)的一種設(shè)計(jì)方法， RWD能讓網(wǎng)頁(yè)在不同的設(shè)備中展現(xiàn)不同的設(shè)計(jì)風(fēng)格。 由此可見， RWD不是流體布局， 也不是 網(wǎng)格布局， 而是一種獨(dú)特的網(wǎng)頁(yè)設(shè)計(jì)方法。
    Responsive設(shè)計(jì)特點(diǎn)
    Responsive網(wǎng)頁(yè)設(shè)計(jì) 不但要考慮其元素布局的秩序， 還要做到“ 有求必應(yīng)”， 因此需要滿足三個(gè)條件。 Responsive設(shè)計(jì)之父 Ethan Marcotte是這樣描述這三個(gè)條件的。
    ·網(wǎng)站必須建立靈活的網(wǎng)格基礎(chǔ)；
    ·引用到網(wǎng)站的圖片必須是可伸縮的；
    ·不同的顯示風(fēng)格， 需要在 Media Query 上設(shè)置不同的樣式。
    缺少任何一個(gè)功能， 就不能稱為是合格的Responsive網(wǎng)頁(yè)設(shè)計(jì)。
    Responsive中的術(shù)語(yǔ)
    在響應(yīng)式設(shè)計(jì)中， 有一些其專有的術(shù)語(yǔ)， 而且理解這些術(shù)語(yǔ)對(duì)于幫助理解和學(xué)習(xí)響應(yīng)式設(shè)計(jì)至關(guān)重要。
61. 流體網(wǎng)格
    流體網(wǎng)格是一個(gè)簡(jiǎn)單的網(wǎng)格系統(tǒng)，這種網(wǎng)格設(shè)計(jì)參考了流體設(shè)計(jì)中的網(wǎng)格系統(tǒng)，將每個(gè)網(wǎng)格格子使用百分比單位來控制網(wǎng)格大小。這種網(wǎng)格系統(tǒng)最大的好處是讓網(wǎng)格大小隨時(shí)根據(jù)屏幕尺寸大小做出相 對(duì)應(yīng)的比例縮放。
62. 彈性圖片
    彈性圖片指的是不給圖片設(shè)置固定尺寸，而是根據(jù)流體網(wǎng)格進(jìn)行縮放， 用于適應(yīng)各種網(wǎng)格的尺寸。 而實(shí)現(xiàn)方法是比較簡(jiǎn)單， 一條代碼就能確定。img {max- width: 100%;}
63. 媒體查詢
    媒體查詢?cè)贑SS3中得到了強(qiáng)大的擴(kuò)展。 使用這個(gè)屬性可以讓設(shè)計(jì)根據(jù)用戶終端設(shè)備適配對(duì)應(yīng)的樣式。 這也是響應(yīng)式設(shè)計(jì)中最為關(guān)鍵的。 可以說， Responsive設(shè)計(jì)離開了 Medial Query 就失去了它 生存的意義。 簡(jiǎn)單地說，
    媒體查詢可以根據(jù)設(shè)備的尺寸， 查詢出適配的樣式。
    Responsive設(shè)計(jì)最關(guān)注的就是： 根據(jù)用戶的使用設(shè)備的當(dāng)前寬度， Web頁(yè)面將加載一個(gè)備用的樣式， 實(shí)現(xiàn)特定的頁(yè)面 風(fēng)格。
64. 屏幕分辨率
    屏幕分辨率指的是用戶使用的設(shè)備瀏覽Web頁(yè)面時(shí)的分辨率， 比如智能手機(jī)瀏覽器、 移動(dòng)電腦瀏覽器、 平板電腦瀏覽器和桌面瀏覽器。 Responsive設(shè)計(jì)利用Media Query屬性針對(duì)瀏覽器使用的 分辨率來適配對(duì)應(yīng)的CSS樣式。 因此屏幕分辨率在Responsive設(shè)計(jì)中是一個(gè)很重要的東西， 因?yàn)橹挥兄繵eb頁(yè)面要在哪種分辨率下顯示何種效果， 才能調(diào)用對(duì)應(yīng)的樣式。
65. 主要斷點(diǎn)
    主要斷點(diǎn)， 在Web開發(fā)中是一個(gè)新詞， 但其是 Responsive 設(shè)計(jì)中很重要的一部分。 簡(jiǎn)單的描述就是， 設(shè)備寬度的臨界點(diǎn)。 在 Media Query 中， 媒體特性 min-width 和 max- width 對(duì)應(yīng)的屬性值 就是響應(yīng)式設(shè)計(jì)中的斷點(diǎn)值。 簡(jiǎn)單點(diǎn)說， 就是使用主要斷點(diǎn)和次要斷點(diǎn)， 創(chuàng)建媒體查詢的條件。 而每個(gè)斷點(diǎn)會(huì)對(duì)應(yīng)調(diào)用一個(gè)樣式文件（ 或者樣式代碼）， 主要斷點(diǎn)加載樣式文件將直接影響Web的 效果。 除了主要斷點(diǎn)之外， 為了滿足更多效果， 還可以在這個(gè)基礎(chǔ)上添加次要斷點(diǎn)。 不過主要斷點(diǎn)和次要斷點(diǎn)增加之后， 需要維護(hù)的樣式也相應(yīng)地增加， 成本也相對(duì)應(yīng)地增加。 因此在實(shí)際使用中， 需要根據(jù)自身產(chǎn)品需求， 決定斷點(diǎn)。 綜合下來， 設(shè)置斷點(diǎn)應(yīng)把握以下三個(gè)要點(diǎn)。
    ·滿足主要的斷點(diǎn)；
    ·有可能的話添加一些別的斷點(diǎn)；
    ·設(shè)置高于1024px的桌面斷點(diǎn)。
    Responsive 布局技巧
    布局是一個(gè)再簡(jiǎn)單不過的問題了， 也是每個(gè)網(wǎng)頁(yè)設(shè)計(jì)中必須包含的部分， 但使用 Responsive 設(shè)計(jì)第一步要做的事情是讓頁(yè)面布局盡量簡(jiǎn)單。 實(shí)現(xiàn)一個(gè)簡(jiǎn)單的布局有 一些小技巧。
    ·盡量少用無(wú)關(guān)緊要的div；
    ·不要使用內(nèi)聯(lián)元素（ inline）；
    ·盡量少用JS或Flash；
    ·丟棄沒用的絕對(duì)定位和浮動(dòng)樣式；
    ·摒棄任何冗余結(jié)構(gòu)和不使用100%設(shè)置。 有舍才有得， 哪些東西 能幫助 Responsive 確定更好的布局呢？
    ·使用HTML5 Doctype和相關(guān)指南；
    ·重置好樣式（ reset. css）；
    ·一個(gè)簡(jiǎn)單的有語(yǔ)義的核心布局；
    ·給重要的網(wǎng)頁(yè)元素使用簡(jiǎn)單的技巧， 比如 導(dǎo)航 菜單 之類 元素。
    使用這些技巧， 無(wú)非是為了保持HTML簡(jiǎn)單干凈， 而且在頁(yè)面布局中的關(guān)鍵部分（ 元素） 不要過分依賴現(xiàn)代技巧來實(shí)現(xiàn)， 比如說 CSS3 特效或者JS 腳本。 說了這么多， 怎么樣的布局或者說HTML 結(jié)構(gòu)才是簡(jiǎn)單干凈的呢？ 這里介紹一個(gè)快速測(cè)試的方法。 首先禁掉頁(yè)面中所有的樣式（ 以及與樣式相關(guān)的信息）， 在瀏覽器中打開， 如果內(nèi)容排列有序， 方便閱讀， 那么這個(gè)結(jié)構(gòu)就不會(huì)差到哪里去。
    meta標(biāo)簽
    當(dāng)Responsive設(shè)計(jì)頁(yè)面在智能設(shè)備中進(jìn)行測(cè)試的時(shí)候（ 比如說iPhone或Android）， 會(huì)驚奇地發(fā)現(xiàn)， 所有的媒體查詢都不會(huì)生效—頁(yè)面仍展示為普通的樣式， 即一個(gè)全局縮小后的頁(yè)面。 這是因?yàn)?許多智能手機(jī)都使用了一個(gè)比實(shí)際屏幕尺寸大很多的虛擬可視區(qū)域， 主要目的就是讓頁(yè)面在智能手機(jī)端閱讀時(shí)不會(huì)因?yàn)閷?shí)際可視區(qū)域而變形。 為了讓智能手機(jī)能根據(jù)媒體查詢匹配對(duì)應(yīng)樣式， 讓頁(yè)面在 智能手機(jī)中正常顯示， 特意添加了一個(gè)特殊的meta標(biāo)簽。 這個(gè)標(biāo)簽的主要作用就是讓智能手機(jī)瀏覽網(wǎng)頁(yè)時(shí)能進(jìn)行優(yōu)化， 并且可以自定義界面可視區(qū)域的尺寸和縮放級(jí)別。 meta標(biāo)簽使用方法如下：
    < meta name=" viewport" content="" /> 在content屬性中主要包括 (在資料的圖片中有)
    在實(shí)際項(xiàng)目中， 為了讓 Responsive 設(shè)計(jì)在智能設(shè)備中能正常顯示， 也就是瀏覽Web頁(yè)面時(shí)能適應(yīng)屏幕的大小并顯示在屏幕上， 這可以通過這個(gè)可視區(qū)域的meta標(biāo)簽進(jìn)行重置， 告訴它使用設(shè)備的 寬度為視圖的寬度， 也就是說， 禁止其默認(rèn)的自適應(yīng)頁(yè)面的效果， 具體設(shè)置如下：
    < meta name=" viewport" content=" width= device- width, initial- scale= 1. 0" />
    另外， 由于Responsive設(shè)計(jì) 只有結(jié)合CSS3的Media Queries屬性， 才能盡顯 Responsive 設(shè)計(jì)風(fēng)格， 故瀏覽器必須支持 CSS3 Media Queries。
    。。。。。。
    十六，嵌入Web字體
    一直以來Web設(shè)計(jì)師在設(shè)計(jì)網(wǎng)頁(yè)時(shí)都想為Web頁(yè)面添加一些優(yōu)雅的字體，但瀏覽器僅限于使用用戶在其系統(tǒng)上安裝的字體呈現(xiàn)文本，這樣一來讓大部分網(wǎng)站受限于字體數(shù)量的不足。多年來一直都是 使用圖片替換文本的方式來解決頁(yè)面上使用優(yōu)雅字體，但這種對(duì)于頻繁更換文本的網(wǎng)站來說是一件不切實(shí)際的事，以致于我們堅(jiān)持使用這些少量的Web字體。隨著技術(shù)的不斷發(fā)展，出現(xiàn)在Web頁(yè)面中 使用Flash和JavaScript技術(shù)來彌補(bǔ)這一不足。雖然這些方法已經(jīng)是不錯(cuò)的應(yīng)急措施， 允許包含自己的字體， 但是它們擁有很嚴(yán)重的缺陷。有時(shí)候它們很難實(shí)現(xiàn)， 因?yàn)樗鼈円笥脩粼诒镜貑⒂?JavaScript或者 Flash插件。值得慶幸的一件事情是， 可以使用@font-face模塊來解決Web頁(yè)面中使用優(yōu)雅字體的方式。
    @font-face模塊介紹
    @font-face主要是把自己定義的Web字體嵌入到Web頁(yè)面中，這些自定義的字體被放置在服務(wù)器上，瀏覽器會(huì)根據(jù)指定的命令將對(duì)應(yīng)的字體下載到本地緩存， 使用它來修飾文本。 也常常把這種方式 稱為Web字體嵌入（ 實(shí)際上并沒有什么字體被嵌入）。
    @font-face語(yǔ)法
    有了@font-face模塊， 只要將字體傳入到服務(wù)器端，不管用戶端是否安裝了對(duì)應(yīng)的字體， 設(shè)計(jì)的網(wǎng)頁(yè)都能夠正確顯示，用較為專業(yè)的話來講，@font-face能夠加載服務(wù)器端的字體， 讓客戶端瀏覽器 顯示客戶端沒有安裝的字體。 如果沒有@font-face， 客戶端瀏覽器只能在客戶系統(tǒng)中尋找指定的字體， 這樣一來給設(shè)計(jì)師帶來極大的限制。@font-face能加載服務(wù)器端的字體，讓客戶端瀏覽器尋找 到對(duì)應(yīng)的字體，使用中具有一套成熟的語(yǔ)法規(guī)則。
    @font- face { font- family:< YourWebFontName>;
    src: < source>[< format>][,< source>[< format>]]*;
    [font- weight:< weight>];
    [font- style:< style>]; }
    取值 說明 如下：
    ·YourWebFontName：指定的是自定義的字體名稱，最好是使用下載的默認(rèn)字體文件名，它將被引用到Web元素中的font-family。如“ font- family:' YourWebFont- Name'”。
    ·Soure： 指定的是自定義的字體存放路徑， 可以是相對(duì)路徑也可以是絕對(duì)路徑。
    ·Format： 指定的是自定義的字體格式， 主要用來幫助瀏覽器識(shí)別，其值主要有以下幾種類型，如 truetype、 opentype、 truetype- aat、 embedded- opentype、 avg 等。
    ·font- weight 和 font- style： 前者用來指定字體是否為粗體，后者主要定義字體樣式，如 斜體。除了這兩個(gè)屬性之外， 類似的屬性還有 font- variant、 font- size、 font- stretch 等。
    使用字體圖標(biāo)的優(yōu)勢(shì)
    使用字體圖標(biāo)和位圖， 它自身更具有哪些優(yōu)勢(shì)呢？
    ·適用性： 一個(gè)圖標(biāo)字體比一系列的圖像（ 特別是在Retina屏中使用雙倍大小的圖像） 要小。 一旦圖標(biāo)字體加載了， 圖標(biāo)就會(huì)馬上渲染出來， 不需要下載任何圖像。
    ·可擴(kuò)展性： 圖標(biāo)字體可以用過font-size屬性設(shè)置大小。 能夠隨時(shí)輸出不同大小的圖標(biāo)，然而，使用位圖必須為每個(gè)不同大小的圖像輸出一個(gè)不同文件。
    ·靈活性： 文字效果可以很容易地應(yīng)用到圖標(biāo)上，包括顏色、陰影和翻轉(zhuǎn)等效果。它們還可以在任何背景下顯示
    ·兼容性： 網(wǎng)頁(yè)字體支持所有現(xiàn)代瀏覽器，包括低版本IE。
    實(shí)現(xiàn)@font-face
    @font-face屬性和CSS3中的@media，@import、@keyframes等屬性一樣， 都是用關(guān)鍵字符“@” 封裝多項(xiàng)規(guī)則。@font- face的"@"規(guī)則主要用于指定自定義字體， 然后在其他樣式塊中調(diào)用@ font-face中自定義的字體。
    使用@font-face自定義字體
    正常使用@font-face自定義字體， 必須滿足以下幾個(gè)關(guān)鍵點(diǎn)：
    ·將各種格式字體上傳到服務(wù)器上， 以支持各種瀏覽器； ·在@font-face中顯式指定自定義字體名稱以及引用自定義字體的字體來源。
    br/>·在@font-face中顯式指定自定義字體名稱以及引用自定義字體的字體來源。
    @font-face規(guī)則中的font-family與其他樣式中的font-fmaily略有不同。 在@font-face中的font-family只是聲明了字體的名稱（ 也就是自定義了字體的名稱），而沒有向元素中分配這種字體。而樣式 中的font-family卻是顯式地為元素指定字體名稱。在@font-face規(guī)則中 通過font-family來自定義字體名稱，而這個(gè)自體名稱可以是任意的名稱或形式，它僅用于元素樣式中的font-family屬性引用。 當(dāng)然，使用的字體名稱最好與引用的字體文件名相同，用于保持CSS的可讀性，可維護(hù)性。上面通過@font-face聲明了字體名“ NeuesBauenDemo”，但并不會(huì)有任何實(shí)際效果，如果想讓W(xué)eb中的 文本字體是 NeuesBauenDemo， 需要在樣式代碼塊中的對(duì)應(yīng)元素中引用@font-face定義好的字體，@font-face和@keyframes一樣，一個(gè)@font-face規(guī)則僅自定義一個(gè)字體， 如果需要自定義多個(gè) 字體就需要對(duì)應(yīng)啟用多個(gè)@font-face規(guī)則，
    聲明字體來源
    @font-face規(guī)則中有一個(gè)非常重要的參數(shù)，就是src，這個(gè)屬性類似于img標(biāo)簽中的src屬性， 其值主要是用于鏈接到實(shí)際的字體文件。此外，可以聲明多個(gè)來源，如果客戶端的瀏覽器未能找到第一個(gè) 來源，它會(huì)依次嘗試尋找后面字體來源，直到找到一個(gè)可用的字體來源為止，
    每種字體都有其具體作用和格式，
66. TureType(. ttf) 格式 TureType(. ttf) 格式字體是 Windows 和 iOS 的最常見的字體， 是 一種RAW格式。
67. OpenType(. otf) 格式 OpenType(. otf) 格式字體被認(rèn)為是一種原始的字體格式， 其內(nèi)置在TureType的基礎(chǔ)上， 所以也提供更多的功能，
68. Web Open Font Format(. woff) 格式 Web Open Font Format(. woff) 格式字體是Web字體中最佳格式， 它是一個(gè)開放的 TrueType/ OpenType 的壓縮版本， 同時(shí)也支持元數(shù)據(jù)包的分離
69. Embedded Open Type(. eot) 格式 Embedded Open Type(. eot) 格式字體是 IE專用字體， 可以從 TrueType 中創(chuàng)建此格式字體
70. SVG(. svg) 格式SVG(. svg) 格式字體是基于SVG字體渲染的一種格式，
    這就意味著在@font-face中至少需要“. woff”和“. eot”兩種格式字體， 甚至還需要“. svg” 等字體以得到更多種瀏覽版本的支持。 為了使@font-face 得到更多的瀏覽器支持， Paul Irish 寫了 一個(gè)獨(dú)特的@font-face語(yǔ)法叫做“ Bulletproof@ font- face”(防彈字體)
    創(chuàng)建各種字體
    手上僅有一種格式的字體，而為了兼容瀏覽器各版本，需要從一種格式字體轉(zhuǎn)換成所需的各種字體格式。那么如何將字體轉(zhuǎn)換為所有格式的字體呢？
    這將成為@font-face定義字體之前首要解決的問題之一。目前為止，在互聯(lián)網(wǎng)上有很多在線轉(zhuǎn)換字體的生成工具。
    ·Fontsquirrel 字體轉(zhuǎn)換生成器
    ·Codeandmore 字體轉(zhuǎn)換生成器
    創(chuàng)建一個(gè)圖標(biāo)字體
    Symbol(符號(hào))字體可以使用一個(gè)專用的字體創(chuàng)建應(yīng)用程序， 比如說 Glyphs(雕文)，但是一個(gè)專業(yè)的排版工具之外的需求或要求構(gòu)建一個(gè)簡(jiǎn)單的圖標(biāo)字體，比如說 間 中 攻 粗細(xì) 這樣的物理關(guān)系并不是非常重要。 目前為止，最簡(jiǎn)單的方法是使用Keyamoon制作的一個(gè)Web應(yīng)用程序 IcoMoon，可以解決字符轉(zhuǎn)換成Web字體的所有麻煩。IcoMoon附帶了大量的圖標(biāo)， 可以通過圖標(biāo)庫(kù)添加更多的圖標(biāo)，其中 大部分都可以免費(fèi)使用（使用時(shí)請(qǐng)先查看它們的許可證）。如果你正在尋找如“ 文件下載”和“ 購(gòu)物車” 一樣的圖標(biāo)，那么你會(huì)發(fā)現(xiàn)， 使用標(biāo)準(zhǔn)的圖標(biāo)比你自己創(chuàng)建要方便得多。
    準(zhǔn)備插圖
    首先，需要能創(chuàng)建矢量圖標(biāo)的程序，并且能夠找到輸出SVG格式，比如Illustrator或者iNkscape。 設(shè)計(jì)的時(shí)候，可以使用任何你喜歡的顏色，但是圖標(biāo)必須是一個(gè)純色。確保每個(gè)圖標(biāo)的尺寸大小是相同 的。若某一個(gè)圖標(biāo)相較其他的更高或者更寬，會(huì)導(dǎo)致很難創(chuàng)建一個(gè)一致的字體。在這里，我們不得不減少飛艇圖標(biāo)的寬度，以使它能匹配其他圖標(biāo)
71. 清理圖標(biāo)
    仔細(xì)檢查每一個(gè)圖標(biāo)，以確保它們沒有缺陷—圖標(biāo)在小尺寸的時(shí)候可能看著是完美的，當(dāng)放大后會(huì)發(fā)現(xiàn)一些小的缺陷。在 Illustrator 中，使用Pathfinder工具統(tǒng)一層疊元素， 減去前面元素， 比如圖標(biāo) 中的星星圖標(biāo)。 原則是確保圖標(biāo)是可讀的小尺寸，
72. 導(dǎo)成SVG文件
    現(xiàn)在，選擇一個(gè)圖標(biāo)并將它復(fù)制粘貼到一個(gè)新的文檔場(chǎng)景中（ 如200px*200px）。會(huì)發(fā)現(xiàn)它有一個(gè)基線尺寸的設(shè)置。使用彩色的圖標(biāo)，比如說在白色的背景中使用黑色的圖標(biāo)?，F(xiàn)在，選擇菜單“ 文件”中“ 保存”， 將選擇將文件保存成SVG文件格式。使用默認(rèn)的SVG設(shè)置。一旦這樣做，所有的圖標(biāo)可以創(chuàng)建為一個(gè)Web字體，
73. 導(dǎo)入到 IcoMoon
    打開 IcoMoon Web App 。導(dǎo)入一個(gè)圖標(biāo)，點(diǎn)擊“ Import icons”按鈕，然后選擇想要添加的SVG文件— 可以一次添加多個(gè)文件。 這些圖標(biāo)將會(huì)出現(xiàn)在“ Your Custom Icons” 區(qū)域中。 如果它們 是高亮的×××顯示，表示這些圖標(biāo)是將要?jiǎng)?chuàng)建的圖標(biāo)字體。
74. 從IcoMoon中導(dǎo)出字體
    想調(diào)整圖標(biāo)的位置、大小或旋轉(zhuǎn)，可以點(diǎn)擊“ Edit” 按鈕， 使用“ Save Copy” 保存圖片（ 如鏡像圖標(biāo)）。 然后添加一個(gè)有意義的圖標(biāo)標(biāo)記， 將用來生成類 名。 都準(zhǔn)備好了， 點(diǎn)擊屏幕底部的“ Font” 按鈕開始生成字體。 這樣就可以指定圖標(biāo)映射到字符上，例如， 設(shè)置一套六個(gè)旋轉(zhuǎn)的球， 可以給這六個(gè)球分別指定字符 q、 w、 e、 r、 t 和 y。 也可以根據(jù)自己的愛好選擇一個(gè)字體的名字。
    5.下載字體文件
    單擊“ Download”下載字體包到電腦上。它有一個(gè)文件夾包含了字體本身（ woff、 eot、 ttf 格式），以及一個(gè)HTML示例頁(yè)面和相應(yīng)的CSS。甚至還有一個(gè) JavaScript 文件和 一個(gè)解決方法，如果 需要支持IE或 IE7， 將font文件 復(fù)制到網(wǎng) 站， 為項(xiàng)目添加字體。 需要從 style. css 文件中復(fù)制 CSS 樣式， 并粘貼到自己網(wǎng)站的CSS文件中， 但是可以要將它重命名為 fonts. css， 并保持它作為一個(gè) 單獨(dú) 的 CSS 文件。 需要 的 時(shí)候 再把 這個(gè) CSS 文件 引入 到 HTML 中。 < link rel=" stylesheet" href=" fonts. css" /> 在 CSS 文件 中 可以 找到@ font- face 需要 將 URL 路徑 修改 成 本地 的 相對(duì)路徑， 或者可以簡(jiǎn)單地把字體文件和樣式放在同一個(gè)文件夾，
    調(diào)用字體樣式
    文件 index. html，有兩種方法可以調(diào)用，
    一種是通過字符（unicod 或 名稱），
    另一種是通過類名。首先，使用HTML5的自定義屬性data- icon。
    第二種方法
    使用 一個(gè) span元素。 < span aria- hidden=" true"></ span> 如果想讓圖標(biāo)具有鏈接功能， 可以將其放在一個(gè)鏈接中。< a href=" http:// www. w3cplus. com" data- icon="&# x73;"></ a> 這里，添加一個(gè) iconlink類名， 并設(shè)置一個(gè)懸浮效果。
    。。。。。。
    十七，CSS3選擇器