第5章HTML5+CSS3移動(dòng)網(wǎng)站布局網(wǎng)頁(yè)設(shè)計(jì)與Web前端開發(fā)案例教程CONTENT目錄HTML5新增標(biāo)簽與特性01CSS3新增偽類與偽元素02CSS3變形、過(guò)渡及動(dòng)畫03CSS3新增屬性04CSS3彈性盒模型05響應(yīng)式布局和自適應(yīng)布局0601HTML5新增標(biāo)簽與特性HTML5概述HTML5核心特性HTML5是萬(wàn)維網(wǎng)核心語(yǔ)言的第五次大修改，新增語(yǔ)義特性、本地存儲(chǔ)及設(shè)備兼容等特性，為移動(dòng)設(shè)備Web開發(fā)提供良好支持。結(jié)構(gòu)性標(biāo)簽應(yīng)用HTML5引入

<header>、<nav>、<section>等結(jié)構(gòu)性標(biāo)簽，優(yōu)化文檔結(jié)構(gòu)，提升內(nèi)容可讀性與搜索引擎友好度。語(yǔ)義化標(biāo)簽解析通過(guò)

<hgroup>、<figure>、<time>等語(yǔ)義化標(biāo)簽，HTML5實(shí)現(xiàn)內(nèi)容分組與媒體關(guān)聯(lián)，增強(qiáng)文檔語(yǔ)義表達(dá)與機(jī)器解析能力。結(jié)構(gòu)性標(biāo)簽020301HTML5結(jié)構(gòu)性標(biāo)簽定義HTML5結(jié)構(gòu)性標(biāo)簽是增強(qiáng)語(yǔ)義的`div`塊，用于按邏輯分割頁(yè)面，使文檔結(jié)構(gòu)更清晰，便于閱讀和維護(hù)。主要結(jié)構(gòu)性標(biāo)簽介紹主要標(biāo)簽包括`<header>`、`<nav>`、`<section>`、`<article>`、`<aside>`和`<footer>`，有助于搜索引擎理解頁(yè)面內(nèi)容。與`div`標(biāo)簽的區(qū)別結(jié)構(gòu)性標(biāo)簽語(yǔ)義化更強(qiáng)，能準(zhǔn)確描述頁(yè)面結(jié)構(gòu)，而`div`標(biāo)簽則無(wú)特定語(yǔ)義，適用于樣式和行為定義。常見的結(jié)構(gòu)性標(biāo)簽各標(biāo)簽定義用途（1）`<header>`定義頁(yè)眉，`<nav>`用于導(dǎo)航，`<section>`劃分版塊。各標(biāo)簽定義用途（2）`<article>`展示獨(dú)立內(nèi)容，`<aside>`呈現(xiàn)附屬信息，`<footer>`包含頁(yè)腳信息。語(yǔ)義化標(biāo)簽語(yǔ)義化標(biāo)簽核心價(jià)值增強(qiáng)代碼可讀性與可維護(hù)性，提升SEO效果及無(wú)障礙訪問(wèn)能力，明確內(nèi)容結(jié)構(gòu)獨(dú)立于樣式。語(yǔ)義化標(biāo)簽分類解析涵蓋分組標(biāo)題、獨(dú)立內(nèi)容、時(shí)間標(biāo)記等標(biāo)簽，各司其職優(yōu)化網(wǎng)頁(yè)語(yǔ)義結(jié)構(gòu)與交互體驗(yàn)。語(yǔ)義化應(yīng)用原則依內(nèi)容語(yǔ)義選標(biāo)簽，注意兼容性與易混淆點(diǎn)，結(jié)合ARIA提升無(wú)障礙訪問(wèn)，遵循最佳實(shí)踐。010203<hgroup>功能與示例020301組合標(biāo)題功能使用hgroup標(biāo)簽可組合主副標(biāo)題，如h1與h2搭配，增強(qiáng)文檔結(jié)構(gòu)層次，利于搜索引擎理解頁(yè)面主題。標(biāo)題示例展示示例中通過(guò)hgroup包裹歡迎語(yǔ)及副標(biāo)題，清晰呈現(xiàn)內(nèi)容層級(jí)，此標(biāo)簽有助于組織頁(yè)面頭部信息，提升可讀性。語(yǔ)義化優(yōu)勢(shì)hgroup明確標(biāo)題關(guān)系，符合語(yǔ)義化標(biāo)準(zhǔn)，使代碼結(jié)構(gòu)更清晰，對(duì)SEO及無(wú)障礙訪問(wèn)有積極意義，獨(dú)立于樣式存在。<figure>與<figcaption>功能1獨(dú)立內(nèi)容組合功能<figure>用于包裹圖片、代碼等獨(dú)立內(nèi)容，<figcaption>為其添加標(biāo)題說(shuō)明，增強(qiáng)語(yǔ)義化與可讀性。2標(biāo)簽使用示例通過(guò)<figure>嵌套<figcaption>展示美圖集錦，清晰標(biāo)注內(nèi)容主題，提升頁(yè)面信息結(jié)構(gòu)化程度。3應(yīng)用場(chǎng)景解析適用于圖文混排、多媒體資源展示等場(chǎng)景，替代容器，明確內(nèi)容與標(biāo)題的關(guān)聯(lián)性。<time>功能與示例010203時(shí)間標(biāo)記標(biāo)簽功能用于機(jī)器可讀的日期/時(shí)間，關(guān)鍵屬性有datetime指定標(biāo)準(zhǔn)格式，pubdate標(biāo)記發(fā)布日期。示例展示如在段落中用<timedatetime="2024-10-01">國(guó)慶節(jié)</time>表示特定時(shí)間，增強(qiáng)語(yǔ)義。時(shí)間標(biāo)記注意事項(xiàng)使用時(shí)需注意正確設(shè)置屬性值，確保時(shí)間信息準(zhǔn)確且符合規(guī)范要求。<datalist>功能與示例010302輸入選項(xiàng)列表功能為文本輸入框提供預(yù)定義選項(xiàng)，提升用戶輸入效率與體驗(yàn)。通過(guò)下拉建議形式展示，方便用戶快速選擇或輸入自定義內(nèi)容。綁定方式與示例將input元素的list屬性與datalist中的id屬性關(guān)聯(lián)，實(shí)現(xiàn)選項(xiàng)提示功能。示例中展示如何為輸入框添加預(yù)定義選項(xiàng)，如HTML、CSS等，提升交互性。顯示效果與用途輸入時(shí)自動(dòng)顯示預(yù)定義選項(xiàng)，簡(jiǎn)化用戶操作流程。適用于需要固定選項(xiàng)的輸入場(chǎng)景，如表單填寫、搜索過(guò)濾等，提升用戶體驗(yàn)。<details>與<summary>功能1·2·3·功能與屬性<details>與<summary>組合創(chuàng)建可交互組件，<summary>定義可點(diǎn)擊區(qū)域，<details>包裹隱藏內(nèi)容。交互效果默認(rèn)折疊顯示，點(diǎn)擊展開內(nèi)容，支持open屬性控制初始狀態(tài)。應(yīng)用場(chǎng)景適用于長(zhǎng)文本、表單說(shuō)明等需要用戶手動(dòng)觸發(fā)查看的內(nèi)容展示場(chǎng)景。<dialog>功能與示例010203標(biāo)簽功能定義對(duì)話框或確認(rèn)框，用于交互提示。需添加open屬性才能顯示，常配合JavaScript實(shí)現(xiàn)動(dòng)態(tài)效果。<dialog>示例展示如<dialogopen>您好！</dialog>，呈現(xiàn)簡(jiǎn)潔的對(duì)話框樣式，默認(rèn)有絕對(duì)定位與黑色邊框特征。<dialog>使用注意使用時(shí)要關(guān)注其顯示條件，確保在適當(dāng)場(chǎng)景下正確運(yùn)用，以實(shí)現(xiàn)預(yù)期的交互功能。<address>功能與示例010203功能定位標(biāo)記文檔作者聯(lián)系方式，常嵌于頁(yè)腳區(qū)塊，呈現(xiàn)斜體自動(dòng)換行樣式。使用規(guī)范需配合郵件鏈接等通訊方式，通過(guò)語(yǔ)義嵌套提升可訪問(wèn)性，避免獨(dú)立存在。樣式特征默認(rèn)采用斜體展示，支持多行文本自動(dòng)換行，與通用容器形成視覺區(qū)分。<meter>功能與示例123度量衡標(biāo)簽功能表示已知范圍標(biāo)量值，如磁盤用量，有min/max等關(guān)鍵屬性。顏色規(guī)則說(shuō)明綠色為與最優(yōu)值同區(qū)間，黃紅按與最優(yōu)區(qū)距離漸變，非進(jìn)度條。示例展示通過(guò)具體示例展示其在頁(yè)面中的呈現(xiàn)效果與應(yīng)用場(chǎng)景特點(diǎn)。<progress>功能與注意010302進(jìn)度條標(biāo)簽功能<progress>用于動(dòng)態(tài)任務(wù)進(jìn)度指示，通過(guò)value和max屬性設(shè)置當(dāng)前與總進(jìn)度值，直觀展示任務(wù)完成情況。使用注意事項(xiàng)<progress>不適用于靜態(tài)度量，應(yīng)與<meter>區(qū)分，且需注意不同瀏覽器的兼容性問(wèn)題。示例與效果如<progressvalue="33"max="100"></progress>展示33%進(jìn)度，視覺效果為進(jìn)度條填充對(duì)應(yīng)比例。<mark>功能與示例文本高亮功能<mark>標(biāo)簽用于醒目標(biāo)記關(guān)鍵文本，默認(rèn)黃色背景，使關(guān)鍵詞突出顯示，增強(qiáng)內(nèi)容可讀性。高亮示例展示在段落中使用<mark>標(biāo)簽包裹文字，如”這是<mark>高亮內(nèi)容</mark>”，實(shí)現(xiàn)關(guān)鍵詞的高亮效果。應(yīng)用場(chǎng)景說(shuō)明<mark>標(biāo)簽適用于強(qiáng)調(diào)重要信息，如文檔摘要、關(guān)鍵詞標(biāo)注等，提升用戶對(duì)關(guān)鍵內(nèi)容的關(guān)注度。02CSS3新增偽類與偽元素CSS3偽類偽元素類別CSS3偽類分類CSS3偽類分三大類：前綴nth前綴其他精準(zhǔn)定位元素，增強(qiáng)樣式控制與交互體驗(yàn)。前綴偽類詳解前綴偽類有first/last/only等，分類型限定與位置限定，可精準(zhǔn)選中特定元素進(jìn)行樣式設(shè)置。nth前綴用法nth前綴偽類含多種類型，參數(shù)形式多樣，能按序號(hào)或公式選擇元素，實(shí)現(xiàn)靈活樣式控制。增強(qiáng)樣式控制精準(zhǔn)性偽類選擇器核心作用基于元素位置匹配特定子元素，增強(qiáng)樣式控制精準(zhǔn)性，無(wú)需額外class命名。類型限定偽類解析:first-of-type等匹配父元素內(nèi)特定類型的首/尾/唯一子元素，示例展示背景色變化。子元素位置偽類應(yīng)用:first-child等基于父元素絕對(duì)位置匹配子元素，示例演示字體大小及顏色調(diào)整。:first-of-type功能及示例匹配父元素內(nèi)特定類型首個(gè)子元素，精準(zhǔn)定位同類型中的第一個(gè)，實(shí)現(xiàn)樣式針對(duì)性應(yīng)用。如首個(gè)段落元素背景變紅，通過(guò)CSS規(guī)則對(duì)符合:first-of-type條件的元素進(jìn)行樣式設(shè)定。適用于內(nèi)容類型相同但順序變化的列表項(xiàng)，突出首元素，在文檔結(jié)構(gòu)中強(qiáng)化起始部分樣式。010302:last-of-type功能及示例010203功能定位匹配父元素內(nèi)特定類型最后一個(gè)子元素，精準(zhǔn)定位同類型末尾元素。樣式應(yīng)用通過(guò)CSS設(shè)置背景色等樣式，直觀展示末尾元素的視覺效果差異。代碼示例使用p:last-of-type選擇器，為最后一個(gè)段落元素添加藍(lán)色背景樣式。:only-of-type功能及示例:only-of-type功能解析匹配父元素內(nèi)特定類型的唯一子元素，當(dāng)且僅當(dāng)該類型元素在父元素中僅出現(xiàn)一次時(shí)生效。:only-of-type示例展示如p:only-of-type{background-color:red;}，當(dāng)父元素只有一個(gè)段落時(shí)，該段落背景變紅。:only-of-type應(yīng)用場(chǎng)景適用于頁(yè)面中需突出唯一特定類型元素的情況，如強(qiáng)調(diào)唯一提示信息或特殊內(nèi)容塊。:first-child功能及示例功能定位匹配父元素首個(gè)子元素，精準(zhǔn)定位頁(yè)面結(jié)構(gòu)中的起始元素。樣式應(yīng)用通過(guò)CSS規(guī)則設(shè)置，可改變首個(gè)子元素背景顏色、字體大小等視覺表現(xiàn)。示例演示如首個(gè)P元素背景變黃，展示first-child在實(shí)際布局中的視覺效果與作用范圍。:last-child功能及示例132:last-child功能匹配父元素最后一個(gè)子元素。用于為末尾元素添加特殊樣式，如背景色、字體大小等。:last-child示例示例中，作為最后一個(gè)子元素的<p>背景變紅，通過(guò)CSS規(guī)則p:last-child{background-color:red;}實(shí)現(xiàn)。應(yīng)用場(chǎng)景適用于移除末尾元素邊距、添加裝飾或標(biāo)識(shí)列表末尾項(xiàng)，確保樣式精準(zhǔn)應(yīng)用于特定位置元素。:only-child功能及示例:only-child功能匹配父元素唯一子元素，當(dāng)元素是父元素的唯一子元素時(shí)生效。:only-child示例如示例中，當(dāng)元素是父元素的唯一子元素時(shí)，設(shè)置背景顏色為紅色。注意事項(xiàng)作用域是直接父元素，嵌套結(jié)構(gòu)有新作用域。nth偽類概述213nth偽類核心功能基于位置精準(zhǔn)選擇元素，實(shí)現(xiàn)復(fù)雜模式匹配，如奇偶行、倍數(shù)位置等，四大偽類包括:nth-of-type()、:nth-last-of-type()、:nth-child()、:nth-last-child()。語(yǔ)法與功能詳解各偽類語(yǔ)法不同，功能各異。:nth-of-type(n)選同類型第n個(gè)元素；:nth-last-of-type(n)選倒數(shù)第n個(gè)；:nth-child(n)考慮所有子元素位置；:nth-last-child(n)同理。參數(shù)解析與示例公式an+b中，a為周期，n為計(jì)數(shù)器，b為偏移量。關(guān)鍵詞odd、even分別選奇偶位元素。綜合示例展示HTML結(jié)構(gòu)與CSS樣式對(duì)應(yīng)效果，體現(xiàn)各偽類應(yīng)用場(chǎng)景。:nth-of-type語(yǔ)法與功能123功能與定位:nth-of-type(n)用于匹配同類型中的第n個(gè)同級(jí)元素，精準(zhǔn)選擇特定位置的同類標(biāo)簽。參數(shù)類型解析支持?jǐn)?shù)字、關(guān)鍵詞和公式三種參數(shù)類型，靈活實(shí)現(xiàn)奇偶位、倍數(shù)位等復(fù)雜模式匹配。應(yīng)用場(chǎng)景示例常用于表格奇偶行樣式、列表周期性標(biāo)記等場(chǎng)景，通過(guò)類型過(guò)濾避免跨標(biāo)簽干擾。:nth-last-of-type語(yǔ)法與功能匹配同類型中倒數(shù)第n個(gè)同級(jí)元素，精準(zhǔn)定位特定位置元素，實(shí)現(xiàn)針對(duì)性樣式設(shè)置。語(yǔ)法為:nth-last-of-type(n)，n可為數(shù)字、關(guān)鍵詞或公式，決定選擇元素的具體位置。如p:nth-last-of-type(2)選倒數(shù)第2個(gè)p元素，可設(shè)置背景色等樣式，直觀呈現(xiàn)效果。:nth-child語(yǔ)法與功能:nth-child功能解析匹配父元素第n個(gè)子元素，與nth-of-type不同，考慮所有子元素位置。:nth-child參數(shù)類型參數(shù)可為數(shù)字、關(guān)鍵詞或公式，如p:nth-child(2)選第2個(gè)p，odd選奇數(shù)位。:nth-child示例應(yīng)用示例中p:nth-child(2)設(shè)置背景顏色。:nth-last-child語(yǔ)法與功能123功能與選擇邏輯匹配父元素倒數(shù)第n個(gè)子元素，考慮所有子元素位置，非僅同類型兄弟。示例與效果展示如選擇倒數(shù)第2個(gè)p子元素，實(shí)現(xiàn)藍(lán)色背景色等樣式效果。對(duì)比與應(yīng)用場(chǎng)景與nth-last-of-type不同，它考慮所有子元素，適用于尾部元素邊距調(diào)整等場(chǎng)景。其他偽類和偽元素空元素選擇器:empty匹配無(wú)子元素（含文本節(jié)點(diǎn)）的元素，需設(shè)置高度才能顯示背景，常用于占位符提示、空內(nèi)容特殊樣式。反向選擇器:not()排除指定選擇器的元素，支持復(fù)合用法，適用于批量排除特定元素，實(shí)現(xiàn)復(fù)雜選擇邏輯。表單狀態(tài)控制:enabled、:disabled、:checked分別匹配表單啟用、禁用、選中狀態(tài)，結(jié)合屬性選擇器和兄弟選擇器實(shí)現(xiàn)精準(zhǔn)樣式控制。:empty-空元素選擇器010203空元素選擇器功能:empty匹配無(wú)子元素（含文本節(jié)點(diǎn)）的元素，需設(shè)置高度才能顯示背景，常用于占位符提示、空內(nèi)容特殊樣式。:empty關(guān)鍵技巧使用p:empty時(shí)，設(shè)置height屬性可讓空段落有紅色背景，實(shí)現(xiàn)空元素的可視化處理。:empty應(yīng)用場(chǎng)景在網(wǎng)頁(yè)中，對(duì)空的div或p元素應(yīng)用:empty偽類，可設(shè)置特定樣式，如顯示占位圖片等。:not()-反向選擇器123反向選擇器功能:not()偽類用于排除指定選擇器的元素，實(shí)現(xiàn)批量排除特定元素的功能。支持復(fù)雜選擇器參數(shù)，靈活控制樣式應(yīng)用范圍。復(fù)合用法示例通過(guò)p:not(:last-child)選擇除最后一個(gè)段落外的所有段落，或使用:not(p)使非段落元素文字變藍(lán)，展示靈活排除能力。應(yīng)用場(chǎng)景解析在表單布局中利用:not()排除特定表單元素，或在內(nèi)容區(qū)塊中過(guò)濾不需要應(yīng)用樣式的元素，提升樣式控制精準(zhǔn)度。:enabled-表單啟用狀態(tài)010203表單啟用狀態(tài)匹配:enabled偽類用于匹配處于啟用狀態(tài)的表單元素，如可編輯文本框。通過(guò)設(shè)置樣式可直觀區(qū)分表單交互狀態(tài)，提升用戶體驗(yàn)。樣式應(yīng)用示例為啟用狀態(tài)的輸入框設(shè)置綠色背景，強(qiáng)化視覺反饋。常與屬性選擇器結(jié)合實(shí)現(xiàn)精準(zhǔn)控制，如input[type="text"]:enabled。組合使用技巧可與其他偽類或選擇器組合使用，如input:enabled:focus實(shí)現(xiàn)多狀態(tài)疊加樣式。需注意與禁用狀態(tài)樣式形成對(duì)比，保障界面可用性。:disabled-表單禁用狀態(tài)123表單禁用狀態(tài)樣式:disabled偽類匹配禁用狀態(tài)的表單元素，常用于設(shè)置灰色背景、降低透明度等樣式，需注意無(wú)障礙對(duì)比度。禁用狀態(tài)應(yīng)用場(chǎng)景適用于不可編輯文本框、禁用按鈕等場(chǎng)景，通過(guò)CSS設(shè)置input:disabled樣式，提升界面交互體驗(yàn)。禁用與啟用對(duì)比結(jié)合:enabled偽類使用，可區(qū)分表單元素可用與禁用狀態(tài)，如啟用時(shí)顯示黃色背景，禁用時(shí)變灰色。:checked-單選框選中狀態(tài)010203:checked功能特性:checked匹配選中的單選/復(fù)選框，常用于表單交互。示例中，選中后關(guān)聯(lián)的span元素背景變橙，實(shí)現(xiàn)樣式聯(lián)動(dòng)。:checked關(guān)鍵技巧可結(jié)合屬性選擇器精準(zhǔn)控制，如input[type="text"]:enabled。利用鄰接兄弟選擇器，能關(guān)聯(lián)標(biāo)簽樣式，增強(qiáng)交互效果。:checked應(yīng)用場(chǎng)景在表單中，為選中狀態(tài)的復(fù)選框關(guān)聯(lián)標(biāo)簽添加樣式，如加粗、變色。還能與其他偽類配合，優(yōu)化表單整體交互體驗(yàn)。::selection偽元素010203全局文本選擇優(yōu)化通過(guò)偽元素::selection自定義選中文本樣式，提升閱讀體驗(yàn)。支持背景色、文字色等屬性設(shè)置，但無(wú)法調(diào)整字體大小和邊框。深色模式適配方案針對(duì)全局文本選擇，在深色模式下調(diào)整選中顏色為亮色背景與白色文字，確保高對(duì)比度和可讀性，增強(qiáng)用戶體驗(yàn)?？鐬g覽器兼容性處理現(xiàn)代瀏覽器均支持::selection，但I(xiàn)E需使用:-ms-selection前綴。開發(fā)時(shí)需考慮不同瀏覽器的兼容性，確保樣式統(tǒng)一。03CSS3變形、過(guò)渡及動(dòng)畫CSS3變形動(dòng)態(tài)效果實(shí)現(xiàn)無(wú)需Flash動(dòng)畫或JavaScript，CSS3的transform屬性即可實(shí)現(xiàn)元素變形，創(chuàng)造旋轉(zhuǎn)、縮放、位移等動(dòng)態(tài)效果，增強(qiáng)頁(yè)面視覺表現(xiàn)力與交互體驗(yàn)。視覺體驗(yàn)提升通過(guò)transform控制元素變形，可優(yōu)化布局視覺效果，提升用戶操作反饋，如按鈕點(diǎn)擊動(dòng)效，使界面更生動(dòng)直觀，改善整體用戶體驗(yàn)。交互反饋優(yōu)化利用transform實(shí)現(xiàn)元素狀態(tài)變化時(shí)的交互反饋，例如懸停放大、點(diǎn)擊旋轉(zhuǎn)等，讓用戶操作獲得即時(shí)視覺回應(yīng)，增強(qiáng)交互質(zhì)感與趣味性。移動(dòng)（translate）移動(dòng)函數(shù)與語(yǔ)法translate(x,y)實(shí)現(xiàn)雙向位移，translateX(n)水平移，translateY(n)垂直移。語(yǔ)法示例如右移下移、上移等，用于元素位置微調(diào)及懸停浮動(dòng)效果。移動(dòng)應(yīng)用場(chǎng)景通過(guò)移動(dòng)函數(shù)可對(duì)元素位置進(jìn)行微調(diào)，在懸停時(shí)能實(shí)現(xiàn)浮動(dòng)效果，讓頁(yè)面元素位置變化更靈活，增強(qiáng)交互性與視覺體驗(yàn)。移動(dòng)效果展示如圖5-25所示，展示了平移效果對(duì)比，直觀呈現(xiàn)移動(dòng)函數(shù)作用后的元素狀態(tài)，幫助理解其在實(shí)際應(yīng)用中的表現(xiàn)。縮放(scale)030201縮放函數(shù)解析使用scale(x,y)實(shí)現(xiàn)雙向縮放，支持scaleX(n)水平及scaleY(n)垂直縮放，取值>1放大、<1縮小，默認(rèn)值為1保持原始尺寸?？s放特性應(yīng)用通過(guò)transform:scale(2,0.5)實(shí)現(xiàn)寬高非等比縮放，transform:scaleX(1.5)僅調(diào)整寬度，適用于圖標(biāo)聚焦和界面自適應(yīng)場(chǎng)景?？s放效果對(duì)比圖5-26展示不同縮放參數(shù)下的視覺效果，配合語(yǔ)法示例說(shuō)明取值規(guī)則，呈現(xiàn)元素在放大與縮小狀態(tài)下的形態(tài)變化特征。旋轉(zhuǎn)(rotate)旋轉(zhuǎn)函數(shù)與單位核心函數(shù)rotate(angle)，支持deg、turn、rad、grad四種單位，實(shí)現(xiàn)元素繞中心點(diǎn)順時(shí)針或逆時(shí)針旋轉(zhuǎn)。旋轉(zhuǎn)語(yǔ)法示例通過(guò)transform:rotate(45deg);實(shí)現(xiàn)45度順時(shí)針旋轉(zhuǎn)，負(fù)值或turn單位可控制方向與圈數(shù)。旋轉(zhuǎn)應(yīng)用場(chǎng)景常用于加載動(dòng)畫、方向指示及交互反饋，結(jié)合transform-origin調(diào)整旋轉(zhuǎn)基準(zhǔn)點(diǎn)實(shí)現(xiàn)精準(zhǔn)控制。傾斜(skew)231傾斜變形基礎(chǔ)通過(guò)CSS3的skew函數(shù)實(shí)現(xiàn)元素傾斜，支持雙向及單軸傾斜，正角度順時(shí)針傾斜，負(fù)角度逆時(shí)針傾斜。傾斜語(yǔ)法與特性使用skew(x-angle,y-angle)或skewX/Y(angle)設(shè)置傾斜，角度單位多樣，效果受正負(fù)值影響方向。傾斜應(yīng)用場(chǎng)景常用于創(chuàng)建透視或不規(guī)則布局，如圖5-28展示不同傾斜角度對(duì)比效果。變形基準(zhǔn)點(diǎn)123變形基準(zhǔn)點(diǎn)功能改變變形參考點(diǎn)，默認(rèn)中心點(diǎn)。通過(guò)語(yǔ)法transform-origin設(shè)置，可使用關(guān)鍵字、百分比或長(zhǎng)度值確定位置?；鶞?zhǔn)點(diǎn)取值類型取值類型包括關(guān)鍵字如lefttop，百分比如30%80%，長(zhǎng)度值如20px50px，只寫一個(gè)長(zhǎng)度值或百分比時(shí)，默認(rèn)為x-axis的值只寫一個(gè)關(guān)鍵字時(shí)，則默認(rèn)另一個(gè)關(guān)鍵字為center注意事項(xiàng)與對(duì)比注意不可拆分為多行定義，否則以最后一行為準(zhǔn)。圖5-29展示基準(zhǔn)點(diǎn)設(shè)置對(duì)比，不同取值會(huì)產(chǎn)生不同變形效果。復(fù)合變形技巧復(fù)合變形組合使用空格分隔多個(gè)變形函數(shù)，實(shí)現(xiàn)復(fù)雜效果。如先旋轉(zhuǎn)后平移，或先縮放再傾斜，順序不同結(jié)果各異。變形順序影響變形函數(shù)執(zhí)行順序影響最終效果。例如先平移后旋轉(zhuǎn)與先旋轉(zhuǎn)后平移，元素位置和角度均產(chǎn)生差異。統(tǒng)一寫法建議避免拆分多行定義，采用復(fù)合寫法保證效果統(tǒng)一。關(guān)鍵規(guī)則需遵循，確保變形效果準(zhǔn)確呈現(xiàn)。CSS3過(guò)渡CSS3過(guò)渡定義CSS3過(guò)渡是元素樣式逐漸變化的效果，需屬性值改變觸發(fā)，能不依賴Flash動(dòng)畫或JS實(shí)現(xiàn)平滑動(dòng)畫，增強(qiáng)交互體驗(yàn)。過(guò)渡實(shí)現(xiàn)要素過(guò)渡實(shí)現(xiàn)要指定過(guò)渡屬性與設(shè)置持續(xù)時(shí)間，如示例中通過(guò)transition設(shè)置width屬性2秒過(guò)渡。過(guò)渡核心價(jià)值過(guò)渡的核心價(jià)值在于無(wú)需JS就能實(shí)現(xiàn)平滑動(dòng)畫，有效提升頁(yè)面的交互體驗(yàn)，讓元素變化更自然。010203四大核心屬性詳解010203過(guò)渡屬性核心解析CSS3過(guò)渡四大核心屬性，包括指定過(guò)渡屬性、設(shè)置持續(xù)時(shí)間、速度變化曲線、延遲開始時(shí)間屬性取值與限制transition-property支持具體屬性或all，不支持display；duration需明確時(shí)間單位；timing-function含多種預(yù)設(shè)曲線；delay控制動(dòng)畫延遲播放時(shí)間。簡(jiǎn)寫規(guī)則與應(yīng)用復(fù)合屬性transition支持多屬性過(guò)渡，通過(guò)逗號(hào)分隔；智能簡(jiǎn)寫可省略屬性名，若單時(shí)間參數(shù)默認(rèn)為

transition-duration屬性值，提升代碼簡(jiǎn)潔性。屬性取值解析屬性取值解析transition-property可指定具體屬性或設(shè)為all，不支持display。transition-duration單位為秒或毫秒，0值失效。transition-timing-function定義速度曲線，含linear、ease等多種預(yù)設(shè)。transition-delay支持正負(fù)值，控制動(dòng)畫開始時(shí)機(jī)。屬性取值限制transition-property無(wú)法作用于display屬性，需用visibility替代實(shí)現(xiàn)顯示隱藏過(guò)渡。transition-duration必須設(shè)置有效時(shí)長(zhǎng)，0值會(huì)導(dǎo)致過(guò)渡效果完全失效。多屬性過(guò)渡時(shí)，需用逗號(hào)分隔不同屬性組配置。貝塞爾曲線對(duì)應(yīng)各速度曲線對(duì)應(yīng)特定貝塞爾函數(shù)，linear為勻速直線變化，ease為慢快慢節(jié)奏，ease-in從慢漸快，ease-out快后轉(zhuǎn)慢，ease-in-out呈對(duì)稱加速減速過(guò)程。多屬性過(guò)渡方法010203多屬性過(guò)渡定義多屬性過(guò)渡指同時(shí)對(duì)多個(gè)CSS屬性應(yīng)用過(guò)渡效果，通過(guò)逗號(hào)分隔各屬性的過(guò)渡設(shè)置，實(shí)現(xiàn)復(fù)雜動(dòng)畫。多屬性過(guò)渡語(yǔ)法使用逗號(hào)分隔不同屬性的過(guò)渡配置，如transition:width2s,height2s;可簡(jiǎn)寫為transition:2s;讓所有變化屬性共用相同過(guò)渡。多屬性過(guò)渡示例懸停時(shí)同時(shí)改變寬度、高度和旋轉(zhuǎn)角度，通過(guò)簡(jiǎn)寫transition:2s;實(shí)現(xiàn)多屬性同步過(guò)渡，代碼簡(jiǎn)潔且效果流暢。CSS3過(guò)渡的局限性與替代方案010203過(guò)渡的局限性CSS3過(guò)渡依賴事件觸發(fā)，無(wú)法自動(dòng)播放，僅執(zhí)行一次且中間狀態(tài)難控制，對(duì)復(fù)雜動(dòng)畫支持不足。動(dòng)畫方案優(yōu)勢(shì)CSS3動(dòng)畫支持自動(dòng)循環(huán)與多關(guān)鍵幀控制，可精細(xì)設(shè)計(jì)運(yùn)動(dòng)路徑，適用于復(fù)雜交互場(chǎng)景。替代方案選擇當(dāng)需要循環(huán)動(dòng)畫或精確控制運(yùn)動(dòng)過(guò)程時(shí)，應(yīng)優(yōu)先采用CSS3動(dòng)畫實(shí)現(xiàn)復(fù)雜視覺效果。CSS3動(dòng)畫020301CSS3動(dòng)畫基礎(chǔ)CSS3的animation屬性可創(chuàng)建復(fù)雜動(dòng)畫，通過(guò)@keyframes定義關(guān)鍵幀，控制動(dòng)畫名稱、時(shí)長(zhǎng)、函數(shù)、延遲等屬性。動(dòng)畫關(guān)鍵幀設(shè)置使用@keyframes規(guī)則定義動(dòng)畫關(guān)鍵幀，指定元素在不同時(shí)間點(diǎn)的樣式變化，實(shí)現(xiàn)平滑過(guò)渡和動(dòng)態(tài)效果。動(dòng)畫屬性詳解包括animation-name命名動(dòng)畫、animation-duration設(shè)定時(shí)長(zhǎng)、animation-timing-function控制節(jié)奏、animation-delay延遲啟動(dòng)等核心屬性。@keyframes語(yǔ)法結(jié)構(gòu)123@keyframes語(yǔ)法規(guī)則定義動(dòng)畫名稱，通過(guò)百分比或關(guān)鍵詞設(shè)置起始、中間及結(jié)束狀態(tài)，精確控制動(dòng)畫各階段樣式變化。關(guān)鍵幀定義方式使用百分比（如25%）適用于多階段復(fù)雜動(dòng)畫，關(guān)鍵詞from/to適合簡(jiǎn)單起止動(dòng)畫，需包含0%和100%關(guān)鍵節(jié)點(diǎn)。關(guān)鍵幀注意事項(xiàng)必須包含起始（0%）和結(jié)束（100%）狀態(tài)，百分比按順序定義，確保動(dòng)畫流暢且符合預(yù)期效果。Animation動(dòng)畫綁定注意事項(xiàng)123基本規(guī)則通過(guò)規(guī)定至少以下兩項(xiàng)CSS3動(dòng)畫屬性，即可將動(dòng)畫綁定到選擇器。規(guī)定動(dòng)畫的名稱規(guī)定動(dòng)畫的時(shí)長(zhǎng)@keyframes代碼示例以下代碼設(shè)置動(dòng)畫效果為背景色從紅色變?yōu)辄S色@keyframesmyfirst{from{background:red;}to{background:yellow;}}Animation代碼示例以下代碼實(shí)現(xiàn)把"myfirst"動(dòng)畫捆綁到div元素，時(shí)長(zhǎng)為5秒。div{animation:myfirst5s;}animation-name功能與取值示例動(dòng)畫名稱綁定規(guī)則animation-name屬性用于綁定@keyframes定義的動(dòng)畫，取值需與關(guān)鍵幀名稱一致，默認(rèn)值為none表示無(wú)動(dòng)畫。名稱使用規(guī)范動(dòng)畫名稱需遵循CSS標(biāo)識(shí)符規(guī)則，區(qū)分大小寫且不可重復(fù)，通過(guò)屬性值建立動(dòng)畫與關(guān)鍵幀的關(guān)聯(lián)。復(fù)合屬性應(yīng)用在animation復(fù)合屬性中，animation-name為必需參數(shù)，需與duration配合使用，順序可自由但建議規(guī)范排列。animation-duration動(dòng)畫持續(xù)時(shí)間動(dòng)畫時(shí)長(zhǎng)定義animation-duration屬性用于設(shè)置動(dòng)畫持續(xù)時(shí)間，是動(dòng)畫創(chuàng)建流程中必需參數(shù)，影響動(dòng)畫節(jié)奏。時(shí)長(zhǎng)默認(rèn)規(guī)則animation-duration默認(rèn)值為0s（無(wú)效），需開發(fā)者明確設(shè)定時(shí)長(zhǎng)，以實(shí)現(xiàn)預(yù)期的動(dòng)畫播放效果與速度控制。時(shí)長(zhǎng)關(guān)鍵作用合理設(shè)置animation-duration可精準(zhǔn)控制動(dòng)畫節(jié)奏，結(jié)合其他屬性，能打造出流暢且符合設(shè)計(jì)需求的動(dòng)畫效果。animation-timing-function速率曲線速率曲線類型animation-timing-function定義動(dòng)畫速度變化，常見值有l(wèi)inear（勻速）ease（緩動(dòng)）ease-in（漸入）ease-out（漸出）ease-in-out（緩入緩出）速率曲線應(yīng)用不同速度曲線影響動(dòng)畫節(jié)奏，linear保持勻速，適用于平穩(wěn)運(yùn)動(dòng)；ease實(shí)現(xiàn)加速減速，讓動(dòng)畫更自然；開發(fā)時(shí)根據(jù)效果需求選擇合適曲線。默認(rèn)速率曲線animation-timing-function默認(rèn)值為ease，若未設(shè)置則按此速度曲線播放動(dòng)畫，呈現(xiàn)先加速后減速的常見動(dòng)畫效果。animation-delay動(dòng)畫延遲時(shí)間030201動(dòng)畫延遲啟動(dòng)animation-delay屬性用于設(shè)置動(dòng)畫開始前的延遲時(shí)間，單位為秒或毫秒，使元素在指定時(shí)間后才開始播放動(dòng)畫。延遲效果應(yīng)用通過(guò)animation-delay可控制動(dòng)畫的起始時(shí)刻，實(shí)現(xiàn)元素按順序依次啟動(dòng)動(dòng)畫，增強(qiáng)頁(yè)面動(dòng)態(tài)效果的層次感。多場(chǎng)景適配該屬性適用于需要非即時(shí)啟動(dòng)的動(dòng)畫場(chǎng)景，如逐步展示內(nèi)容，或避免頁(yè)面加載時(shí)動(dòng)畫同時(shí)觸發(fā)造成的性能問(wèn)題。animation-iteration-count動(dòng)畫循環(huán)次數(shù)010203動(dòng)畫迭代計(jì)數(shù)animation-iteration-count控制播放次數(shù)，可設(shè)為具體數(shù)值或無(wú)限循環(huán)，影響動(dòng)畫重復(fù)效果。迭代計(jì)數(shù)取值屬性值可為數(shù)字（如3次），或infinite（無(wú)限），默認(rèn)值為1次，決定動(dòng)畫循環(huán)規(guī)則。實(shí)際應(yīng)用場(chǎng)景通過(guò)設(shè)置迭代次數(shù)實(shí)現(xiàn)單次、多次或無(wú)限循環(huán)動(dòng)畫，配合其他屬性打造復(fù)雜動(dòng)效。animation-direction動(dòng)畫運(yùn)動(dòng)方向Part01Part03Part02動(dòng)畫方向控制animation-direction屬性定義CSS動(dòng)畫播放方向，支持正向、反向及交替循環(huán)模式，實(shí)現(xiàn)復(fù)雜運(yùn)動(dòng)軌跡控制。四類運(yùn)動(dòng)模式normal正向播放，reverse逆向播放，alternate正反交替，alternate-reverse反正向交替，滿足不同路徑需求。交替循環(huán)應(yīng)用alternate系列值實(shí)現(xiàn)動(dòng)畫正反向循環(huán)交替，適用于需要元素往返運(yùn)動(dòng)的復(fù)雜路徑動(dòng)畫場(chǎng)景。animation-fill-mode動(dòng)畫之外狀態(tài)010203動(dòng)畫前狀態(tài)保持animation-fill-mode控制動(dòng)畫執(zhí)行前后元素樣式狀態(tài)，none為默認(rèn)不保留，forwards保持結(jié)束時(shí)樣式，backwards應(yīng)用初始樣式，both兼顧首尾狀態(tài)。屬性應(yīng)用場(chǎng)景forwards常用于維持動(dòng)畫結(jié)束展示效果，如懸浮提示框停留；backwards適合動(dòng)畫前準(zhǔn)備特殊樣式，像加載前模糊處理；both在循環(huán)動(dòng)畫中確保首尾銜接自然。與其他屬性配合搭配animation-direction實(shí)現(xiàn)復(fù)雜循環(huán)，如交替往返時(shí)用both保證狀態(tài)連貫；和play-state結(jié)合，暫停恢復(fù)后仍按fill-mode規(guī)則呈現(xiàn)對(duì)應(yīng)狀態(tài)，提升交互體驗(yàn)。animation-play-state動(dòng)畫運(yùn)行狀態(tài)010203動(dòng)畫播放控制animation-play-state屬性用于控制動(dòng)畫的播放狀態(tài)，可設(shè)置為running（運(yùn)行）或paused（暫停），實(shí)現(xiàn)動(dòng)畫的啟?？刂?。交互式播放控制結(jié)合:hover等偽類，通過(guò)animation-play-state:paused實(shí)現(xiàn)懸停暫停動(dòng)畫效果，增強(qiáng)用戶交互體驗(yàn)。狀態(tài)切換機(jī)制該屬性通過(guò)CSS規(guī)則動(dòng)態(tài)切換，支持JavaScript聯(lián)動(dòng)控制，適用于需要人工干預(yù)的動(dòng)畫場(chǎng)景，如游戲、H5交互設(shè)計(jì)。動(dòng)畫簡(jiǎn)寫語(yǔ)法動(dòng)畫簡(jiǎn)寫語(yǔ)法animation屬性可簡(jiǎn)寫，參數(shù)之間使用空格隔開，如有未聲明的參數(shù)取其默認(rèn)值。如果只提供了一個(gè)時(shí)間參數(shù)，無(wú)論其位置在何處均默認(rèn)為是transition-duration屬性值。。必需參數(shù)規(guī)則animation簡(jiǎn)寫時(shí)，name與duration為必需參數(shù)，缺少則無(wú)效，確保動(dòng)畫基本設(shè)置正確。多動(dòng)畫組合方式利用逗號(hào)分隔，在animation中實(shí)現(xiàn)多動(dòng)畫組合，靈活控制元素多種動(dòng)畫效果呈現(xiàn)。04CSS3新增屬性新增背景屬性030201背景裁剪（background-clip）控制背景繪制區(qū)域，屬性值包括border-box：裁剪到邊框盒padding-box：裁剪到內(nèi)邊距框content-box：裁剪到內(nèi)容框示例展示不同的背景裁剪效果。背景定位（background-origin）設(shè)定背景圖片定位基準(zhǔn)，有三種屬性值border-box：相對(duì)于邊框盒來(lái)定位padding-box：相對(duì)于內(nèi)邊距框來(lái)定位content-box：相對(duì)于內(nèi)容框來(lái)定位fixed定位時(shí)該屬性無(wú)效。背景尺寸調(diào)整（background-size）用于控制背景圖片尺寸，關(guān)鍵值有cover：背景圖片等比例縮放到完全覆蓋容器contain：背景圖片等比例縮放到寬度或高度與容器保持一致也支持具體寬高尺寸設(shè)定，適應(yīng)不同容器場(chǎng)景。背景簡(jiǎn)寫與多重背景背景簡(jiǎn)寫屬性語(yǔ)法骨架為background:image||repeat||position/size||origin||clip||attachment||color，background-size需通過(guò)position/size格式聲明，如center/cover表示居中且全覆蓋。多重背景技術(shù)語(yǔ)法格式：backgroud-image:url(top-image.jpg),url(middle-image.jpg),url(bottom-image.jpg)具備單元素多層疊加能力，圖層順序由聲明順序決定，語(yǔ)法結(jié)構(gòu)清晰，各層可獨(dú)立配置位置、尺寸、重復(fù)等屬性，減少HTML容器嵌套。核心優(yōu)勢(shì)與展示視覺上可創(chuàng)建復(fù)雜層次，有精準(zhǔn)控制優(yōu)勢(shì)，配圖展示多重背景效果及圖層堆疊順序。新增顏色與漸變HSL/HSLA顏色模式HSL以色調(diào)、飽和度、亮度定義顏色，范圍明確。HSLA增加透明度參數(shù)，支持半透明效果，提升設(shè)計(jì)靈活性與視覺層次。下面的代碼表示段落的背景色為半透明的藍(lán)色。p{background:hsl(240,100%,50%,0.5);}線性漸變（linear-gradient）語(yǔ)法含方向與顏色?？奎c(diǎn)，支持角度和關(guān)鍵詞控制?？芍谱鳁l紋、彩虹等效果，增強(qiáng)背景與元素動(dòng)態(tài)視覺表現(xiàn)力。徑向漸變（radial-gradient）通過(guò)形狀、尺寸、位置參數(shù)定義漸變，支持圓形和橢圓。實(shí)現(xiàn)光斑、放射狀紋理，豐富頁(yè)面背景與裝飾效果。010302線性漸變123線性漸變語(yǔ)法語(yǔ)法為linear-gradient(方向,顏色停靠點(diǎn))下面的代碼實(shí)現(xiàn)了div元素背景色為從紅色到藍(lán)色（從上到下漸變）的一個(gè)漸變色。div{width:100px;height:100px;background-image:linear-gradient(red,blue);}方向控制方式方向支持角度（如45deg）關(guān)鍵詞（如totopright）精準(zhǔn)定位漸變起始與結(jié)束位置。示例：#grad1{ background:linear-gradient(tobottomright,red,blue);}高級(jí)應(yīng)用場(chǎng)景可制作條紋效果、彩虹漸變等，通過(guò)調(diào)整色階距離實(shí)現(xiàn)重復(fù)線性漸變視覺效果。示例：#grad3{ background:linear-gradient(toright,red,orange,yellow,green,blue,indigo,violet);}徑向漸變010203徑向漸變語(yǔ)法語(yǔ)法為radial-gradient，含位置參數(shù)，形狀、尺寸，可定義顏色停靠點(diǎn)。下面的代碼實(shí)現(xiàn)了div元素背景色為從中心點(diǎn)開始由紅色到藍(lán)色的一個(gè)徑向漸變。div{width:100px;height:100px;background-image:radial-gradient(red,blue);}參數(shù)詳解中心位置可采用百分比、長(zhǎng)度或關(guān)鍵詞形狀有圓和橢圓，尺寸可選最近邊、角或最遠(yuǎn)邊、角，位置默認(rèn)居中可自定義。示例：#grad3{ background:radial-gradient(closest-sidecircleat50px50px,yellow,red);}示例效果圖5-43展示橢圓與圓形漸變對(duì)比，呈現(xiàn)不同視覺效果。重復(fù)漸變重復(fù)漸變類型包含重復(fù)線性漸變與重復(fù)徑向漸變，語(yǔ)法分別為：repeating-linear-gradientrepeating-radial-gradient重復(fù)線性漸變示例div{width:100px;height:100px;background:repeating-linear-gradient(45deg,red0px,red20px,blue20px,blue40px);}重復(fù)徑向漸變示例div{width:200px;height:200px;background:repeating-radial-gradient(red0px,red20px,blue20px,blue40px);}倒影123倒影屬性box-reflect實(shí)現(xiàn)元素倒影，Webkit內(nèi)核支持，可設(shè)置方向、間距與遮罩效果，增強(qiáng)頁(yè)面視覺層次感。語(yǔ)法與方向語(yǔ)法格式為：-webkit-box-reflect：none|<direction><offset>?<mask-box-image>?方向值有below/above/left/right，控制倒影呈現(xiàn)位置與效果。示例與效果四種倒影形式代碼：#reflect1{ -webkit-box-reflect:below}#reflect2{ -webkit-box-reflect:below10px;}#reflect3{ -webkit-box-reflect:below0linear-gradient(tobottom,rgba(255,255,255,0),rgba(255,255,255,.9));}#reflect4{ -webkit-box-reflect:right; }遮罩231遮罩核心屬性遮罩通過(guò)mask-image設(shè)置透明圖或漸變，mask-repeat控制重復(fù)方式，mask-position定位，mask-size調(diào)整尺寸，實(shí)現(xiàn)元素透明度與形狀控制。遮罩復(fù)合寫法使用復(fù)合屬性mask可同時(shí)定義：圖片、位置、尺寸及重復(fù)方式，如mask:url(star.png)repeatcenter/25%;遮罩應(yīng)用注意在一些瀏覽器中，出于安全考慮，本地文件可能不允許使用mask屬性。如果是本地文件測(cè)試，嘗試在本地服務(wù)器上運(yùn)行頁(yè)面，而不是直接打開本地文件。05CSS3彈性盒模型誕生背景彈性盒模型誕生2009年W3C提出，解決傳統(tǒng)布局靈活性不足，用于響應(yīng)式布局，提升頁(yè)面適應(yīng)性。核心概念解析含彈性容器（display:flex）與項(xiàng)目，優(yōu)勢(shì)為簡(jiǎn)便、完整、響應(yīng)式，現(xiàn)代瀏覽器均支持。布局變革意義改變傳統(tǒng)布局模式，實(shí)現(xiàn)靈活空間分配與對(duì)齊，為網(wǎng)頁(yè)設(shè)計(jì)帶來(lái)高效解決方案?；緩椥院心Ｐ驮O(shè)置010203彈性盒模型基礎(chǔ)彈性盒子由容器和項(xiàng)目組成定義彈性容器的基本格式為：display:flex;/*將對(duì)象作為彈性伸縮盒顯示*/或：display:inline-flex;/*將對(duì)象作為內(nèi)聯(lián)塊級(jí)彈性伸縮盒顯示*/彈性項(xiàng)目概念彈性容器內(nèi)包含了一個(gè)或多個(gè)彈性項(xiàng)目。彈性項(xiàng)目通常在彈性盒子內(nèi)一行顯示。默認(rèn)情況下每個(gè)彈性容器只有一行彈性項(xiàng)目。當(dāng)一個(gè)容器被設(shè)置為Flex布局以后，其子元素（彈性項(xiàng)目）的float、clear和vertical-align屬性將失效?；A(chǔ)示例例5-29為基礎(chǔ)示例，其中容器是ul元素，彈性項(xiàng)目是li元素雙軸結(jié)構(gòu)概述彈性容器雙軸結(jié)構(gòu)彈性容器基于主軸（水平）和交叉軸（垂直）構(gòu)建，定義項(xiàng)目排列方向與空間尺寸。主軸與交叉軸解析主軸控制元素水平/垂直排列，交叉軸決定垂直/水平布局，兩者共同構(gòu)成雙軸坐標(biāo)系。關(guān)鍵術(shù)語(yǔ)與示意圖通過(guò)MainSize、CrossSize等術(shù)語(yǔ)量化布局空間，圖5-55直觀展示雙軸結(jié)構(gòu)關(guān)系。flex-direction屬性作用定義主軸方向flex-direction屬性用于確定彈性容器的主軸方向，控制項(xiàng)目在主軸上的排列順序。取值與效果flex-direction有row、row-reverse、column、column-reverse四個(gè)取值，分別對(duì)應(yīng)不同方向和起點(diǎn)。注意事項(xiàng)使用column或column-reverse時(shí)需注意行高可能導(dǎo)致內(nèi)容溢出，需合理設(shè)置樣式。flex-wrap屬性作用132換行控制屬性flex-wrap控制項(xiàng)目在主軸排滿時(shí)是否換行，有以下幾種取值范圍。nowrap：不換行。該值為默認(rèn)值。wrap：沿著交叉軸的方向換行。wrap-reverse：沿著交叉軸反方向換行應(yīng)用場(chǎng)景在響應(yīng)式布局中，flex-wrap可自適應(yīng)換行，確保內(nèi)容在不同屏幕尺寸下合理展示。注意事項(xiàng)啟用換行后需注意多行對(duì)齊問(wèn)題。flex-direction與flex-wrap組合復(fù)合屬性flex-flowflex-flow簡(jiǎn)寫flex-direction與flex-wrap，定義主軸方向及換行規(guī)則，默認(rèn)值為rownowrap。多場(chǎng)景組合效果通過(guò)flex-flow組合控制布局流向，如columnwrap實(shí)現(xiàn)垂直排列并自動(dòng)換行，適應(yīng)復(fù)雜排版需求。實(shí)踐應(yīng)用注意點(diǎn)使用flex-flow需注意豎直方向可能因內(nèi)容高度導(dǎo)致溢出，需結(jié)合項(xiàng)目尺寸調(diào)整容器約束。010203justify-content屬性作用123主軸對(duì)齊方式j(luò)ustify-content定義項(xiàng)目在主軸的對(duì)齊方式，含flex-start、flex-end、center、space-between、space-around五種，用于導(dǎo)航欄等間距控制。屬性作用解析該屬性通過(guò)調(diào)整項(xiàng)目在主軸的位置，實(shí)現(xiàn)不同對(duì)齊效果，如默認(rèn)起點(diǎn)對(duì)齊、終點(diǎn)對(duì)齊、居中及等距分布，滿足多種布局需求。應(yīng)用場(chǎng)景示例在導(dǎo)航欄設(shè)計(jì)中，利用justify-content可實(shí)現(xiàn)按鈕等間距排列；卡片布局時(shí)，可控制卡片在主軸的對(duì)齊方式，提升頁(yè)面美觀度。align-items屬性作用屬性核心作用align-items控制單行項(xiàng)目在交叉軸的對(duì)齊方式，統(tǒng)一調(diào)整元素布局。對(duì)齊方式詳解含stretch默認(rèn)撐滿、flex-start起點(diǎn)、flex-end終點(diǎn)、center居中、baseline基線對(duì)齊五種模式?；€特性注意baseline對(duì)齊受文字大小影響，需注意不同字體尺寸下的排版效果差異。010203align-content屬性作用屬性作用控制多行項(xiàng)目在交叉軸的對(duì)齊，需啟用flex-wrap:wrap。6種對(duì)齊方式包含stretch、flex-start、flex-end、center、space-between、space-around等效果。注意事項(xiàng)單行布局時(shí)此屬性無(wú)效，使用時(shí)需注意避免內(nèi)容溢出。彈性項(xiàng)目屬性概述覆蓋全局設(shè)置效果項(xiàng)目屬性優(yōu)先級(jí)高于容器屬性，例如align-self可覆蓋align-items的對(duì)齊設(shè)置。屬性優(yōu)先級(jí)優(yōu)先使用flex簡(jiǎn)寫，復(fù)雜布局可組合order和align-self屬性，提升布局效率與靈活性。最佳實(shí)踐彈性項(xiàng)目屬性可覆蓋容器全局設(shè)置，如對(duì)齊、排序等，實(shí)現(xiàn)單個(gè)項(xiàng)目的特殊行為控制。order屬性作用010203控制項(xiàng)目視覺順序order屬性通過(guò)整數(shù)值調(diào)整項(xiàng)目在容器內(nèi)的排列優(yōu)先級(jí)，值越小越靠前，默認(rèn)值為0保持原始順序。支持負(fù)值與同值規(guī)則order可設(shè)負(fù)整數(shù)實(shí)現(xiàn)前移，同值項(xiàng)目則按源碼順序排列，確保布局邏輯的可控性與可預(yù)測(cè)性。效果演示與注意事項(xiàng)例如，在例5-29的樣式表中增加以下代碼：li:nth-child(5){order:-1;} li:nth-child(1){order:-2;}li:nth-child(3){order:2;}flex-grow屬性作用定義項(xiàng)目放大比例flex-grow屬性用于設(shè)定彈性項(xiàng)目在剩余空間中的放大比例，默認(rèn)值為0即不放大，通過(guò)無(wú)單位數(shù)字設(shè)置可控制元素占據(jù)多余空間的份額。等分與多倍空間分配當(dāng)flex-grow設(shè)為相同值時(shí)，項(xiàng)目等分剩余空間；若設(shè)為不同值，則按比例分配，如設(shè)為2時(shí)占雙倍空間，且在多行布局中每行獨(dú)立計(jì)算空間分配。特殊場(chǎng)景應(yīng)用示例在實(shí)際布局中，如導(dǎo)航欄、卡片網(wǎng)格等響應(yīng)式組件，合理運(yùn)用flex-grow可實(shí)現(xiàn)元素隨容器變化靈活調(diào)整尺寸，適應(yīng)不同屏幕尺寸和布局需求。flex-shrink屬性作用屬性作用定義項(xiàng)目在空間不足時(shí)的縮小比例，控制元素壓縮行為。核心特性默認(rèn)值1等比縮放，可設(shè)無(wú)單位數(shù)值，內(nèi)容尺寸為縮小極限。效果演示flex-shrink:0不縮小會(huì)溢出，flex-shrink:3按三倍比例壓縮。flex-basis屬性作用基準(zhǔn)尺寸設(shè)定設(shè)置項(xiàng)目在分配空間前的初始主軸尺寸，影響后續(xù)布局計(jì)算。默認(rèn)值與設(shè)置默認(rèn)為auto，可設(shè)具體值或百分比，決定初始寬度。最佳實(shí)踐應(yīng)用推薦flex-basis:auto;配合flex-grow實(shí)現(xiàn)自適應(yīng)布局。010302flex簡(jiǎn)寫屬性作用復(fù)合屬性flex簡(jiǎn)寫flex為彈性項(xiàng)目屬性的簡(jiǎn)寫，可合并flex-grow、flex-shrink與flex-basis，簡(jiǎn)化代碼書寫。黃金配置方案flex有常用配置，如flex:1等分空間，flex:auto自適應(yīng)縮放，flex:none固定尺寸不縮放。使用場(chǎng)景flex適用于響應(yīng)式組件，像導(dǎo)航欄、卡片網(wǎng)格布局，能靈活適配不同屏幕尺寸。align-self屬性作用Part01Part03Part02獨(dú)立對(duì)齊屬性align-self覆蓋容器align-items設(shè)置，支持stretch/center等值，實(shí)現(xiàn)單項(xiàng)目獨(dú)立對(duì)齊。核心特性解析默認(rèn)繼承容器對(duì)齊，可設(shè)flex-start/baseline等值，精準(zhǔn)控制單個(gè)元素對(duì)齊方式。效果演示示例圖5-72展示不同對(duì)齊模式，圖5-73演示基線對(duì)齊，通過(guò)font-size驗(yàn)證基線位置變化。標(biāo)準(zhǔn)與替代盒模型010203標(biāo)準(zhǔn)盒模型解析標(biāo)準(zhǔn)盒模型包含內(nèi)容、內(nèi)邊距、邊框和外邊距。內(nèi)容是實(shí)際顯示的素材，內(nèi)邊距增加內(nèi)容與邊框間距，邊框包裹內(nèi)容與內(nèi)邊距，外邊距隔開元素，各部分共同構(gòu)成元素空間。替代盒模型特點(diǎn)替代盒模型簡(jiǎn)化計(jì)算，將內(nèi)邊距和邊框納入元素寬度和高度計(jì)算。此模式下，設(shè)置寬高時(shí)已含內(nèi)邊距與邊框，減少布局計(jì)算復(fù)雜性，方便特定場(chǎng)景下的快速排版。兩者差異對(duì)比標(biāo)準(zhǔn)與替代盒模型在寬高計(jì)算上差異顯著。標(biāo)準(zhǔn)盒模型width/height僅定義內(nèi)容區(qū)域替代盒模型width/height包含內(nèi)容區(qū)域、內(nèi)邊距（padding）邊框（border）瀏覽器支持現(xiàn)狀010203現(xiàn)代瀏覽器的兼容性現(xiàn)代瀏覽器（Chrome/Firefox/Safari/Edge）默認(rèn)采用content-box，但均支持通過(guò)box-sizing:border-box主動(dòng)啟用替代盒模型。早期IE瀏覽器的“怪異模式”早期IE瀏覽器因未遵循標(biāo)準(zhǔn)引發(fā)兼容問(wèn)題，此特性曾被誤稱為"怪異模式"。CSS3的box-sizing屬性box-sizing:content-box，定義元素使用標(biāo)準(zhǔn)盒模型。寬度和高度分別應(yīng)用到元素的內(nèi)容框。box-sizing:border-box，定義元素使用替代盒模型。為元素設(shè)定的寬度和高度決定了元素的邊框盒替代盒模型主要適用場(chǎng)景030201響應(yīng)式布局?固定容器總尺寸，適配動(dòng)態(tài)內(nèi)容。柵格系統(tǒng)?精確控制列寬，避免padding導(dǎo)致布局錯(cuò)位。表單控件確保輸入框與按鈕尺寸一致，提升UI一致性。rem與px單位應(yīng)用020301rem與px單位概念px是像素單位，相對(duì)屏幕分辨率固定大小。rem是相對(duì)根元素字體大小的單位，可隨根元素靈活變化，在不同設(shè)備和瀏覽器中更具適應(yīng)性。rem單位優(yōu)勢(shì)體現(xiàn)rem單位在響應(yīng)式設(shè)計(jì)中優(yōu)勢(shì)明顯，能根據(jù)屏幕寬度自動(dòng)調(diào)整元素尺寸，保證頁(yè)面布局合理，提升用戶體驗(yàn)，減少適配工作量。px單位適用場(chǎng)景px單位在對(duì)元素尺寸要求精準(zhǔn)固定時(shí)適用，如圖標(biāo)設(shè)計(jì)、特定分辨率的精細(xì)排版等，能確保元素顯示效果的一致性和準(zhǔn)確性。例5-32：使用rem作為父元素的單位，利用替代盒模型的原理定義帶邊框的子元素的寬度為父元素的50%calc()函數(shù)核心概念12功能定義動(dòng)態(tài)計(jì)算CSS長(zhǎng)度值（支持混合單位）語(yǔ)法：calc(<數(shù)學(xué)表達(dá)式>)關(guān)鍵特性?運(yùn)算符前后??必須保留空格??

（如：100%-10px）

?支持四則運(yùn)算

（+,

-,

*,

/）

?遵循標(biāo)準(zhǔn)數(shù)學(xué)優(yōu)先級(jí)

（支持括號(hào)）

?兼容所有長(zhǎng)度單位

（px,%,rem,em等）實(shí)戰(zhàn)案例123場(chǎng)景需求??例5-33：創(chuàng)建橫跨屏幕的Div，兩側(cè)保留50px固定間隙代碼實(shí)現(xiàn)??核心價(jià)值??隨瀏覽器寬度自動(dòng)調(diào)整內(nèi)容區(qū)域保持兩側(cè)固定間距不變?yōu)g覽器兼容性策略支持情況??（表5-11）最佳實(shí)踐瀏覽器原生支持前綴版本Chrome26+19+(-webkit-)Firefox16+4+(-moz-)Safari7+6+(-webkit-)Edge12+-Opera15+-06響應(yīng)式布局和自適應(yīng)布局核心概念與差異010203響應(yīng)式布局定義EthanMarcotte2010年提出，一套代碼適配多終端，布局隨屏幕尺寸變化。自適應(yīng)布局定義內(nèi)容比例縮放適應(yīng)不同屏幕，小屏幕易擁擠需單獨(dú)設(shè)計(jì)移動(dòng)版。本質(zhì)區(qū)別對(duì)比響應(yīng)式布局結(jié)構(gòu)可變，自適應(yīng)布局內(nèi)容比例不變，二者各有特點(diǎn)。響應(yīng)式核心技術(shù)：媒體查詢媒體查詢語(yǔ)法結(jié)構(gòu)@media[not|only]mediatype[and](mediafeature){CSS-Code;}關(guān)鍵要素解析媒體類型：all所有媒體screen（屏幕）print（打?。﹕peech（朗讀設(shè)備）媒體特性：width寬度min-width最小寬度max-width最大寬度orientation:portrait豎屏orientation:landscape橫屏實(shí)踐應(yīng)用要點(diǎn)內(nèi)部樣式寫CSS文件外部按設(shè)備加載同時(shí)要注意樣式定義順序（媒體查詢置后避免覆蓋）。移動(dòng)端適配基石：視口(Viewport)??132核心概念虛擬顯示區(qū)域（通常大于物理屏幕）控制網(wǎng)頁(yè)縮放與布局關(guān)鍵配置??行業(yè)標(biāo)準(zhǔn)自適應(yīng)布局實(shí)現(xiàn)方案單位選擇策略REM布局原理單位適用場(chǎng)景局限性px固定尺寸元素?zé)o法自適應(yīng)%寬度自適應(yīng)高度計(jì)算困難em相對(duì)父級(jí)字體嵌套計(jì)算復(fù)雜??rem????根元素相對(duì)單位????最佳移動(dòng)端方案??根據(jù)設(shè)計(jì)稿尺寸設(shè)定基準(zhǔn)值（750px→1rem=75px）元素尺寸轉(zhuǎn)換：width:calc(120/75*1rem)動(dòng)態(tài)調(diào)整根字號(hào)font-size動(dòng)態(tài)根字號(hào)調(diào)整技術(shù)123方案A：媒體查詢分段設(shè)置??/*5種屏幕尺寸適配*/@mediaonlyscreenand(min-width:401px){html{font-size:25px!important;}}@mediaonlyscreenand(min-width:428px){html{font-size:26.75px!important;}}@mediaonlyscreenand(min-width:481px){html{font-size:30px!important;}}@mediaonlyscreenand(min-width:569px){html{font-size:35px!important;}}@mediaonlyscreenand(min-width:641px){html{font-size:40px!important;}}方案B：JS動(dòng)態(tài)計(jì)算（推薦）??優(yōu)勢(shì)對(duì)比????媒體查詢→針對(duì)特定設(shè)備JS方案→全設(shè)備無(wú)縫適配//JS代碼：functionchangeRem(){constwidth=document.documentElement.clientWidth;document.documentElement.style.fontSize=width/10+'px’;}//監(jiān)聽窗口變化window.addEventListener('resize',changeRem);響應(yīng)式VS自適應(yīng)應(yīng)用決策??維度??響應(yīng)式布局自適應(yīng)布局??適用場(chǎng)景??多終端結(jié)構(gòu)變化需求保持內(nèi)容比例一致??開發(fā)成本??高（需設(shè)計(jì)多套布局）中（單位轉(zhuǎn)換計(jì)算）??性能影響??可能加載冗余代碼更高效??典型案例??媒體網(wǎng)站（圖文重組）電商商品詳情頁(yè)??技術(shù)棧??媒體查詢+流式布局REM+Viewport+JSTHANKS感謝觀看網(wǎng)頁(yè)設(shè)計(jì)與Web前端開發(fā)案例教程第6章使用JavaScript腳本CONTENT目錄初識(shí)JavaScript01JavaScript基本元素02操作屬性與樣式03條件語(yǔ)句04循環(huán)語(yǔ)句05JavaScript函數(shù)06對(duì)象操作語(yǔ)句07JavaScript常用內(nèi)置對(duì)象08DOM對(duì)象09BOM對(duì)象10localStorage對(duì)象及操作1101初識(shí)JavaScriptJS簡(jiǎn)介：發(fā)展歷程、組成、安全性發(fā)展歷程LiveScript→JavaScript→ECMAScript標(biāo)準(zhǔn)組成要素ECMAScript（核心語(yǔ)法）+DOM（文檔對(duì)象）+BOM（瀏覽器對(duì)象）安全性特點(diǎn)禁止訪問(wèn)本地硬盤不允許對(duì)網(wǎng)絡(luò)中的文本修改或刪除使用方式：標(biāo)簽嵌入、外部引用、事件屬性標(biāo)簽嵌入在HTML文檔中，可直接通過(guò)標(biāo)簽嵌入JavaScript代碼，將腳本放置于標(biāo)簽內(nèi)，能實(shí)現(xiàn)頁(yè)面交互邏輯，隨頁(yè)面加載而執(zhí)行，方便快捷地添加簡(jiǎn)單功能。如：<script>for(i=0;i<3;i++)document.write("Hello!");</script>外部引用把JavaScript代碼寫在獨(dú)立文件中，通過(guò)在HTML中引用。這種方式可實(shí)現(xiàn)代碼復(fù)用，多個(gè)頁(yè)面共享同一腳本，便于維護(hù)和管理，提升開發(fā)效率。如：<scriptsrc="js/script.js"></script>事件屬性HTML元素可通過(guò)事件屬性直接綁定JavaScript代碼。

如：<ahref="javascript:alert(newDate());">單擊顯示當(dāng)前時(shí)間</a>或<inputtype="button"value="單擊顯示當(dāng)前時(shí)間"onclick="alert(newDate());"/>JavaScript代碼規(guī)范嚴(yán)格區(qū)分大小寫字符串區(qū)分大小寫變量名、函數(shù)名、關(guān)鍵字大小寫敏感英文輸入法所有內(nèi)置API和符號(hào)都是英文輸入法，也就是半角符號(hào)。書寫格式忽略語(yǔ)句間空白，即語(yǔ)句間的空格、空行、縮進(jìn)等。使用這些格式的目的：使程序更加清晰，可讀性更高例如，可以使用Tab鍵縮進(jìn)，不同的語(yǔ)句應(yīng)當(dāng)換行。分號(hào)的使用基礎(chǔ)規(guī)范：完整語(yǔ)句結(jié)尾需加分號(hào)（推薦顯式添加）換行符可能隱式插入分號(hào)循環(huán)結(jié)構(gòu)或者選擇結(jié)構(gòu)的條件語(yǔ)句后面不需要用分號(hào)注釋語(yǔ)句單行的注釋以//開始，其格式為：//注釋內(nèi)容多行注釋以/*開頭，以*/結(jié)尾，其格式為：/*注釋內(nèi)容注釋內(nèi)容*/彈窗與調(diào)試方法????用途??及示例返回值示例效果alert()信息通知alert("你好，我是一個(gè)警告框！");undefinedconsole.log()調(diào)試輸出a=5;b=6;c=a+b;console.log(c);-confirm()二元選擇confirm("按下按鈕");true/falseprompt()獲取用戶輸入prompt("請(qǐng)輸入你的名字","HarryPotter");string/null02JavaScript基本元素?cái)?shù)據(jù)類型類型示例特點(diǎn)number（數(shù)值）3.14

/

NaN包含特殊值string（字符串）"Hello"單/雙引號(hào)包裹boolean（布爾）true

/

false條件判斷基礎(chǔ)null（空）leta=null;空對(duì)象指針undefined（未定義）letb;未初始化變量object（對(duì)象）{name:"Tom"}鍵值對(duì)集合symbol（符號(hào)）-ES6引入,避免屬性名沖突JavaScript常量——基本概念定義不可修改的固定值（字面量）與變量核心區(qū)別：初始化后不可變感ES5vsES6??ES5????ES6??無(wú)命名常量const關(guān)鍵字聲明命名常量直接使用字面量（如0,

"hi"）語(yǔ)法：constPI=3.14;JavaScript常量——六大核心規(guī)則不可重賦值PI=3.15;→靜默失敗塊級(jí)作用域??只在{}內(nèi)有效（同let）??禁止重復(fù)聲明constX=1;constX=2;→報(bào)錯(cuò)聲明即賦值??constX;→語(yǔ)法錯(cuò)誤無(wú)變量提升先聲明后使用作用域隔離??內(nèi)外同名常量互不影響JavaScript常量類型常量類型????子類/形式????描述????表示方式示例????特殊說(shuō)明????數(shù)值型常量????整型??整數(shù)，支持十進(jìn)制/八進(jìn)制/十六進(jìn)制42（十進(jìn)制）0o52（八進(jìn)制52，十進(jìn)制42）0x2A（十六進(jìn)制2A，十進(jìn)制42）ES5中以0開頭的八進(jìn)制寫法已過(guò)時(shí)（如020）??實(shí)型/浮點(diǎn)型??小數(shù)，支持標(biāo)準(zhǔn)寫法或科學(xué)計(jì)數(shù)法3.14（標(biāo)準(zhǔn)）6.02e23（科學(xué)計(jì)數(shù)法，6.02×1023）??布爾型常量??-邏輯值，表示真/假true（真）false（假）??嚴(yán)禁??用1/0替代（與C語(yǔ)言不同）??字符串型常量????常規(guī)字符串??引號(hào)包裹的文本"Hello'World'單/雙引號(hào)等效??特殊字符常量??反斜杠轉(zhuǎn)義的控制字符（需在字符串中使用）詳見下頁(yè)轉(zhuǎn)義字符表??空值常量??-表示空或無(wú)定義null（主動(dòng)賦空值）undefined（未定義默認(rèn)值）區(qū)別：null是類型為object的值JavaScript特殊字符常量轉(zhuǎn)義字符????名稱????功能說(shuō)明????使用示例????輸出結(jié)果??\b退格(Backspace)刪除前一個(gè)字符"a\bc""c"（終端環(huán)境）\f換頁(yè)(FormFeed)打印機(jī)分頁(yè)符"Page1\fPage2"打印時(shí)分頁(yè)\n換行(NewLine)光標(biāo)移到下一行行首"Line1\nLine2"兩行文本\r回車(CarriageReturn)光標(biāo)回行首"Hello\rWorld""World"（覆蓋效果）\t水平制表符(Tab)插入Tab空白"Name:\tTom""Name:Tom"（4空格）\'單引號(hào)在單引號(hào)字符串中顯示單引號(hào)'It\'sOK'"It'sOK"\"雙引號(hào)在雙引號(hào)字符串中顯示雙引號(hào)"Hesaid:\"Hi\""'Hesaid:"Hi"'\\反斜杠顯示字面反斜杠"C:\\Windows""C:\Windows"運(yùn)算符與表達(dá)式概述表達(dá)式定義變量、常量與運(yùn)算符的組合（算術(shù)/字符串/布爾表達(dá)式）運(yùn)算符作用??關(guān)聯(lián)值進(jìn)行計(jì)算或比較操作數(shù)分類??類型????操作數(shù)數(shù)量????示例??雙目運(yùn)算符2個(gè)a+b,

"Hi"+"!"單目運(yùn)算符1個(gè)-5,

i++算術(shù)運(yùn)算符運(yùn)算符????描述????示例????結(jié)果??(y=5)+加x=y+27-減x=y-23*乘x=y*210/除x=y/22.5%取模x=y%21++前置遞增x=++y6--前置遞減x=--y4賦值運(yùn)算符運(yùn)算符????示例????等價(jià)形式????結(jié)果??(x=10,y=5)=x=y-x=5+=x+=yx=x+y15-=x-=yx=x-y5*=x*=yx=x*y50/=x/=yx=x/y2%=x%=yx=x%y0比較運(yùn)算符運(yùn)算符????描述????示例??(x=5)??結(jié)果??==值相等x=="5"true===值與類型相等x==="5"false!=不相等x!=8true!==值或類型不等x!=="5"true>

大于x>3true<

小于x<8true>=大于等于x>=5true<=小于等于x<=5true邏輯運(yùn)算符??運(yùn)算符????描述????示例??(x=6,y=3)??結(jié)果??&&邏輯與(x<10&&y>1)true||邏輯或(x==5||y==5)false!邏輯非!(x==y)true條件運(yùn)算符三元操作條件?值1:值2執(zhí)行邏輯??條件為真→返回值1條件為假→返回值2??應(yīng)用示例greeting=(visitor=="PRES")?"DearPresident":"Dear";如果變量visitor中的值是"PRES"，則向變量greeting賦值"DearPresident"，否則賦值"Dear"位運(yùn)算符運(yùn)算符????描述????示例????結(jié)果??&按位與1&31|按位或1|33^按位異或1^32~按位取反~0-1<<

左移8<<232>>

有符號(hào)右移-8>>2-2>>>

無(wú)符號(hào)右移8>>>22字符串運(yùn)算符運(yùn)算符????功能????示例????結(jié)果??+字符串連接"Hello"+"World""HelloWorld"+=連接并賦值lets="Hi";s+="!"s="Hi!"??隱式轉(zhuǎn)換??與其他類型連接"Age:"+25"Age:25"數(shù)據(jù)類型轉(zhuǎn)換兩種轉(zhuǎn)換類型???顯式轉(zhuǎn)換??：主動(dòng)調(diào)用函數(shù)（Number()/String()等）???隱式轉(zhuǎn)換??：通過(guò)運(yùn)算符自動(dòng)觸發(fā)（+/-/*等）核心差異對(duì)比??類型控制方式典型場(chǎng)景顯式轉(zhuǎn)換程序員主動(dòng)表單數(shù)據(jù)轉(zhuǎn)數(shù)值隱式轉(zhuǎn)換JS引擎觸發(fā)字符串拼接、運(yùn)算Number()強(qiáng)制轉(zhuǎn)換規(guī)則輸入類型轉(zhuǎn)換結(jié)果示例數(shù)值原來(lái)的值Number(123)→123字符串如果可以解析為數(shù)值，則轉(zhuǎn)換成相應(yīng)的數(shù)值；如果不可以被解析為數(shù)值，返回NaNNumber("123")→123Number("12abc")→NaN空字符串轉(zhuǎn)換為0Number("")→0布爾值true返回1；false返回0Number(true)→1Number(false)→0undefined返回NaNNumber(undefined)→NaNnull返回0Number(null)→0對(duì)象返回NaN，除非包含單個(gè)數(shù)據(jù)的數(shù)值數(shù)組只有一個(gè)數(shù)組項(xiàng)為數(shù)值的時(shí)候返回的是本身值，其它的就是NaNparseInt()&parseFloat()