-HTML5移動前端開發(fā)基礎(chǔ)與實戰(zhàn)（第2版）（微課版）-PPT 模塊3

模塊3

CSS本模塊將前端開發(fā)中最常用、最實用的CSS布局功能進行詳細(xì)講解。CSS可以說是前端開發(fā)的重中之重，相對來說HTML元素可以快速掌握，而CSS的布局經(jīng)驗需要花時間積累。HTML5移動前端開發(fā)基礎(chǔ)與實戰(zhàn)（微課版）熟悉CSS的基本語法。知識目標(biāo)熟悉BOX模型。1熟練使用CSS選擇器。2熟練使用CSS常用屬性。職業(yè)目標(biāo)3熟練掌握position屬性、Float布局、Flex布局。4熟練屬性。5熟練掌握通過JavaScript操作CSS的方法。6了解CSS的2D變換、3D旋轉(zhuǎn)及動畫。培養(yǎng)團隊作能力。培養(yǎng)遵章守紀(jì)、無私敬業(yè)的品格。素質(zhì)目標(biāo)CSS指層疊樣式表(CascadingStyleSheets)。最核心的就是樣式，樣式定義了如何顯示HTML元素，解決了內(nèi)容與表現(xiàn)分離的問題。使用外部樣式表可以提高工作效率，外部樣式表通常存儲在CSS文件中。3.1

常用CSS3.1.1CSS基本語法及使用CSS的幾種方式元素選擇器，以“HTML元素”的形式進行申明。ID選擇器，以“#”+id值的形式進行申明。樣式選擇器，以“.”+class值的形式進行申明。使用CSS的方式：CSS內(nèi)聯(lián)樣式、CSS內(nèi)部樣式、CSS外部樣式。熟悉幾種選擇器熟悉CSS內(nèi)聯(lián)樣式，樣式聲明在元素內(nèi)部。演練3.1CSS內(nèi)部樣式，元素選擇器。演練3.2ID選擇器。演練3.3樣式選擇器。演練3.4編寫樣式文件，學(xué)習(xí)使用外部樣式。演練3.5使用多列布局（CSSMultiColumnLayoutModule）能方便實現(xiàn)類似報紙、雜志那種多列排版的方式。如果指定列數(shù)，則按指定列數(shù)布局。如果未指定列數(shù)，那么瀏覽器將會動態(tài)的根據(jù)容器的寬度進行分配。3.1.2多列布局熟悉多列布局。演練3.63.1.3display屬性block塊級元素會獨占一行，多個block元素會各自新起一行。默認(rèn)情況下，block元素寬度自動填滿其父元素寬度。block元素可以設(shè)置width，height屬性。但即使設(shè)置了寬度,仍然是獨占一行。inline元素不會獨占一行，多個相鄰的行內(nèi)元素會排列在同一行里，直到一行排列不下，才會新?lián)Q一行，其寬度隨元素的內(nèi)容而變化。inline元素設(shè)置width，height屬性無效。inline元素的margin和padding屬性：水平方向的padding-left、padding-right、margin-left、margin-right會產(chǎn)生邊距效果；但豎直方向的padding-top、padding-bottom、margin-top、margin-bottom不會產(chǎn)生邊距效果。display屬性規(guī)定元素應(yīng)該生成的框的類型。3.1.3display屬性：block、inline、inline-block、none熟悉Display屬性。演練3.7常見的塊級元素有div、p、h1~h6、ol、ul、table等。常見的內(nèi)聯(lián)元素有l(wèi)abel、textarea、img、br、select、span、a等。通過display:inline和display:block的設(shè)置，可以改變元素的布局級別。inline-block：將對象呈現(xiàn)為inline對象，但是對象的內(nèi)容作為block對象呈現(xiàn)。之后的內(nèi)聯(lián)對象會被排列在同一行內(nèi)。比如我們可以給一個span元素inline-block屬性值，使其既具有block的寬度高度特性又具有inline的同行特性。Input元素的display屬性默認(rèn)為inline-block。none：元素不顯示。3.1.4BOX模型BOX模型如圖所示。Box模型，熟悉box-sizing:border-box。演練3.83.1.5position屬性position屬性指定了元素的定位類型。position屬性的四個值：認(rèn)識static、relative、fixed定位。演練3.9熟悉relative定位。演練3.10熟悉absolute定位。演練3.11staticrelativefixedabsolute3.1.6float布局CSS的float（浮動），會使元素向左或向右移動，其周圍的元素也會重新排列。元素的水平方向浮動，意味著元素只能左右移動而不能上下移動。一個浮動元素會盡量向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。浮動元素之后的元素將圍繞它，浮動元素之前的元素將不會受到影響。如果圖像是右浮動，下面的文本流將環(huán)繞在它左邊。元素浮動之后，周圍的元素會重新排列，為了避免這種情況，使用clear屬性，

clear屬性指定元素兩側(cè)不能出現(xiàn)浮動元素。觀察浮動效果。演練3.123.1.7flex彈性布局布局的傳統(tǒng)解決方案，基于盒狀模型，依賴display屬性+position屬性+float屬性。它對于一些布局實現(xiàn)起來比較麻煩。Flex是FlexibleBox的縮寫，意為“彈性布局”，用來為盒狀模型提供最大的靈活性，任何一個容器都可以指定為Flex布局。需要注意的是，設(shè)為Flex布局以后，子元素的float、clear和vertical-align屬性將失效。采用Flex布局的元素，稱為Flex容器（flexcontainer），簡稱“容器”。它的所有子元素自動成為容器成員，稱為Flex項目（flexitem），簡稱“項目”。熟悉Flex彈性布局。演練3.13用Flex彈性布局實現(xiàn)上中下三層布局，其中頂部和底部頂格設(shè)計，中間內(nèi)容高度占滿剩余空間。演練3.143.1.8overflow屬性熟悉overflow屬性。演練3.15overflow屬性定義當(dāng)對象的內(nèi)容超過其指定高度及寬度時如何管理內(nèi)容?；菊Z法如下：overflow:visible|auto|hidden|scroll屬性取值說明：visible：默認(rèn)值。內(nèi)容不會被修剪，會呈現(xiàn)在元素框之外。auto：如果內(nèi)容被修剪，則瀏覽器會顯示滾動條以便查看其余的內(nèi)容。hidden：超過對象尺寸的內(nèi)容是不可見的。scroll：總是顯示滾動條。transparent表示背景透明，可以被延伸到任何一個有color值的屬性上。3.1.9transparent屬性5G利用transparent屬性制作箭頭。演練3.163.1.10background相關(guān)屬性background相關(guān)屬性演練。演練3.173.1.11JavaScript操作CSS（1）直接設(shè)置style的屬性。（2）使用setProperty。（3）通過className設(shè)置。通過JavaScript操作CSS。演練3.18CSS3常用新功能包括：透明度、文字陰影、圓角、陰影、動畫與漸變、媒體查詢等。這些新功能將為設(shè)計者帶來前所未有的方便。3.2CSS3新功能3.2.1圓角、陰影圓角border-radius。演練3.19陰影box-shadow。演練3.203.2.2線性漸變、徑向漸變線性漸變linear-gradient。演練3.21徑向漸變radial-gradient。演練3.22漸變（gradients）可以讓讀者在兩個或多個指定的顏色之間顯示平穩(wěn)地過渡。3.2.32D變換縮放scale與位移translate。演練3.24旋轉(zhuǎn)rotate與傾斜skew。演練3.23設(shè)置旋轉(zhuǎn)元素的基點位置transform-orign。演練3.253.2.43D旋轉(zhuǎn)對比觀察rotateX、rotateY、rotateZ是如何旋轉(zhuǎn)的。演練3.26對比觀察backface-visibility屬性。演練3.27對于3D旋轉(zhuǎn)操作，可以使用rotateX、rotateY、rotateZ，以及rotate3D操作。3.2.5動畫編寫動畫效果，理解動畫相關(guān)屬性的含義。演練3.28顯示撲克牌正面，單擊后翻轉(zhuǎn)顯示撲克牌背面。演練3.29掌握自定義動畫的編寫過程，熟悉各相關(guān)屬性的含義。演練3.30自定義動畫。演練3.31使用-webkit-mask屬性實現(xiàn)圖片遮罩效果。演練3.32transition可以為元素從一種樣式變換為另一種樣式時增加過渡效果。3.2.6viewport在開發(fā)移動設(shè)備的網(wǎng)站時，最常見的一個動作就是把下面這條語句復(fù)制到我們的head標(biāo)簽中：<metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">該meta標(biāo)簽的作用是讓當(dāng)前viewport的寬度等于設(shè)備的寬度，同時不允許用戶手動縮放。3.2.6viewportMediaQueries的作用就是允許添加表達(dá)式用以確定媒體的環(huán)境情況，以此來應(yīng)用不同的樣式表。換句話說，其允許我們在不改變內(nèi)容的情況下，改變頁面的布局以精確適應(yīng)不同的設(shè)備。@media規(guī)則可針對不同媒體類型可以定制不同的樣式規(guī)則。例如，可以針對：（1）顯示器、打印機設(shè)置不同的樣式規(guī)則；（2）設(shè)備的不同寬度與高度設(shè)置不同的樣式規(guī)則；（3）根據(jù)朝向(智能手機橫屏或豎屏)的不同設(shè)置不同的樣式規(guī)則。手機橫豎屏切換時設(shè)置不同顯示效果。演練3.33根據(jù)屏幕大小設(shè)置不同的樣式，實現(xiàn)響應(yīng)式編程。演練3.34思考理解display屬性了嗎？能自行編寫小例子測試各屬性值（特別是block、inline）的效果嗎？理解position屬性了嗎？能自行編寫小例子測試各屬性值的效果嗎？