項(xiàng)目12使用CSS3的彈性布局——制作響應(yīng)式頁(yè)面一.填空題1．啟動(dòng)彈性盒子，需要用到____________屬性。答：display2．以下值分別代表什么含義box：將對(duì)象作為_______________顯示。inline-box：將對(duì)象作為_____________________________顯示。伸縮盒為最老版本。flexbox：將對(duì)象作為________________________顯示。inline-flexbox：將對(duì)象作為__________________顯示。答：彈性伸縮盒、內(nèi)聯(lián)塊級(jí)彈性伸縮盒、彈性伸縮盒、內(nèi)聯(lián)塊級(jí)彈性伸縮盒3．Flexbox與以前布局方式（如table布局和浮動(dòng)元素內(nèi)嵌塊元素）相比，有何優(yōu)勢(shì)：____________________________、____________________________、__________________、__________________________。答：在不同方向排列元素、重新排列元素的顯示順序、更改元素的對(duì)齊方式、動(dòng)態(tài)地將元素裝入容器。4．flexbox由_____________和_________________組成。答：伸縮容器、伸縮項(xiàng)目5．采用Flex布局的元素，稱為______________，簡(jiǎn)稱"容器"。它的所有子元素自動(dòng)成為容器成員，稱為_______________，簡(jiǎn)稱"項(xiàng)目"。答：flex容器、flex項(xiàng)目6．媒體查詢計(jì)算機(jī)屏幕類型用_____________值。答：srceen二.單項(xiàng)選擇題（只有一個(gè)正確答案）根據(jù)圖片，完成1-2題。1．主軸是（）。A．mainaxisB．main-startC．crossaxisD．cross-start答：A2．側(cè)軸是（）。A．mainaxisB．main-startC．crossaxisD．cross-start答：C3．flex-direction屬性的值設(shè)置為（）時(shí)，得到的效果圖如下：A．rowB．row-reverseC．columnD．column-reverse答：D4．flex-direction屬性的值設(shè)置為（）時(shí)，得到的效果圖如下：A．rowB．row-reverseC．columnD．column-reverse答：C5．flex-direction屬性的值設(shè)置為（）時(shí)，得到的效果圖如下：A．rowB．row-reverseC．columnD．column-reverse答：A6．flex-direction屬性的值設(shè)置為（）時(shí)，得到的效果圖如下：A．rowB．row-reverseC．columnD．column-reverse答：B 7．使用flex-wrap屬性可以定義伸縮容器里是單行還是多行，值為（）時(shí)得到如下效果： A．nowrapB．wrapC．wrap-reverse答：B 8．使用flex-wrap屬性可以定義伸縮容器里是單行還是多行，值為（）時(shí)得到如下效果： A．nowrapB．wrapC．wrap-reverse答：C 9．使用flex-wrap屬性可以定義伸縮容器里是單行還是多行，值為（）時(shí)得到如下效果： A．nowrapB．wrapC．wrap-reverse答：A 10．justify-content:屬性值，伸縮項(xiàng)目向一行的起始位置靠齊的值是（）。 A．flex-startB．flex-endC．centerD.space-between答：A三．簡(jiǎn)答題1．簡(jiǎn)述什么是響應(yīng)式頁(yè)面。答：就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端——而不是為每個(gè)終端做一個(gè)特定的版本。2．簡(jiǎn)述響應(yīng)式布局的優(yōu)點(diǎn)和缺點(diǎn)。答：響應(yīng)式布局的優(yōu)點(diǎn)：面對(duì)不同分辨率設(shè)備靈活性強(qiáng)，能夠快捷解決多設(shè)備顯示適應(yīng)問(wèn)題。響應(yīng)式布局的缺點(diǎn)：兼容各種設(shè)備工作量大，效率低下，代碼累贅，會(huì)出現(xiàn)隱藏?zé)o用的元素，加載時(shí)間加長(zhǎng)，其實(shí)這是一種折中性質(zhì)的設(shè)計(jì)解決方案，多方面因素影響而達(dá)不到最佳效果，一定程度上改變了網(wǎng)站原有的布局結(jié)構(gòu)，會(huì)出現(xiàn)用戶混淆的情況。3．flex-direction屬性可以定義伸縮方向，分別簡(jiǎn)述row、row-reverse、column、column-reverse這4個(gè)屬性值的含義。答：flex-direction屬性值屬性值描述row默認(rèn)值。靈