1. 問題：請分別寫出HTML中塊標籤、行標籤以及行塊標籤的特點。（10分）

本題目的：清晰掌握行標籤、塊標籤、行塊標籤的區別

答案：

          塊級元素：

               （1）獨佔父級元素一行 (0.75分)

               

（2）預設寬度為父級元素寬度的100%(0.75分) 

               （3）預設高度由內容撐開 (0.75分) 

               （4）可以設定寬高 (0.75分)

               

（5）可以任意巢狀（p標籤不能巢狀塊標籤）(0.75分)

               行級元素：

               （1）可在一行顯示，一行顯示不下時，自動切換到下一行(0.75分)

               

（2）不可以設定寬度和高度（input和img除外）(0.75分)

               （3）寬度和高度由內容撐開(0.75分)

               （4）設定上下外邊距無效 (0.75分)

               （5）不能巢狀塊標籤，其中a標籤不能巢狀a標籤 (0.75分)

               行塊級元素：

               （1）在一行顯示(0.5分)

               （2）預設寬度和高度由內容撐開(0.5分)

               （3）可以設定寬度和高度(0.5分)

               （4）換行被解析為空格(0.5分)

---

1. 問題：說出學過的選擇器有哪些？並舉例說明。（10分，少答一個扣2分，全答對滿分）

本題目的：對學過的選擇器，有清晰的瞭解

答案：

            （1）標籤名選擇器,例：div{}

               （2）id選擇器,例：#div{}

               （3）類選擇器,例：.div{}

               （4）後代選擇器,例：div a{}

               （5）群組選擇器,例：div,a{}

               （6）萬用字元選擇器,例：*{}

---

1. 問題：關於背景都有哪些樣式？寫出樣式並說明該樣式的意思和可設定的值型別，至少寫出五個；（10分,寫出一個樣式得1分，樣式的意思0.5分,可設定的值型別0.5分）

本題目的：掌握背景樣式

答案：

            （1）background-color：背景顏色，可設定的值有英文顏色單詞、十六進位制顏     色碼、rgb值和rgba值。

               （2）background-image：背景圖片，可設定的值為url().括號內為圖片的路徑。

               （3）background-size：背景尺寸，可設定的值有px、百分比

               （4）background-position：背景位置，可設定的值有px、百分比、具體方位（right、left、center、top、bottom）

               （5）background-repeat：背景平鋪方式，可設定的值有no-repeat不平鋪、repeat-x橫向平鋪、repeat-y縱向平鋪

               （6）background-attachment：背景是否跟隨頁面移動，可設定的值有scroll預設值跟隨、fixed不跟隨

---

1. 問題：關於文字都有哪些樣式？寫出樣式並說明該樣式的意思和可設定的值型別至少寫出五個;（10分,寫出一個樣式得1分，樣式的意思0.5分,可設定的值型別0.5分）

本題目的：掌握文字樣式

答案：

            （1）text-decoration：文字修飾，可設定的值有underline下劃線、overline上劃線、linethrough刪除線、none無文字修飾。

               （2）text-align：文字橫向對齊方式，可設定的值有left左對齊、center中間對齊、right右對齊

               （3）text-indent：文字縮排，可設定的值有px、em、百分比

               （4）line-height：文字行間距，可設定的值為px、em、百分比    

---

1. 問題：關於字型都有哪些樣式？寫出樣式並說明該樣式的意思和可設定的值型別。(10分,寫出一個樣式得1分，樣式的意思0.5分,可設定的值型別0.5分)

本題目的：掌握字型樣式

答案：

            （1）font-size：字型尺寸，可設定的值有px、em

               （2）font-family：設定字型，可設定的值為字型名字

               （3）font-style：字型風格，可設定的值有italic斜體、oblique傾斜

               （4）font-weight：字型粗細，可設定的值為bold加粗、bolder更粗、lighter更細、               100-900的粗細範圍         

               （5）color：字型顏色，可設定的值有英文程式碼、十六進位制顏色碼、rgb值和rgba值

         

---

1. 問題：什麼是盒模型？說出盒模型的組成及內外邊距使用場景(10分)

本題目的：考察盒模型結構掌握，以及寬高的計算

答案：

               CSS盒子模型就是在網頁設計中，把所有的頁面元素都看作盒子。（2分）

               它包括：外邊距(Margin)(1分)，邊框(border)(1分)，內邊距(padding)(1分)，和實際內容(content)(1分)

      使用場景：

（1）兄弟元素之間的距離用外邊距margin（2分）

（2）父子之間的距離用內邊距padding（2分）

1. 浮動元素的特點以及應用場景。(10分)

本題目的：掌握浮動元素的特點，明確浮動元素與其他元素的區別

答案：

            浮動元素的特點：（8分）

               （1）元素之間沒有間隙

               （2）元素脫離文件流

               （3）文字會環繞浮動元素

               （4）可以設定寬高

               應用場景：（2分）

               （1）塊標籤在一行顯示（2）左右佈局（3）文字包圍圖片

---

1. 問題：說出清除浮動的方式有哪些？(10分)

本題目的：對清除浮動方式的掌握，並瞭解為什麼要清除浮動

答案：

            1.給連續浮動元素後新增一個兄弟標籤,只設置樣式clear:both

               2.給父級div定義 overflow不為visible，可以是hidden、scroll、auto

               3.給父級div定義display：inline-block;

               4.給父級div定義 position不為relative，可以是absolute、fixed

               5.給父級div定義float

---

1. 問題：定位都有哪些？並說明定位基準、特點及應用場景。(10分)

本題目的：對定位的掌握，並瞭解為什麼要用定位

答案：

1. 1.   position:fixed;固定定位，永遠根據瀏覽器進行定位。

特點：（1）不在文字流（2）內容撐開寬高（3）可以設定寬高和縱向外邊距

應用場景：廣告、側邊欄、導航欄等固定佈局

（3.5分）

1. 2.   position:absolute;絕對定位，根據祖輩級上一個定位元素，進行定位,如果祖輩級沒有定位元素，則根據瀏覽器進行定位

特點：（1）不在文字流（2）內容撐開寬高（3）可以設定寬高和縱向外邊距

應用場景：重疊佈局

（3.5分）

1. 3.   position:relative;相對定位，根據自身定位。

特點：（1）在文字流（2）屬性特點不變

應用場景：（1）給絕對定位做定位基準（2）微調

（3分）

1. 問題：css3變換的屬性是什麼？變換有哪些方式，並寫出實現程式碼？（10分）

本題目的：掌握變換的屬性和方式

答案：

變換屬性： transform變換(2分)

變換方式：translate移動(1分)、rotate旋轉(1分)、scale縮放(1分)、skew傾斜(1分)

實現程式碼：

transform：translate(x,y);(1分)

transform：rotate(deg);(1分)

transform：scale(縮放比例);(1分)

transform：skew(deg);(1分)

1. 問題：設定元素進行3d變換的準備工作是什麼？（10分）

本題目的：掌握開3D和景深

答案：

transform-style屬性，值為preserve-3d（5分）

perspective屬性，值為畫素值(5分)

1. 問題：動畫分別有哪些樣式？都是什麼意思？並說出預設值（10分）

本題目的：掌握引入方式，明確瞭解優缺點後，根據情況，開始中使用不同的引入方式

答案：

1. 1.   動畫名字：animation-name；預設值：無
2. 2.   動畫執行時間： animation-duration；預設值：0s
3. 3.   動畫的時間函式： animation-timing-function；預設值：ease
4. 4.   動畫的延遲時間：animation-delay；預設值：0s
5. 5.   動畫播放次數： animation-iteration-count；預設值：1
6. 6.   動畫播放順序： animation-direction；預設值：alternate-reverse
7. 7.   動畫結束狀態：animation-fill-mode；預設值：backwards
8. 8.   動畫播放狀態：animation-play-state；預設值：running
9. 問題：box-shadow：3px 4px 5px 5px red; 和text-shadow：3px 4px 5px black; 分別代表什麼意思？（10分）

 

本題目的：掌握陰影複合樣式屬性的順序和代表的含義

答案：

盒子陰影：陰影橫向偏移3畫素 陰影縱向偏移4畫素 陰影模糊距離5畫素 陰影在盒子本身增加的尺寸 紅色陰影（5分）

文字陰影：陰影橫向偏移3畫素 陰影縱向偏移4畫素 陰影模糊距離5畫素 黑色陰影（5分）

1. 問題：彈性佈局學過哪些樣式？分別什麼意思？可以設定的值有哪些（10分）

本題目的：掌握彈性佈局

答案：

            （1）主軸的方向：flex-direction；可設定的值：row、column、row-reverse、column-reverse;

               （2）主軸放不下是否換行：flex-wrap ；可設定的值：wrap、nowrap、wrap-reverse；

               （3）主軸對齊方式：justify-content ；可設定的值：flex-start、flex-end、center、space-around、space-between ；

               （4）交叉軸對齊方式：align-items；可設定的值：flex-start、flex-end、center、stretch；

               （5）多根主軸時，交叉軸的對齊方式：align-content；可設定的值：flex-start、flex-end、center、stretch；

               （6）定義元素的顯示順序：order；可設定的值：數字   用來定義子集

               （7）讓單個子元素有不同的對齊方式：align-self；可設定的值：flex-start、flex-end、center、stretch、baseline、auto；

---

---